بررسی دقیق و کامل تگ های معنایی (Semantic Tags)

وقتی semantic tag​ ها رو درست استفاده کنی، ساختار صفحه هم برای مرورگر و هم برای screen reader​ ها قابل فهم تر میشه. نکته مهم اینه که این تگ ها فقط ظاهر نیستن، معنی میدن و کمک میکنن DOM​ تمیزتر و maintainable​ تر باشه. از همه مهمتر موتورهای جستجو واقعا ازشون برای فهمیدن ساختار صفحه کمک میگیرن این موضوع خودش یکی از اصول سئوی On page​ حساب میشه.

این یادداشت یه خلاصه از مستندات HTML​ه، بدون حاشیه، فقط چیزایی که واقعا تو پروژه ها به درد میخوره.

تگ header

تگ header​ برای معرفی یه بخش یا کل صفحه استفاده میشه و معمولا چیزایی مثل لوگو، عنوان اصلی، intro​ یا حتی یه nav​ کوچیک توش قرار میگیره. نکته مهم اینه که header​ فقط برای بالای صفحه نیست، هر section​ یا article​ هم میتونه header​ مخصوص خودش رو داشته باشه، ولی باید واقعا معنی بده و نقش معرفی کننده اون بخش رو بازی کنه. اشتباه رایج اینه که بعضیا چند تا header​ رو پشت هم میذارن بدون اینکه ساختار منطقی داشته باشه. header​ باید کمک کنه ساختار صفحه قابل فهم تر بشه.

<header>
  <h1>Site Title</h1>
</header>

تگ nav

تگ nav​ مخصوص لینک هایی هست که نقش navigation​ واقعی دارن، یعنی کاربر رو بین بخش های اصلی سایت جابه جا میکنن. هر لیست لینک nav​ نیست و این اشتباه خیلی تکرار میشه. مثلا لینک های داخل footer​ که فقط اطلاعات تکمیلی هستن، nav​ محسوب نمیشن. nav میتونه تو header​ و sidebar​ یا footer​ قرار بگیره، ولی باید واقعا مسیر دهی کنه. استفاده زیاد از nav​ باعث گیجی screen reader​ ها میشه، پس بهتره فقط یه nav​ اصلی داشته باشی و بقیه لینک ها رو semantic​ نکنی.

<nav>
  <ul><li><a href="/">Home</a></li></ul>
</nav>

تگ main

تگ main​ قلب صفحه است و فقط باید یک بار تو کل صفحه استفاده بشه. این تگ نشون میده محتوای اصلی صفحه دقیقا کجاست و screen reader​ ها خیلی بهش وابسته هستن. main​ نباید داخل header​ و footer​ یا article​ قرار بگیره و نباید چند تا main​ داشته باشی. اشتباه رایج اینه که بعضیا main​ رو داخل چند تا div​ میذارن یا چند تا main​ برای بخش های مختلف میسازن. main​ باید مستقیم و واضح باشه و فقط محتوای اصلی رو در خودش نگه داره.

<main>
  <article>...</article>
</main>

تگ section

تگ section​ برای گروه بندی منطقی محتواست، نه برای استایل دهی. هر section​ باید یه heading​ داشته باشه تا معنی بده، وگرنه div​ انتخاب بهتریه. section​ زمانی استفاده میشه که یه بخش از محتوا موضوع مشخص و قابل عنوان گذاری داشته باشه. مثلا یه صفحه خدمات که چند بخش مختلف داره، هر بخش میتونه یه section​ باشه. اشتباه رایج اینه که section​ رو مثل div​ استفاده میکنن و بدون heading​ میذارن، که باعث میشه ساختار معنایی صفحه خراب بشه.

<section>
  <h2>Features</h2>
</section>

تگ article

تگ article​ برای محتوای مستقل و قابل انتشار استفاده میشه، یعنی چیزی که حتی خارج از صفحه هم معنی خودش رو حفظ میکنه. این همون مفهوم standalone هست.

وقتی میگیم article باید standalone​ باشه یعنی این تگ باید یه تیکه محتوا باشه که خودش به تنهایی کامل و قابل فهمه. یعنی اگه همین article​ رو از وسط صفحه بکنی و ببری یه جای دیگه، مثلا:

