دوره رایگان
HTML5 طراحی وب فرانت اند (Front End)

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

تفاوت Div و Section
نوشته شده توسط مهدی خسروی

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

 

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

 

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

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

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

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

 

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

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

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

برای مثال در HTML5 اگر بخواهیم قسمت Header سایت‌مان را طراحی کنیم، خوب است که از تگ <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 صحبت کنیم و بگوییم که چرا بعضی وقت ها از تگ Div استفاده میکنیم و بعضی وقت ها از تگ Section.

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

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

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

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

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

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

 

امتیاز مقاله
  • کیفیت مقاله و فایل آموزشی
۵

درباره نویسنده

مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

۴ دیدگاه

    • سلام جناب امامی عزیز
      خیر. هیچ مشکلی نداره. شما میتونید تگ های معناگرا رو هرجایی که دوست دارید استفاده کنید. فقط مهم این هست که در کد شما در جای درست وجود داشته باشند و محتویات اون‌ها مرتبط باشه با اون تگ.
      برای مثال باید در تگ nav باید چیزی از جنس منوی ناوبری (Navigation Menu) رو قرار بدید و در تگ aside چیزی از جنس سایدبار. حالا اگه این تگ ها داخل تگ های دیگری باشند، مشکل خاصی رو بوجود نمیاره.
      موفق باشید

درج دیدگاه

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.