سمنتیک html (Semantic HTML) یا وب معنایی؛ به تگهایی در زبان HTML میگویند که معنای خود را برای مرورگر و توسعه دهنده توصیف میکنند. این تگها میتوانند محتوای صفحه را برای موتورهای جستجو قابل فهمتر کرده تا بتوانند در هنگام عملیات خزش درک بهتری از صفحه وبسایت داشته باشند. به طور کلی ساختار وب معنایی توسط یک جنبش مشترک به نام w3c مدیریت میشود؛ این سازمان تمام فرمتهای رایج داده را روی شبکه گسترده جهانی (WAN) ترویج و گسترش میدهد. برخی از تگهای معنایی در html که مهمتر و رایجتر از سایر موارد هستند:
- <hrader>: اگر کدهای html را تفکیک کنیم، بالاییترین قسمت یک وبسایت تگ هدر قرار میگیرد.
- <article>: به محتوای مستقلی میگویند که میتواند معرف یک پست وبلاگ از صفحه دیگری باشد.
- <section>: میتواند محتواهای مختلف را گروه بندی کند که معمولا در آن عنوان هم دارد.
- <aside>: برای محتواهای مماس یا موازی استفاده میشود، جایگاه این تگ معمولا در نوارهای کناری یا ابزارکها است.
- <footer>: در این بخش معمولا محتوای پاورقی نوشته میشود که شامل: حق چاپ یا پیوندها هستند.
چرا HTML معنایی اهمیت دارد؟
اهمیت html معنایی یا وب معنایی در این است که نه تنها میتواند محتوای بصری را ساختار یافتهتر نمایش دهد، بلکه میتواند اطلاعات مهمی در مورد نقش هر یک از قسمتهای محتوا به مرورگرها و موتورهای جستجو ارائه کند. برخی از عوامل تاثیرگذار در html معنایی شامل موارد زیر هستند:
دسترسی پذیری یا Accessibility
این تگها برای کاربرانی که به کمک فناوریهای کمکی موضوع صفحه را درک میکنند، کمک بسیار زیادی میکند. به عنوان مثال کاربران یا متخصصان سئو که میخواهند محتوای یک صفحه را درک کنند، میتوانند با نگاه کردن به این تگها مفهوم هر بخش را درک کنند. برخی از مثالهای رایج:
- تگ <nav> سیگنالی مبنیبر ناوبری ارجاع میکند که کاربران میتوانند به واسطه آن پرش مستقیمی به منو داشته باشند.
- هدینگ یا سرفصلهای (<h1> تا <h6>) به کاربران کمک میکند تا وزن هر یک از موضوعات را بفهمند و به صورت منطقیتری محتوا را پیمایش کنند.
به طور کلی Semantic Html میتواند محتوای وبسایت شما را به کاربران، صرف نظر از اینکه هر فرد چه توانایی دارد؛ قابل استفاده سازد.
بهینه سازی موتورهای جستجو (SEO)
هنگامی که خزنده موتورهای جستجو میخواهند محتوای یک صفحه را کراول کنند، با استفاده از تگ های معنایی html میتوانند درک بهتری از صفحه داشته باشند. برای درک بهتر موضوع میتوانید به موارد زیر دقت کنید:
- به واسطه تگهای معنایی میتوانید به خزندههای موتورهای جستجو بفهمانید که بخشهایی مانند مقالات یا منوهای پیمایش در کدام قسمت صفحه هستند.
- اگر به درستی از تگهای معنایی در صفحه استفاده کنید، شانس احتمال حضور شما در ریچ اسنیپتها بیشتر میشود.
- استفاده از تگهای Semantic میتواند کدهای وبسایت را ساختارمندتر و کاربر پسندتر کند که احتمال افزایش رتبه بسیار بالا میرود.
Maintainability یا قابلیت نگهداری
اچ تی ام ال معنایی کمک میکند تا کدهای صفحه شما برای تمام توسعه دهندگان قابل درکتر شود، در نتیجه نگهداری آن راحتتر و کم هزینهتر میشود. به این دلیل که زبان تمام برنامه نویسان به واسطه این تگهای معنایی، نزدیکتر شده و وجه اشتراک بسیار زیادی پیدا میکنند. نتیجه آن هم چیزی جز قابل فهمتر بودن کد نیست.
تگ های کلیدی html معنایی
تگهای معنایی بسیار زیاد هستند؛ اما برخی از آنها به واسطه کاربردیتر بودن، بیشتر دیده میشودن. در نتیجه بین متخصصان سئو و برنامه نویسها رایجتر هستند. در ادامه برخی از تگهای کلیدی html معنایی برای شما آورده شده است تا با کاربرد آنها بیشتر آشنا شوید:
<header>: این تگ معنایی معمولا نشان دهنده این است که مواردی مانند: لوگو، پیمایش اصلی صفحه میتواند در آن قرار بگیرد. تگ هدر در بالاترین قسمت کدهای صفحه قرار میگیرد.
<nav>: این تگ نشان میدهد که بلوکی از پیوندهای ناوبری در یک گروه قرار دارند، این کد فقط برای منوهای ناوبری استفاده میشود.
<main>: هر محتوایی که در قسمت اصلی صفحه قرار دارد (جایی مابین header و footer)، قطعا در کد main است. از این کد در یک فایل html فقط میتوان یک بار استفاده کرد.
<article>: از این تگ برای محتواهای مستقل استفاده میشود، مواردی مانند پستهای وبلاگ یا مقالات خبری و برخی موارد دیگر میتوانند در این تگ قرار بگیرند.
<seoction>: این تگ میتواند محتواهای مشترک را در یک گروهبندی قرار دهد؛ اگر از این تگ استفاده میکنید، باید برای آن عنوانی توصیفی هم بگذارید تا قابل فهمتر شود.
<aside>: محتواهایی که در این تگ قرار میگیرند ربطی به صفحه جاری ندارند و از لحاظ ارتباطی با آن صفحه مماس یا موازی هستند، همچنین محل قرارگیری آن معمولا در نوارهای کناری یا قسمت تبلیغات است.
<footer>: هر محتوایی که در پاورقی صفحه بخواهد قرار بگیرد، باید داخل این تگ باشد. به عنوان مثال مواردی مانند لینکهای پیمایش سایت، اطلاعات حق چاپ، لینک شبکههای اجتماعی، آدرس و… در این بخش وجود دارند.
توضیح تگ <section>
عنصر سکشن میتواند یک بخش از یک صفحه را تعریف کند؛ باتوجه به مستندات HTML W3C: آن بخش میتواند گروهی از محتواها باشند که در یک بلوک سکشن قرار گرفتهاند. برخی از مواردی که میتوان از تگ سکشن استفاده کرد شامل موارد زیر هستند:
- فصل ها
- مقدمه
- اخبار
- اطلاعات تماس
محل قرار گیری کد های مرتبط
توضیح تگ <article>
با استفاده از عنصر آرتیکل میتوان محتوای مستقل و مجزایی در یک صفحه را مشخص کرد؛ هنگام استفاده از این تگ حتما به این موضوع توجه کنید که باید مقاله معرفی شده در این تگ به تنهایی معنا و مفهوم داشته باشد. در این صورت میتوان آن را به صورت مستقل و مجزا از صفحه مدنظر حساب کرد. برخی از نمونههایی که میتوانید از تگ article در صفحه استفاده کنید:
- پست های انجمن
- پست های وبلاگ
- کارت های محصول
- مقالات روزنامه