• بذاریش تو یه اپلیکیشن موبایل
• بذاریش تو RSS​
• ایمیلش کنی
• چاپش کنی
• تو یه صفحه دیگه نمایش بدی

باز هم مفهومش کامل باقی میمونه و نیاز نداره به چیزای اطرافش تکیه کنه.

مثل پست وبلاگ، کامنت، کارت محصول یا خبر. اشتباه رایج اینه که article​ رو برای هر تکه محتوا استفاده میکنن، در حالی که article​ باید یه واحد مستقل باشه، نه یه ظرف معمولی.

<article>
  <h2>Post Title</h2>
  <p>Post Sub Title</p>
</article>

تگ aside

تگ aside​ برای محتوای جانبیه، یعنی چیزایی که مکمل محتوا هستن ولی جزو جریان اصلی نیستن. مثل تبلیغات، related posts​، نکات فرعی یا sidebar​. تگ aside​ میتونه داخل article​ هم قرار بگیره، مثلا برای یه نکته جانبی مرتبط با همون مقاله. نکته مهم اینه که aside​ نباید برای چیزای مهم استفاده بشه، چون screen reader​ ها معمولا اولویت کمتری بهش میدن.

<aside>Related links</aside>

تگ footer

تگ footer​ پایین صفحه یا پایین هر بخش قرار میگیره و معمولا شامل اطلاعات تکمیلی، لینک های کم اهمیت، copyright​، نویسنده یا metadata​ هست. مثل header​، هر section​ یا article​ هم میتونه تگ footer​ مخصوص خودش رو داشته باشه. اشتباه رایج اینه که footer​ رو فقط برای کل صفحه استفاده میکنن، در حالی که footer​ داخلی برای بخش ها خیلی کاربردیه و ساختار رو تمیزتر میکنه.

<footer>All rights reserved</footer>

تگ های figure و figcaption

تگ figure​ برای محتوای self contained​ استفاده میشه، یعنی چیزی که خودش یه واحد مستقل محسوب میشه، مثل عکس، نمودار، snippet​ یا حتی یه جدول. figcaption​ هم توضیح یا caption​ همون محتواست. نکته مهم اینه که figure​ فقط برای عکس نیست و هر چیزی که نیاز به caption​ داشته باشه میتونه داخل figure​ قرار بگیره. اشتباه رایج اینه که caption​ رو بیرون figure​ میذارن یا figure​ رو فقط برای استایل استفاده میکنن.

<figure>
  <img src="https://www.odooist.ir/web/image/1641-f4a0e247/s_closer_look.svg" alt="">
  <figcaption>Description</figcaption>
</figure>

تگ time

تگ time​ برای نمایش تاریخ یا زمانیه که ماشین ها هم بتونن بفهمنش. مقدار datetime​ خیلی مهمه چون موتورهای جستجو و ابزارهای دسترسی ازش استفاده میکنن. مثلا تاریخ انتشار مقاله، زمان رویداد یا ساعت. اشتباه رایج اینه که time​ رو فقط برای ظاهر استفاده میکنن و مقدار datetime​ رو خالی میذارن، که عملا semantic​ بودنش رو از بین میبره.

<time datetime="2024-05-12">12 May 2024</time>

تگ mark

تگ mark​ برای هایلایت کردن بخشی از متن استفاده میشه که از نظر معنایی مهمه، نه از نظر ظاهری. مثلا وقتی میخوای نشون بدی یه کلمه تو یه context​ خاص اهمیت داره. اشتباه رایج اینه که mark​ رو برای زرد کردن متن استفاده میکنن، در حالی که این تگ معناییه و باید دلیل معنایی داشته باشه.

<p>This is <mark>important</mark>.</p>

تگ address

تگ address​ برای اطلاعات نویسنده یا صاحب محتواست. مثلا اطلاعات نویسنده مقاله، اطلاعات تماس شرکت یا attribution​. اشتباه رایج اینه که address​ رو برای آدرس فیزیکی صفحه استفاده میکنن، در حالی که این تگ برای معرفی نویسنده یا مالک محتواست.

<address>Written by Odooist</address>

تگ های details و summary

