تگ های معنایی (Semantic Tags) در HTML 5
اغلب تگ های HTML به منظور جای دادن محتوایی در خود تعریف می شوند و ان تگ ها تنها به مرورگر می گویند که محتوایات دورنشان را چطور نمایش دهند. اما این تگ ها، نوع محتوای درون خودشان را مشخص نمی کنند و اطلاعاتی را در رابطه با محتویات درونشان در اختیار مرورگرها قرار نمی دهند.
منظور از HTML Semantic یعنی کدهای صفحات وب باید به گونه ای نوشته شوند که تا حد امکان برای دستگاه های مختلف قابل فهم باشند. به عنوان مثال سورس کد یک مقاله وب باید طوری نوشته شده باشد که هنگامی که توسط ماشنینی پردازش می شود، قسمت های مختلف آن شامل عنوان، محتوا، نویسنده و... از یکدیگر متمایز و خود مقاله نیز از سایر بخش های سایت قابل تفکیک باشد. در نسخه های اولیه HTML هدف، بیشتر ارائه محتوایی قابل استفاده برای کاربران بود و تمرکز اصلی بیشتر بر روی ظاهر صفحات وب بود و اینکه این ظاهر با چه سبک کدنویسی به دست آید اهمیت چندانی نداشت. به عبارتی کاربران سایت می توانستند از توضیحات متنی، رنگ و اندازه فونت ها یا چیدمان صفحه، قسمت های مختلف یک مقاله مانند مطلب اصلی، عنوان، نویسنده و... را تفکیک کنند، اما این خصوصیات برای دستگاه های صفحه خوان و حتی مرورگرها به راحتی قابل درک و پردازش نبود.
برای همین منظور در نسخه 5 HTML تگ های بیشتری برای راحتی کار دستگاهای پردازشگر ارائه شد تا بتوانند راحت تر بخش های مختلف یک صفحه وب را از هم تفکیک کنند و هر قسمتی که مورد نیاز آنها بود را استخراج کنند. ظاهرا نامگذاری این تگ ها با همکاری شرکت گوگل صورت گرفته، که تقریبا یک میلیارد صفحه وب را مورد بررسی قرار دادند تا سلیقه کاربران در نامگذاری تگ های مخلتف صفحه با استفاده از کلاس های CSS را بدست آورند.
بنابران عناصر معنایی، عناصری هستند که برای مرورگرها ساختار صفحه را بهتر تفهیم کرده و کار مرورگر را دقیق تر و ساده تر می کنند. یک عنصر معنایی، همانطور که از نامش پیداست، معنای خود را برای مرورگر و توسعه دهندگان وب تعریف می کند.
به عنوان مثال های تگ ها غیر معنایی (non-semantic) مانند div و span اطلاعاتی را در رابطه با محتوای خود در اختیار مرورگرها و پردازشگرهای صفحه وب قرار نمی دهند.
اما در مقابل تگ های معنایی (semantic) مانند form ، table و aside اطلاعاتی را در رابطه با محتوای خود در اختیار مرورگرها و پردازشگرهای صفحه وب قرار می دهند.
عناصر معنایی در HTML
بسیاری از وب سایت ها شامل کدهای HTML مانند < div id="nav" > < div class="header" > < div id="footer" > برای نشان دادن منوی ناوبری، عنوان و فوتر می باشند. که از id و class برا مشخص کردن بخش های مختلف صفحه استفاده کرده اند.
اما در HTML 5 چندین عنصر معنایی وجود دارد که می توانند به منظور تعریف کردن بخش های مختلف یک وب سایت به کار روند و جاگزین روش قبلی باشند. تگ هایی مانند:
- < article >
- < aside >
- < details >
- < figcaption >
- < figure >
- < footer >
- < header >
- < main >
- < mark >
- < nav >
- < section >
- < summary >
- < time >
همانطور که در تصویر زیر می بینید، به راحتی با استفاده از سمانتک تگ ها می توانیم بخش های مختلف صفحه وب را مشخص کنیم.
عنصر section در HTML
تگ section برای ایجاد بخش های مجزا در صفحه HTML به کار می رود. به طور مثال برای ارائه مطالب گروه بندی شده که معمولا یک عنوان خاص دارند، می توانید از تگ section استفاده کنید. تگ section می تواند به صورت تو در تو (nested) مورد استفاده قرار گیرد، به عبارتی یک بخش می تواند زیرمجموعه های دیگری با section های بیشتر داشته باشد. تگ section می تواند یک یا چند تگ عنوان (h1 تا h6) داشته باشد، اما به صورت منحصر بفرد و تنها یک مورد از هر تگ (h1 تا h6) و سلسه مراتب این تگ ها نیز باید رعایت شود. مثال زیر نحوه استفاده از تگ section را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
نکته: تفاوت تگ section و تگ div در این است که تگ div حالت عمومی دارد و به عبارتی هرجا که نتوانیم از section (یا تگ های معنایی دیگر) استفاده کنیم، div می تواند جایگزین آن شود و با استفاده از ویژگی هایی مانند class و id و تعریف یک سری استایل، فرمت بندی صفحات وب را با آن انجام دهیم. به عبارتی از تگ section نمی توان با هدف پیاده سازی ساختار کلی صفحه وب استفاده کرد و بیشتر از تگ section برای تعیین محتوای گروه بندی شده قسمتی از صفحه وب استفاده می شود. معمولا طراحان وب بخش ها و ساختار کلی صفحه را با div ایجاد می کنند و قسمت های محتوایی و درونی را با تگ های معنایی مانند section ایجاد می کنند تا برای مرورگرها قابل فهم تر باشند. بنابراین شما می توانید از این دو تگ در کنار هم و به صورت ترکیبی استفاده کنید.
عنصر article در HTML
عنصر article محتوایی کامل و مستقل را تعریف می کند. یک مقاله باید به خودی خود فایده داشته باشد و بتواند جدای از بقیه محتوای وب سایت عرضه شود. به طور مثال فرض کنید در بخش مقالات، مقاله ای در خصوص آشنایی با انواع مروگرها داشته باشیم که خود بخش های مجزایی مانند مروگر Microsoft Edge، Mozilla Firefox و Google Chrome داشته باشد، و همچنین هر مطلب می تواند شامل بخش نویسنده، اطلاعات نگارش، یادداشت های کاربران و... باشد.
مثال هایی از اینکه یک عنصر article کجاها می تواند استفاده شود:
- پست Forum
- پست بلاگ
- مقاله ، روزنامه
مثال زیر نحوه استفاده از تگ article را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
استفاده تو در تو از تگ article در تگ section یا بالعکس؟
article می تواند به صورت تو در تو تگ های section داشته باشد و همین طور تگ section می تواند تگ های article زیرمجموعه داشته باشد، مهم این است که کارکرد هر قسمت متناسب با محتوای آن مشخص شده باشد.
تگ Header
تگ header یک تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک سرتیتر یا مجموعه ای از عناصر مرتبط با سرصفحه مانند تگ های h ، لوگوی صفحه، فرم جستجو و ... قرار گیرند، استفاده کرد. یک عنصر header معمولا شامل :
- یک یا دو عنصر heading (h1 - h6)
- لوگو یا آیکون
- اطلاعات مرتبط به تالیف و نگارش
نکته : به خاطر داشته باشید که در یک سند HTML می توانید از چندین تگ header استفاده کنید. با این حال ، تگ header نمی تواند درون تگ های footer ، address یا یک تگ header دیگر قرار بگیرد. مثال زیر نحوه استفاده از تگ header را نشان می هد.
خروجی مثال بالا به شکل زیر است:
عنصر footer در HTML
تگ footer برای تعیین پا صفحه یا زیر نویس در سند HTML به کار می رود. تگ footer نیز مانند تگ header یک تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک پاصفحه یا مجموعه ای از عناصر مرتبط با پاصفحه مانند اطلاعات حقوق مولف، قوانین سایت و...) قرار گیرند، استفاده کرد. یک عنصر footer معمولا شامل موارد زیر می باشد:
- اطلاعات مرتبط به تالیف و نگارش
- اطلاعات مرتبط به کپی رایت
- راه های ارتباطی
- نقشه سایت (sitemap)
- لینک های رجوع به بالای سایت
- صفحه های مرتبط
مثال زیر نحوه استفاده از تگ footer را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
تگ nav در HTML
تگ nav لیستی از لینک های هدایت کننده (navigation bar) را تعریف می کند. لینک هایی که در این قسمت قرار می گیرند معمولا شامل بخش های اصلی یک سایت هستند که در تمام یا اکثر صفحات باید در دسترس کاربر باشند. مانند لینک صفحه نخست، درباره ما، تماس با ما، بخش های اصلی و... .
مثال : لیستی از لینک های هدایت کننده (ناوبری).
خروجی مثال بالا به شکل زیر است:
عنصر aside در HTML
عنصر aside محتوایی را بیرون و جدا از محتوای اصلی تعریف می کند. به عبارتی برای ایجاد یک قسمت مجزای مستقل ولی مرتبط با محتوای اصلی در سند HTML می توان از تگ aside استفاده کرد. واژه aside در لغت به معنی "جداگانه، بکنار و..." است. در واقع تگ aside شامل مواردی مرتبط با محتوای اصلی خود اما به صورت جداگانه است.
بنابراین محتوای داخل عنصر aside باید بصورت غیر مستقیم به محتوای اصلی مرتبط باشد. مثال زیر نحوه استفاده از تگ aside را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
عناصر figure و figcaption در HTML
تگ figure جهت تعریف محتوای دارای توضیح در سند HTML کاربرد دارد، منظور از محتوای دارای توضیح مواردی مانند تصاویر، نمودارها، کدها و... می توانند باشند که معمولا در کنار خود، متنی جهت توضیح یا برچسب دارند.
تگ figcaption یک توضیح برای عنصر figure در خود دارد. عنصر figcaption می تواند به عنوان اولین و یا آخرین فرزند یک عنصر figure قرار بگیرد.
عنصر img خود تصویر را تعریف می کند.
مثال زیر نحوه استفاده از تگ figure را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
تگ main
تگ main مشخص کننده اصلی ترین محتوا در سند HTML است. معمولا هر صفحه وب جدای از بخش هایی مانند سرصفحه، منو ها، پاصفحه و... . یک بخش اصلی دارد که هدف اصلی کاربر می باشد. به طور مثال کاربری که عنوان مرتبط با یک مقاله را در وب جستجو می کند، پس از رسیدن به سایت ممکن است زمان لازم برای بررسی کل جزئیات سایت را نداشته باشد، در اینجاست که می توان به فرض با ایجاد لینک هدایت به مطلب اصلی، ضمن رعایت اصول Semantic رابط کاربری بهتری طراحی کرد. دقت کنید که درهر صفحه وب تنها استفاده از یک تگ main مجاز است و اینکه تگ نمی تواند زیرمجموعه تگ هایی مانند article ،aside ،footer ،header و nav باشد.
تگ time
تگ time برای مشخص کردن تاریخ و زمان در سند HTML کاربرد دارد، با استفاده از این تگ می توان تاریخ و زمان قابل پردازش توسط ماشین را در کدهای HTML قرار داد.
تگ details و تگ summary
تگ details برای ایجاد توضیحات اضافه در سند HTML به کار می رود. با این تگ می توان برای مثال در یک مقاله توضیحات اضافی قرار داد که در حالت عادی مخفی است و با کلیک کاربر توضیحات در صفحه ظاهر می شود. تگ details با تگ دیگری به نام summary ترکیب می شود که خلاصه ای قابل رویت برای کاربر نمایش می دهد، کاربر با کلیک بر روی آن می تواند توضیحات اضافی را مشاهده کند.
