لمه ی semantics به معنای study of meaning یا «مطالعه ی معانی» است که از شاخه ی زبانشناسی وارد حوزه های دیگر شده است. با اینکه نسخه های قبل از HTML5 نیز عناصر معنایی داشتند (مانند تگ body یا html) اما تنها با معرفی نسخه ی 5 زبان HTML بود که مفهوم semantics در HTML در مرکز توجه قرار گرفت.
همانطور که می دانید تگ های HTML معنای خاصی دارند؛ مثلا تگ های <h1>, <h2>, <h3>, <h4>, <h5>, <h6> هر کدام بیانگر میزان اهمیت یک تیتر و نمایش دهنده ی ساختار HTML اند. لیست های ترتیبی و غیرترتیبی (<ol>, <ul>) نیز از همین دسته اند. با اینکه کاربر ممکن است به خاطر وجود CSS هر دو را به یک شکل ببیند اما موتورهای جست و جو هنوز هم این تگ ها را به همراه معنی شان می خوانند.
HTML5 تگ های معنایی جدیدی را معرفی کرد (مانند <figure>, <header>, <footer> <strong>, <em>, <mark>و…). همچنین از تگ های معرفی شده 4 تگ sectioning (به معنی قسمت ساز) معرفی شدند:<article>, <aside>, <nav> و <section> که تحول خاصی را در نحوه ی دسته بندی قسمت های سایت به وجود آوردند. پیش از این ها تمامی قسمت های سایت با عناصر div دسته بندی می شدند.
طرح کلی HTML5 معنا-محور
رتبه بندی موتورهای جست و جو به فاکتورهای متعددی بستگی دارد و الگوریتم گوگل نیز اخیرا توجه خود را روی «کیفیت محتوا» معطوف کرده است. بنابراین اگر بخواهیم در رتبه بندی گوگل موفق باشیم باید کدهای تمیز و خوانایی بنویسیم که ربات های گوگل توانایی خواندنشان را داشته باشند. اینجاست که نقش HTML معنا-محور را بهتر درک می کنیم.
در حالت عادی ربات های موتورهای جست و جو گر ساختار صفحه ی HTML شما را درک نمی کنند. فرض کنید این ربات ها انسان های نابینایی هستند که نه تصاویر را می بینند و نه استایل های وب سایت شما را، اما می توانند متون را بخوانند (اهمیت کلید واژه ها). این ربات ها درک نمی کنند که قسمت های مختلف سایت شما به هم ارتباط دارند یا خیر اما شما می توانید به دو روش به این ساختار در هم ریخته معنی بدهید:
مسئله ی rich snippet ها بحث جداگانه ای دارد که در این مقاله به آن نمی پردازیم اما باید بدانید که عامل مهمی در رتبه بندی سایت شما به حساب می آیند. برای اطلاعات بیشتر راجع به rich snippet ها می توانید به این صفحه از راهنمای وب مستران گوگل مراجعه کنید (برای بازدید از صفحه نیاز به ابزار دور زدن تحریم خواهید داشت).
عناصر معنا-محور HTML5 در نگاه اول ساده به نظر می رسند اما باید مراقب برخی از اشتباهات رایج در هنگام استفاده از آن ها باشید. نکته ی اول این است که تمامی تگ های معنا-محور فقط برای یک هدف طراحی نشده اند، بلکه سه نوع مختلف از تگ های معنا-محور وجود دارند:
عناصر قسمت ساز (sectioning) ساختار سند HTML شما را مشخص می کنند و این ساختار توسط ربات های موتورهای جست و جو خوانده می شود! همانطور که گفته شد این دسته از عناصر چهار عدد هستند:
این باور اشتباه وجود دارد که <main> یک تگ قسمت ساز است اما این طور نیست (البته یک تگ معنا-محور است). توجه داشته باشید که تگ <main> فقط و فقط یک بار در هر صفحه استفاده می شود.
نکته ی جالب در مورد تگ های قسمت ساز این است که می توانند به صورت مستقل از سند اصلی، heading ها (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) و header ها (<header>) و Footer های (<footer>) خودشان را داشته باشند. این تگ های غیر قسمت ساز تنها متعلق به تگ های قسمت ساز هستند و ساختار کلی صفحه را تغییر نمی دهند. شاید در وهله اول برایتان عجیب باشد اما کد HTML زیر یک کد صحیح و معتبر است:
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>...</head>
<body>
<h1>Title of the Entire Page</h1>
<h2>Subtitle of the Entire Page</h2>
<article>
<h1>Title of the Article Section</h1>
<h2>Subtitle of the Article Section</h2>
</article>
</body>
</html>
|
header ها و footer ها نیز به همین شکل عمل می کنند؛ مثلا تگ <article> می تواند یک <header> و <footer> جداگانه داشته باشد که از نظر معنایی فقط متعلق به همان <article> است اما در ساختار کلی صفحه هیچ تغییری ایجاد نمی کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>...</head>
<body>
<header>Header of the Entire Page</header>
<article>
مشخصات
|