عناصر معنایی و سئو

می‌توانید هر صفحه‌ای را فقط با div و span بسازید و از نظر ظاهری به نتیجهٔ یکسانی برسید؛ CSS همه چیز را شکل می‌دهد. اما این صفحه از دید مرورگر، صفحه‌خوان و موتور جست‌وجو یک تودهٔ بی‌معناست. عنصرهای معنایی (Semantic Elements) این مشکل را حل می‌کنند: هر بخش صفحه را با عنصری علامت می‌زنید که نقش آن بخش را نام می‌برد. این درس پایانی دوره، همهٔ آموخته‌ها را در یک اسکلت کامل جمع می‌کند.

اسکلت صفحه با عنصرهای معنایی

پنج عنصر اصلی چیدمان را این‌گونه به یاد بسپارید: header سرصفحهٔ صفحه یا بخش، nav مجموعهٔ پیوندهای ناوبری، main محتوای اصلی و یکتای صفحه، aside محتوای کناری مرتبط و footer پاصفحه. یک اسکلت کامل این‌گونه نوشته می‌شود:

<body>
  <header>
    <h1>Technology Magazine</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/articles">Articles</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>The Future of Electric Cars</h2>
      <p>The car market has transformed over the past decade.</p>
    </article>
    <aside>
      <h2>Most Read</h2>
      <p>A list of this week's popular articles.</p>
    </aside>
  </main>

  <footer>
    <p><small>© 2026 Technology Magazine</small></p>
  </footer>
</body>

چند قاعدهٔ این اسکلت را در نظر داشته باشید. عنصر main در هر صفحه فقط یک بار می‌آید و همهٔ محتوای یکتای صفحه را در بر می‌گیرد؛ چیزی که در سرصفحه و پاصفحه تکرار می‌شود نباید داخل آن باشد. عنصرهای header و footer فقط مختص بالای صفحه نیستند و می‌توانند سرصفحهٔ یک مقاله یا پاصفحهٔ یک بخش باشند.

article یا section؟

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

<article>
  <h2>Beginner Running Guide</h2>
  <section>
    <h3>Gear</h3>
    <p>A good pair of shoes is enough.</p>
  </section>
  <section>
    <h3>First-Week Plan</h3>
    <p>On even days, walk and run for twenty minutes.</p>
  </section>
</article>

تست ساده: اگر بخش می‌تواند جدا از صفحه در فید خبری منتشر شود، article است؛ اگر فقط گروهی از محتوای همان صفحه است، section. و اگر هیچ معنایی ندارید و فقط برای استایل ظرف لازم دارید، همان div خنثی درست است؛ استفادهٔ بی‌دلیل از عنصرهای معنایی هم خطاست.

نکته‌های سئو در HTML

سئو (SEO) مجموعه کارهایی است که موتور جست‌وجو محتوای سایت شما را بهتر بفهمد و در نتایج بهتر نمایش دهد. بخش بزرگی از سئوی درون‌صفحه‌ای همان HTML تمیز و معنادار است. مهم‌ترین مواردی که در این دوره آموخته‌اید:

• عنوان یکتا — عنصر title در head باید برای هر صفحه یکتا و توصیفی باشد؛ مهم‌ترین سطر صفحه از دید موتور جست‌وجو.
• توضیح صفحه — تگ meta با نام description خلاصهٔ صفحه را می‌دهد و معمولاً همان متنی است که زیر نتیجهٔ جست‌وجو نمایش داده می‌شود.
• سلسله‌مراتب تیترها — یک h1 برای موضوع اصلی و بقیهٔ تیترها مرتب و بدون پرش.
• متن جایگزین تصویر — ویژگی alt توصیفی، هم دسترسی‌پذیری و هم شناخت تصویر را برای موتور جست‌وجو بهتر می‌کند.
• متن پیوند توصیفی — بنویسید «راهنمای کامل CSS» نه «اینجا کلیک کنید»؛ متن پیوند بخشی از امتیاز مقصد است.

<head>
  <meta charset="utf-8">
  <title>A Beginner's Guide to Starting to Run</title>
  <meta name="description" content="A four-week plan to start running, from choosing shoes to your first race.">
</head>

تمرین‌ها

<!-- Write your code here -->

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/courses">Courses</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Getting Started with HTML</h2>
      <p>We begin with elements and document structure.</p>
    </article>
    <article>
      <h2>Why CSS Is Fun</h2>
      <p>A few lines of code take the page out of its raw state.</p>
    </article>
    <aside>
      <h2>About Us</h2>
      <p>The DocNameh teaching team.</p>
    </aside>
  </main>

  <footer>
    <p><small>© 2026 DocNameh</small></p>
  </footer>
</body>

:::

خلاصه

• header و nav و main و aside و footer نقش بخش‌های صفحه را نام می‌برند و main در هر صفحه یک بار می‌آید.
• article محتوای مستقل است و section گروه موضوعی با تیتر؛ ظرف بی‌معنا همان div است.
• معنای درست برای سه مخاطب یک‌جا سودمند است: مرورگر، صفحه‌خوان و موتور جست‌وجو.
• title یکتا و meta description و سلسله‌مراتب تیترها و alt و متن پیوند توصیفی، پایهٔ سئوی درون‌صفحه‌ای هستند.

با این درس، دورهٔ HTML کامل می‌شود؛ در دورهٔ CSS یاد می‌گیرید به همین اسکلت، ظاهر و چیدمان بدهید.