- عضویت
- 18/1/20
- ارسال ها
- 2,336
- امتیاز واکنش
- 13,208
- امتیاز
- 323
- زمان حضور
- 52 روز 9 ساعت 59 دقیقه
اگر در دنیای طراحی وب کمی وارد شده باشید، حتما با دو تگ معروف div و section برخورد داشته اید و حتما برایتان این سوال پیش آمده است که تفاوت Div و Section چیست؟ چه زمان هایی باید از تگ div استفاده کنیم و چه زمان هایی از تگ section. در این مقاله و فیلم آموزشی میخواهیم بصورت کامل به این سوال پاسخ دهیم. پس با من همراه باشید.
Div برای قسمت بندی صفحات وب
تعداد بسیار زیادی از دوستانی که محصول ساخت ۹ قالب پیشرفته با HTML5 و CSS3 را تهیه کردند، این سوال برایشان پیش آمده است چرا در بعضی از قسمت های آموزش از تگ Div و در بعضی قسمت های دیگر از تگ Section استفاده کرده‌ایم.
در گذشته و قبل از HTML5، هنگامی که میخواستم قسمت بندی صفحات وب را انجام دهیم، از تگ Div استفاده میکردیم. برای مثال وقتی که میخواستم قسمت بالایی سایت (Header) را طراحی کنیم، به این صورت مینوشتیم:
یک تگ Div مینوشتیم و برای آن یک - یا Class مشخص میکردیم و نهایتا با استفاده از CSS به آن‌ها استایل میدادیم. (تفاوت - و Class چیست؟)
مفهوم تگ‌های معنا گرا (Semantic Tags)
اما هنگامی که HTML5 معرفی شد، مفهومی در آن ارائه شد که باعث شد کمی روش کار طراحان وب عوض شود. این مفهوم را ما با نام تگ های معنا گرا یا Semantic Tag ها میشناسیم. اگر بخواهیم این تگ ها توضیح دهیم میتوانیم بگوییم:
تگ‌های معنا گرا یک کار خیلی مهم انجام میدهند! آن‌ها برای مرورگر ها و موتورهای جست‌وجو دارای معنا و مفهوم هستند و با استفاده از این تگ ها، میتوانیم به موتورهای جست و جو بفهمانیم که هر قسمت از سایت ما در حال انجام چه کاری است.
برای مثال در HTML5 اگر بخواهیم قسمت Header سایت‌مان را طراحی کنیم، خوب است که از تگ <header> به این صورت استفاده کنیم:
مقاله‌ی مرتبط: تفاوت جاوا و جاوا اسکریپت - هرکدام چه کاربردی دارند؟
هنگامی که از تگ <header> استفاده میکنیم، این مفهوم را به موتورهای جست و جو میرسانیم که محتویات این تگ، شامل هدر و قسمت بالایی سایت ما میشود. انجام اینکار و استفاده از این تگ ها باعث میشود که موتورهای جست و جو مثل گوگل، حس بهتری به سایت ما داشته باشند و دقیقا متوجه شوند که در سایت ما چه خبر است!
[mailerlite_form form_id=1]
لیستی از تگ های معنا گرا
تگ های معناگرا فقط به <header> ختم نمیشوند. تعداد زیادی از این تگ ها وجود دارد که هرکدام کار مربوط به خودشان انجام میدهند. در زیر لیستی از مهم ترین تگ های معناگرا در HTML5 را توضیح میدهیم که در ادامه بتوانیم بهتر به سوال تفاوت Div و Section صحبت کنیم:
roman98.com
Div برای قسمت بندی صفحات وب
تعداد بسیار زیادی از دوستانی که محصول ساخت ۹ قالب پیشرفته با HTML5 و CSS3 را تهیه کردند، این سوال برایشان پیش آمده است چرا در بعضی از قسمت های آموزش از تگ Div و در بعضی قسمت های دیگر از تگ Section استفاده کرده‌ایم.
در گذشته و قبل از HTML5، هنگامی که میخواستم قسمت بندی صفحات وب را انجام دهیم، از تگ Div استفاده میکردیم. برای مثال وقتی که میخواستم قسمت بالایی سایت (Header) را طراحی کنیم، به این صورت مینوشتیم:
| ۱ ۲ ۳ | <div -="header"> <!-- Header --> </div> |
یک تگ Div مینوشتیم و برای آن یک - یا Class مشخص میکردیم و نهایتا با استفاده از CSS به آن‌ها استایل میدادیم. (تفاوت - و 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> => برای مشخص کردن یک قسمتی از سایت که هیچ معنای خاصی ندارد.
رمان ۹۸ | دانلود رمان
نودهشتیا,بزرگترین مرجع تایپ رمان, دانلود رمان جدید,دانلود رمان عاشقانه, رمان خارجی, رمان ایرانی, دانلود رمان بدون سانسور,دانلود رمان اربابی,
roman98.com
همه چیز درباره‌ی تفاوت Div و Section
رمان ۹۸ | دانلود رمان
نودهشتیا,بزرگترین مرجع تایپ رمان, دانلود رمان جدید,دانلود رمان عاشقانه, رمان خارجی, رمان ایرانی, دانلود رمان بدون سانسور,دانلود رمان اربابی,
roman98.com
