Semantic HTML چیست؟ ساختار معنایی صفحات وب

Semantic HTML یعنی انتخاب عنصر بر اساس نقش واقعی آن بخش در صفحه، نه فقط ظاهری که می‌خواهید داشته باشد. وقتی از <nav> استفاده می‌کنید، دارید می‌گویید «این بخش، منوی پیمایش است» — نه فقط «این یک باکس با چند لینک است».

<div> و <span> عناصر عمومی‌اند و هیچ معنایی درباره محتوایشان نمی‌دهند. عناصر معنادار مثل <header> یا <article> دقیقاً نقش آن بخش را اعلام می‌کنند. هر دو می‌توانند دقیقاً یک ظاهر بصری تولید کنند؛ تفاوت فقط در لایه معنایی زیر آن ظاهر است.

<header> محتوای معرفی یا مقدماتی یک صفحه یا بخش است — معمولاً شامل لوگو یا عنوان. <nav> مجموعه‌ای از لینک‌های پیمایش اصلی است. <main> محتوای اصلی و منحصربه‌فرد صفحه را در بر می‌گیرد و هر صفحه باید دقیقاً یک <main> داشته باشد.

<header>
  <nav>
    <a href="/">خانه</a>
    <a href="/about/">درباره</a>
  </nav>
</header>
<main>
  <!-- محتوای اصلی صفحه -->
</main>

<section> یک بخش موضوعی مستقل از صفحه است که معمولاً عنوان خودش را دارد — مثل «نظرات کاربران» یا «ویژگی‌ها». <article> محتوایی است که به‌تنهایی هم معنا و کاربرد دارد و می‌توان آن را جدا از بقیه صفحه هم منتشر کرد، مثل یک پست وبلاگ یا یک کارت محصول.

سوال کلیدی برای انتخاب بین این دو: «اگر این بخش را از این صفحه بردارم و جای دیگری بگذارم، هنوز به‌تنهایی معنا دارد؟» اگر بله، <article> مناسب‌تر است. اگر این بخش فقط در بافت همین صفحه معنا دارد، <section> انتخاب بهتری است.

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

وقتی هیچ‌کدام از عناصر معنادار، نقش آن بخش را توصیف نمی‌کنند و شما فقط به یک ظرف برای چیدمان یا استایل نیاز دارید — مثل یک ستون داخل یک گرید — <div> انتخاب درستی است. Semantic HTML به این معنا نیست که هرگز از <div> استفاده نکنید؛ به این معناست که آن را پیش‌فرض همیشگی قرار ندهید.

صفحه‌خوان‌ها از عناصر معنادار برای ساختن یک نقشه پیمایشی از صفحه استفاده می‌کنند؛ کاربر می‌تواند مستقیماً به «main» یا «navigation» بپرد، بدون شنیدن کل صفحه خط‌به‌خط. موتورهای جست‌وجو هم از این ساختار برای فهم بهتر صفحه استفاده می‌کنند.

نکته مهم: Semantic HTML به‌تنهایی رتبه بهتر در گوگل را تضمین نمی‌کند. این فقط یکی از عوامل متعددی است که به موتور جست‌وجو کمک می‌کند محتوا را درست‌تر بفهمد، نه یک راه‌میان‌بر برای رتبه اول.

ترکیب همه عناصری که در این درس دیدیم، در یک صفحه وبلاگ ساده:

<header>
  <nav>...</nav>
</header>

<main>
  <article>
    <h1>عنوان پست وبلاگ</h1>
    <p>متن پست...</p>
  </article>

  <aside>
    <h2>پست‌های مرتبط</h2>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p>تماس با ما</p>
</footer>

توجه کنید که <article> برای خودِ پست وبلاگ استفاده شده (چون به‌تنهایی هم معنا دارد)، در حالی که <aside> برای محتوای جانبی مرتبط استفاده شده است.

استفاده از چند main در یک صفحه. هر صفحه باید فقط یک <main> داشته باشد.

استفاده از section فقط برای استایل‌دهی. اگر بخشی عنوان موضوعی مستقل ندارد، <div> معمولاً انتخاب درست‌تری است.

گیج‌شدن بین section و article. اگر محتوا به‌تنهایی هم معنا دارد، article؛ اگر فقط در بافت همان صفحه معنا دارد، section.

تصور اینکه Semantic HTML به‌تنهایی سئو را حل می‌کند. این فقط یکی از عوامل کمکی است، نه یک تضمین برای رتبه بهتر.