راهنمای استفاده از تگ‌های معنایی در HTML5
راهنمای استفاده از تگ‌های معنایی در HTML5 » در این مقاله، تگ های معنایی یا semantic tags را معرفی کرده و نحوه طراحی قالب سایت را با این تگ ها آموزش می دهیم.

راهنمای استفاده از تگ‌های معنایی در HTML5

Semantic tags in HTML5 guide

راهنمای استفاده از عناصر معنایی در HTML5

 

نحوه تعریف تگ‌های معنایی یا Semantic در HTML5:

 

تگ‌های غیرمعنایی (Non-Semantic Tags):

اغلب تگ های HTML به منظور جای دادن محتوا در خود تعریف می شوند و به مرورگر می گویند محتوای صفحات وب را چطور نمایش دهند. این تگ ها، نوع محتوای داخل خود را مشخص نمی کنند و نمی گویند هر محتوا چه نقشی (Role) در صفحات وب سایت دارد.

 

تگ‌های غیر معنایی div و span:

تگ های کلاسیک div و span غیر معنایی (non-semantic) می باشند و هیچ گونه اطلاعاتی راجع به نوع محتوای درون خود و نقش آن محتوا در صفحه وب را ارائه نمی دهند.

تگ‌های غیر معنایی div و span

 

تگ‌های معنایی (Semantic Tags):

در اچ‌تی‌ام‌ال ۵ معنایی (Semantic HTML5) تگ هایی وجود دارد که برای مرورگر مشخص می کند که هر محتوایی که در این تگ ها وجود دارد از چه نوعی هستند و چه نقشی در صفحه وب سایت دارد. تگ های معنایی html5 (Semantic Tags) صراحتا برای بات ها و خزنده های گوگل و بینگ مشخص می کند که کدام محتوای واقع در صفحه از اهمیت بیشتری برخوردار است، کدامیک برای navigation می باشد، کدامیک جانبی هستند و غیره…

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

 

تگ‌های معنایی Header, Footer, Nav, Article:

تگ‌های معنایی Header, Footer, Nav, Article

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

 

لزوم استفاده از تگ های معنایی HTML5:

برای کاربرانی که از نعمت بینایی بهره مند می باشند، تشخیص بخش های مختلف یک وب سایت (مانند منو، هدر، محتوای اصلی و فوتر) ساده می باشد و قادرند در یک نگاه تمام المان ها را تشخیص دهند اما فرض کنید کاربری نابینا وارد یک وب سایت شود.

تعریف تگ‌های معنایی برای بات گوگل:

خزنده های موتور جستجوی گوگل و بینگ اگر نابینا نباشند حتما دچار ضعف در بینایی می باشند!

بنابراین بات های موتورهای جستجو به کمک شما نیازمند می باشند. اگر شما بعنوان مدیر وب سایت (و یا طراح وب سایت) برای GoogleBot مشخص کنید که کدام یک از المان ها هدر می باشد، کدام فوتر و بهمین ترتیب سایر المان های یک صفحه وب، این موتورهای جستجو از شما سپاسگزار خواهند بود!

از همه مهم تر اینست که به بات گوگل درجه اهمیت و اولویت محتوای بخش های مختلف یک صفحه وب را اعلام کنید.

استفاده از تگ های معنایی یا semantic tags

استفاده از تگ های معنایی یا semantic tags بخودی خود باعث بهینه شدن یک وب سایت نخواهد شد. همانطور که می دانید سئو بودن محتوای یک وب سایت به عوامل بسیار بسیار زیاد و کوچک و بزرگی بستگی دارد. استفاده از تگ های semantic در کدهای HTML صفحات یک وب سایت یکی از همین عوامل می باشد که بطور غیرمستقیم روی سئوی سایت تاثیرگذار خواهد بود. زیرا استفاده از این تگ ها باعث فهم سریع تر موتورهای جستجو نسبت به نوع المان ها و اهمیت هریک از آنها می شود.

» مقاله "5 هدر زیبا برای فریم ورک بوت استرپ" و "5 فوتر زیبا برای فریم ورک بوت استرپ" را مطالعه نمائید. برای پیاده سازی این هدرها و فوترها از تگ های معنایی استفاده شده است.

تگ های معنایی زیادی در html5 وجود دارد که می توان از بین آنها <section> و <nav> و <footer> را نام برد اما المان های دیگری مانند <blockquote> و <em> نیز قابل تعریف و استفاده هستند. اما ما در این مقاله قصد داریم تگ های معنایی را معرفی کنیم که در چیدمان بخش های اصلی یک صفحه وب سایت بکار می روند.

