همه چیز درباره‌ی تفاوت Div و Section

اگر در دنیای طراحی وب کمی وارد شده باشید، حتما با دو تگ معروف div و section برخورد داشته اید و حتما برایتان این سوال پیش آمده است که تفاوت Div و Section چیست؟ چه زمان هایی باید از تگ div استفاده کنیم و چه زمان هایی از تگ section. در این مقاله و فیلم آموزشی میخواهیم بصورت کامل به این سوال پاسخ دهیم. پس با من همراه باشید.

دانلود این فیلم آموزشی با حجم ۱۳ مگ

Div برای قسمت بندی صفحات وب

تعداد بسیار زیادی از دوستانی که محصول ساخت ۹ قالب پیشرفته با HTML5 و CSS3 را تهیه کردند، این سوال برایشان پیش آمده است چرا در بعضی از قسمت های آموزش از تگ Div و در بعضی قسمت های دیگر از تگ Section استفاده کرده‌ایم.

در گذشته و قبل از HTML5، هنگامی که میخواستم قسمت بندی صفحات وب را انجام دهیم، از تگ Div استفاده میکردیم. برای مثال وقتی که میخواستم قسمت بالایی سایت (Header) را طراحی کنیم، به این صورت مینوشتیم:

<div id="header">
    <!-- Header -->
</div>

یک تگ Div مینوشتیم و برای آن یک ID یا Class مشخص میکردیم و نهایتا با استفاده از CSS به آن‌ها استایل میدادیم. (تفاوت Id و Class چیست؟)

مفهوم تگ‌های معنا گرا (Semantic Tags)

اما هنگامی که HTML5 معرفی شد‌، مفهومی در آن ارائه شد که باعث شد کمی روش کار طراحان وب عوض شود. این مفهوم را ما با نام تگ های معنا گرا یا Semantic Tag ها میشناسیم. اگر بخواهیم این تگ ها توضیح دهیم میتوانیم بگوییم:

تگ‌های معنا گرا یک کار خیلی مهم انجام میدهند! آن‌ها برای مرورگر ها و موتورهای جست‌وجو دارای معنا و مفهوم هستند و با استفاده از این تگ ها، میتوانیم به موتورهای جست و جو بفهمانیم که هر قسمت از سایت ما در حال انجام چه کاری است.

برای مثال در HTML5 اگر بخواهیم قسمت Header سایت‌مان را طراحی کنیم، خوب است که از تگ <header> به این صورت استفاده کنیم:

<header>
	<!-- Header in HTML5 -->
</header>

هنگامی که از تگ <header> استفاده میکنیم، این مفهوم را به موتورهای جست و جو میرسانیم که محتویات این تگ، شامل هدر و قسمت بالایی سایت ما میشود. انجام اینکار و استفاده از این تگ ها باعث میشود که موتورهای جست و جو مثل گوگل، حس بهتری به سایت ما داشته باشند و دقیقا متوجه شوند که در سایت ما چه خبر است!

[mailerlite_form form_id=1]

لیستی از تگ های معنا گرا

تگ های معناگرا فقط به <header> ختم نمیشوند. تعداد زیادی از این تگ ها وجود دارد که هرکدام کار مربوط به خودشان انجام میدهند. در زیر لیستی از مهم ترین تگ های معناگرا در HTML5 را توضیح میدهیم که در ادامه بتوانیم بهتر به سوال تفاوت Div و Section صحبت کنیم:

• تگ <header> => برای مشخص کردن هدر و قسمت بالایی سایت
• تگ <nav> => برای قسمت منوی ناوبری یا Navigation Menu
• تگ <aside> => برای قسمت منوی کناری سایت یا Sidebar
• تگ <article> => برای محتویات مهم سایت، مثل متن مقالات
• تگ <footer> => برای مشخص کردن فوتر یا قسمت پایینی سایت
• تگ <section> => برای مشخص کردن یک قسمتی از سایت که هیچ معنای خاصی ندارد.

در ادامه بیشتر درباره‌ی تگ Section صحبت میکنیم و به سوال تفاوت Div و Section پاسخ میدهیم.

تفاوت Div و Section

با توضیحاتی که در بالا دادیم،‌ حالا میخواهیم درباره‌ی تفاوت Div و Section صحبت کنیم و بگوییم که چرا بعضی وقت ها از تگ Div استفاده میکنیم و بعضی وقت ها از تگ Section.

همانطور که گفتیم، تگ های معناگرا حاوی یک پیامی هستند که برای موتورهای جست و جو پیام مهمی است. هنگامی که ما از تگ ها معنا گرا مثل <header>, <footer> و… استفاده میکنیم، به موتورهای جست و جو میفهمانیم که هر قسمت از سایت ما متعلق به چه نوع محتوایی است.

اما زمانی در طراحی وب پیش می‌آید که میخواهیم یک بخشی در سایت و صفحه‌ای که طراحی میکنیم داشته باشیم، که آن بخش نه هدر است، نه فوتر، نه سایدبار و نه هیچ قسمت دیگر. فقط یک بخشی است که میخواهیم داشته باشیم و اسم خاصی نمیتوانیم روی آن بگذاریم. در این زمان بهتر است که از تگ <section> استفاده کنیم.

وقتی که بخشی را میخواهیم طراحی و برنامه نویسی وب کنیم که هیچ اسم خاصی ندارد، میتوانیم از تگ <section> استفاده کنیم. البته که اگر برای این قسمت ها از تگ div هم استفاده کنم هیچ مشکل خاصی پیش نمی‌آید، اما منطقی تر این است که حالا که داریم از HTML5 در طراحی‌هایمان استفاده میکنیم، همه قواعد و قوانین مربوط به آن‌را رعایت کنیم.

پس نهایتا در پاسخ به سوال تفاوت Div و Section میتوانیم بگوییم:

تگ Section یک تگ از مجموعه تگ های معناگرایی است که در HTML5 معرفی است. و بهتر است برای اینکه کدمان مطابقت بیشتری با HTML5 داشته باشد و کد استاندارد تری باشد، از تگ Section برای بخش بندی صفحات وب استفاده کنیم.

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