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

پیش‌تر با <div> به‌عنوان یک ظرف عمومی برای گروه‌بندی بخش‌های صفحه آشنا شدیم. اما HTML مجموعه‌ای از عناصر «معنایی» (Semantic) هم دارد که علاوه بر گروه‌بندی، نقش هر بخش را هم به‌طور واضح مشخص می‌کنند.

<header>
    <h1>نام سایت</h1>
    <nav>منوی اصلی</nav>
</header>

<main>
    <article>
        <h2>عنوان مطلب</h2>
        <p>متن اصلی مطلب...</p>
    </article>

    <aside>
        محتوای جانبی یا مرتبط
    </aside>
</main>

<footer>
    اطلاعات پایانی صفحه
</footer>

نقش هر عنصر

• <header> — بخش ابتدایی صفحه یا یک بخش، معمولاً شامل لوگو و عنوان.
• <nav> — بخش حاوی لینک‌های منوی اصلی.
• <main> — محتوای اصلی و منحصربه‌فرد صفحه؛ فقط یک‌بار در هر سند مجاز است.
• <article> — محتوایی مستقل که به‌تنهایی هم معنا دارد، مثل یک پست وبلاگ.
• <section> — یک بخش موضوعی از محتوا، معمولاً با تیتر خودش.
• <aside> — محتوای جانبی و مرتبط، مثل نوار کناری.
• <footer> — بخش پایانی صفحه یا یک بخش، معمولاً شامل اطلاعات تماس یا کپی‌رایت.

یک قاعده‌ی ساده: اگر یک <section> نیاز به تیتر مستقل ندارد و فقط برای چیدمان ظاهری است، همان <div> ساده انتخاب بهتری است؛ عناصر معنایی باید واقعاً یک نقش مشخص در ساختار محتوا داشته باشند.