بعنوان مثال، تگ های زیر می توانند بجای تگ <div> تعریف شوند تا نقش و نوع محتوای درون هر یک از آنها مشخص باشد:

تگ های معنایی در HTML5

همانطور که قابل پیش بینی است، موتورهای جستجو مانند گوگل و بینگ عاشق اینگونه تگ ها هستند!

در این مقاله می خواهیم تگ های معنایی تصویر فوق را آموزش دهیم (header, nav, main, article, section, aside, footer)

معمولا براحتی می توان تگ های div فعلی قالب سایت را با تگ های معنایی فوق جایگزین کرد. فقط کافیست find و replace کنید!

 

 

نمونه هایی از پیاده سازی تگ های معنایی در HTML5

 

یک قالب بسیار ساده که با تگ های معنایی HTML5 طراحی شده است:

در این مثال، بطور بسیار ساده، نقش و نوع هریک از بخش ها را توسط ۴ تگ header, nav, main, footer مشخص کردیم:

قالب بسیار ساده که با تگ های معنایی HTML5 طراحی شده است

در تصویر فوق، المان های مهم و اساسی یک صفحه وب را با تگ های معنایی html5 تعریف کرده ایم. دقت داشته باشید که یک طراحی ساده اما ۱۰۰% صحیح بهتر است از یک طراحی پیچیده و اشتباه!

پیاده سازی قالب سایت پیچیده بطور ناصحیح و غیر دقیق، می تواند سیگنال های اشتباهی را به سمت موتورهای جستجو ارسال کند.

یک پیاده سازی ساده و صحیح (simple & correct) یک قدم بزرگی در مسیر تعامل بهتر با گوگل می باشد.

 

نمونه های پیچیده تر از تگ های معنایی

 

استفاده از تگ های section و article:

در این مثال، بخش اصلی صفحه (یعنی main) را به چند بخش سلسله مراتبی تقسیم کرده ایم. بخش اصلی و محتوایی صفحه را در تگ article تعریف کرده ایم و در این تگ، زیر مجموعه ها را با section مشخص می کنیم. بصورت تصویر زیر:

استفاده از تگ های section و article

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

 

پیاده سازی سایدبار توسط تگ معنایی aside:

پیاده سازی سایدبار توسط تگ معنایی aside

در مثال بالا، ما دو بخش مطالب مرتبط را توسط تگ <aside> پیاده سازی کرده ایم. با تعریف تگ aside به موتورهای جستجو و مرورگر می گوییم محتوای این بخش اختیاری است و از درجه اهمیت پایین تری نسبت به بخش های section برخوردار می باشد.

 

پیاده سازی سایدبار غیرمستقیم:

پیاده سازی سایدبار غیرمستقیم

نکته: سایدباری که توسط تگ aside طراحی شده است لزوما نباید بلافاصله در کنار محتوای اصلی تعریف شود. بلکه همانطور که در تصویر بالا می بینید، تگ aside که با رنگ مشکی مشخص شده است در کنار سایدبار اصلی تعریف شده است.

 

نسخه نهایی قالب نمونه:

نسخه نهایی پیاده سازی تگ های معنایی SEMANTIC

 

نکاتی در زمینه تگ های معنایی HTML5

 

مقایسه تگ Section و Article:

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

تجربه نشان داده است که تعریف تگ های section بصورت تو در تو (nested) درون تگ article (مانند تصویر زیر) می تواند هم برای موتورهای جستجو و هم برای کاربران جذاب باشد.

مقایسه تگ Section و Article

المان های تو در تو (Nested Elements):

تگ های معنایی HTML5 می توانند بصورت تو در تو مورد استفاده قرار بگیرند. بعنوان مثال، درون تگ ARTICLE می توانید از تگ های FOOTER و HEADER و NAV استفاده کنید.

نکته: دقت داشته باشید که نباید طراحی و چیدمان قالب سایت خود را بصورت زیر انجام دهید:

نحوه تعریف تگ های معنایی بصورت اشتباه

استفاده از تگ های معنایی بصورت تصویر فوق آن چیزی نیست که html معنایی برای آن بوجود آمده است!!!

در تصویر زیر، از تگ های معنایی html5 استفاده شده است. تصویر سمت چپ از دید کاربر این وب سایت است و تصویر سمت راست از زاویه دید بات و خزنده گوگل می باشد:

قالب سایت از دید بات گوگل

 

منبع: https://www.semrush.com/blog/semantic-html5-guide/


برچسب‌ها:

html معناییآموزش تگ های معناییاچ تی ام ال معناییتگ articleتگ asideتگ sectionتگ معناییتگ های semanticعناصر

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

13 + 17 =