تگ section در HTML + فیلم آموزشی

تگ section در html برای ایجاد یک بخش مستقل و معنادار استفاده می شود. ممکن است این سوال در ذهن شما به وجود بیاید که چطور بخش مستقل را تشخیص دهیم؟ برای کدام بخش ها استفاده از تگ سکشن اشتباه است؟ یا سوالاتی مشابه برایتان به وجود بیاید. در این نوشته شیوه اصولی استفاده از تگ section در html را همراه با مثال و تصویر بررسی کنیم تا با این تگ به خوبی آشنا شوید.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

تگ section چیست؟

تعریف تگ section: همانطور از نام آن مشخص است یعنی بخش و قسمت. در html5 از این تگ برای بخش بندی صفحه به قسمت های معنی دار استفاده می شود. بخش معنی دار، یعنی بخشی که از ایجاد آن یک هدف خاص داریم. هر جا که این تگ را قرار می دهیم موتورهای جستجو در آن بخش دنبال هدف ما می گردند. بنابراین استفاده نا به جا از آن باعث سردرگمی ربات های جستجو در سایت می شود و از نظر سئو به سایت لطمه می زند. در ادامه به صورت دقیق تر این موضع را بررسی می کنیم.

آموزش تگ section در html

طبق توضیحاتی که در بالا دادیم باید بخش هایی از صفحه که هدف خاصی را دنبال می کند مشخص کنیم، سپس برای بخش بندی آن قسمت ها از تگ Section استفاده کنیم. در زیر نکاتی را ذکر می کنیم که با استفاده از آنها شیوه استفاده از آن را بهتر دریابید:

• معمولا بخش هایی که مشخص می کنیم باید یک عنوان خاص (<h1> تا <h6>) داشته باشند.
• محتویاتی که داخل یک سکشن قرار می گیرند باید به هم مرتبط باشند و مجموعا یک معنا را برسانند. اگر محتوایات از نظر معنایی مرتبط نیستند بهتر است از <div> استفاده کنید.
• بستگی به صفحه شما، هم تگ <section> می تواند درون تگ <article> قرار بگیرد و هم <article> می تواند درون <section> قرار گیرد.
• برای قسمت هایی که فقط قصد داریم استایل خاصی داشته باشد از تگ div استفاده می کنیم و استفاده از <section> در این مواقع صحیح نیست.
• استفاده از <section> به جای هدر، فوتر و سایدبار صحیح نیست.

کار با تگ section (همراه با مثال)

مثال 1- کار با تگ section (استفاده صحیح: شامل عنوان بخش و سایر قسمت ها)

<section>

<h2>عنوان بخش</h2>

<p> توضیحات درباره این بخش از سند</p>

</section>

مثال 2- استفاده از section درون article

<section>

<article> مقاله اول </article>

<article> مقاله دوم </article>

</section>

مثال 3- استفاده از article درون section

<article>

<section> بخش 1 </section>

<section> بخش 2 </section>

<section> بخش 3 </section>

</article>

کاربرد تگ section در html5 (نکات + تصویر)

• اگر هدف ما از ایجاد بخش، نشان دادن یک محتوای مستقل باشد (مثلا وبلاگ، مقاله و … ) بهتر است از تگ <article> استفاده کنیم.
• اگر اطلاعات مفیدی را بخواهیم نشان دهیم که در کنار محتوای اصلی نمایش داده شود بهتر است از تگ <aside> استفاده کنیم.
• اگر در سند خود قصد داشته باشیم قسمت اصلی صفحه را مشخص کنیم از تگ main استفاده می کنیم.
• اگر قصد داریم یک بخش داشته باشیم که فقط ظاهر خاصی داشته باشد و هدف خاص دیگری نداریم از <div> استفاده می کنیم.
• معمولا برای هر <section> باید بتوانیم یک عنوان (<h1> تا <h6>) مشخص کنیم. اگر نمی توانید یک عنوان برای آن در نظر بگیرید کمی درباره آن بیشتر فکر کنید و اگر هدفتان مشخص بود از آن استفاده کنید.

جمع بندی

در این نوشته سعی کردیم تگ section در html را تعریف کنیم، کاربرهای آن را بیان کنیم و همچنین آموزش استفاده از آن و جاهایی که بهتر است از این تگ استفاده نشود را به صورت کامل مورد بررسی قرار دهیم. اگر نکته مبهمی در ذهن شما هست و یا تجربه ای در این زمینه دارید خوشحال می شویم در بخش نظرات مطرح نمایید تا شما هم سهمی در کاملتر شدن این آموزش داشته باشید.

منبع: https://www.w3schools.com/tags/tag_section.asp