این دو تا برای محتوای قابل باز و بسته شدن هستن. summary​ عنوان کوتاهیه که کاربر روش کلیک میکنه و details​ محتوای کامل رو نشون میده. این تگ ها رفتار پیش فرض دارن و نیازی به جاوا اسکریپت برای باز و بسته شدن ندارن. نکته مهم اینه که summary​ باید کوتاه، واضح و توصیفی باشه. اشتباه رایج اینه که چیزای مهم رو توی تگ details​ مخفی مخفی می کنن.

<details>
  <summary>More info</summary>
  <p>Extra details...</p>
</details>

تگ dialog

تگ dialog​ یه modal native​ه که مرورگر خودش مدیریت میکنه. میشه با open​ یا close​ کنترلش کرد. این تگ برای چیزایی مثل فرم های کوچک، پیام های تایید یا popup​ های ساده خیلی کاربردیه. اشتباه رایج اینه که dialog​ رو بدون کنترل درست استفاده میکنن و باعث میشه صفحه از نظر دسترسی پذیری مشکل پیدا کنه.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

تگ abbr

تگ abbr​ برای مخفف هاست و title​ باید معنی کامل رو بده. این تگ کمک میکنه موتور های جستجو و screen reader​ ها بفهمن مخفف چی بوده. اشتباه رایج اینه که title​ رو خالی میذارن یا abbr​ رو برای چیزایی که مخفف نیستن استفاده میکنن.

<abbr title="Application Programming Interface">API</abbr>

تگ q

تگ q​ برای نقل قول کوتاه inline​ استفاده میشه و مرورگر خودش quote​ اضافه میکنه. این تگ برای جمله های کوتاه داخل متن مناسبه. اشتباه رایج استفاده از q​ برای نقل قول های بلنده.

<p>He said <q>keep it simple</q>.</p>

تگ blockquote

تگ blockquote​ برای نقل قول های بلند استفاده میشه و بهتره داخلش cite​ هم بذاری تا منبع مشخص باشه. این تگ ساختار نقل قول رو برای موتورهای جستجو و screen reader​ ها واضح میکنه. اشتباه رایج استفاده از blockquote​ برای استایل دادنه.

<blockquote>
  <p>Long quote...</p>
  <cite>Author</cite>
</blockquote>

تگ cite

تگ cite​ برای ارجاع به یه اثره، مثل کتاب، فیلم، مقاله یا اثر هنری. اشتباه رایج اینه که cite​ رو برای اسم نویسنده استفاده میکنن، در حالی که cite​ برای اثره، نه شخص.

<cite>Clean Code</cite>

تگ های code، pre، samp، kbd

این چهار تا تگ برای محتوای فنی هستن و هر کدوم معنی خودش رو داره. تگ code​ برای کد inline​، تگ pre​ برای متن از پیش قالب بندی شده preformatted​، تگ samp​ برای خروجی برنامه و تگ kbd​ برای ورودی کاربر مثل کلیدهای کیبورد. اشتباه رایج اینه که همه رو با pre​ یا code​ جایگزین میکنن و ساختار معنایی رو از بین میبرن.

<pre>
		​​ورودی کاربر:
		​​<kbd>Ctrl</kbd> + <kbd>S</kbd>

	​	​کد برنامه:
	​	​<code>console.log("hello")</code>

	​	​خروجی برنامه:
	​	​<samp>hello</samp>
</pre>

    ورودی کاربر:
    Ctrl + S
    
    کد برنامه:
    console.log("hello")
    
    خروجی برنامه:
    hello

خلاصه استفاده درست از semantic tag​ ها فقط برای تمیزی کد و اینکه screen reader​ بفهمند نیست، موتورهای جستجو واقعا ازشون برای فهمیدن ساختار صفحه کمک میگیرن. وقتی تگ ها معنی دار باشن، گوگل راحت تر تشخیص میده کدوم بخش محتوا اصلیه، کدوم فرعیه، کدوم مقاله است، کدوم ناوبریه و کدوم اطلاعات جانبیه. همین موضوع باعث میشه صفحه بهتر ایندکس بشه، رتبه دقیق تری بگیره و تجربه کاربری هم برای ابزارهای دسترسی خیلی استانداردتر بشه. خلاصه اینکه semantic tag​ ها یه جور زبان مشترک بین تو و موتورهای جستجو هستن.