این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ section در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ section در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Section در HTML
تگ section تگی است که با استفاده از آن میتوان یک بخش یا ( Section ) را در یک صفحه وب ایجاد کرد.
معمولا از این تگ برای مشخص کردن یک محتوای مستقل استفاده میشه و همچنین بهتره که هر بخش دارای یک عنوان باشه و عنوان رو نیز میتونیم از طریق تگ های تیتر H1-H6 ایجاد نماییم.
Free-Learn
مثال از تگ section در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ section بهمراه عنوان ( که عنوان از طریق تگ h2 ایجاد شده )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body dir="rtl"> <section> <h2>بخش اول</h2> <p>سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن </p> </section> <section> <h2>بخش دوم</h2> <p>سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن </p> </section> </body> |
مثال شماره ۲ : استفاده از تگ Article درون تگ Section
|
1 2 3 4 5 6 7 8 9 10 11 |
<section> <article> مطلب اول </article> <article> مطلب دوم </article> </section> |
مثال شماره ۳ : استفاده از تگ Section درون تگ Article
|
1 2 3 4 5 6 7 |
<article> <section id="moarefi"> ... </section> <section id="tasavir"> ... </section> <section id="natije-giri"> ... </section> </article> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ section در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ section از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
اگه یادتون باشه بارها گفتم که HTML برای هر چیزی تگ مخصوص ایجاد کرده ، مثلا برای عکس گذاشتن در صفحه باید از تگ img استفاده کنیم، یا مثلا برای ویدئو گذاشتن باید از تگ Video استفاده کنیم.
حال تگ section میتونه داخلش محتوای مستقل قرار بگیره، منظور از مستقل یعنی اگه چیزی باشه ولی تگ مخصوص براش وجود نداشته باشه میتونه داخل تگ section قرار بگیره.
مثلا اگه ما بخوایم لیستی از نتایج جستجو در سایت رو به نمایش بگذاریم، خب تگ مخصوص برای اینکار که وجود نداره پس میتونیم از تگ section استفاده کنیم. ( همانند دستورات زیر )
|
1 2 3 4 5 6 7 8 9 10 |
<body> <section> <h2>نتایج یافت شده از جستجو</h2> <p>نتیجه 1</p> <p>نتیجه 2</p> <p>نتیجه 3</p> </section> </body> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ section را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
section { display: block; } |
