نقشهٔ صفحه؛ header، nav، main و footer

ساختار باید معنی داشته باشد

HTML معنایی به کاربر، صفحه‌خوان و ابزارهای پردازش کمک می‌کند نقش هر بخش را بفهمند. header محتوای آغازین یک صفحه یا بخش، nav مجموعهٔ ناوبری اصلی، main محتوای اصلی و footer اطلاعات پایانی صفحه یا بخش است. معمولاً در هر صفحه یک main قابل‌مشاهده داریم.

<header>
  <p>آموزشگاه وب</p>
  <nav aria-label="منوی اصلی">
    <a href="index.html">خانه</a>
    <a href="about.html">دربارهٔ ما</a>
  </nav>
</header>
<main>
  <h1>کارگاه HTML</h1>
  <section>
    <h2>آنچه یاد می‌گیریم</h2>
    <p>ساختن صفحات معنادار.</p>
  </section>
</main>
<footer><p>راه تماس: hello@example.com</p></footer>

لازم نیست هر گروه لینک را nav بنامی. section یک بخش موضوعی است و معمولاً تیتر دارد. header و footer می‌توانند برای یک article هم به کار بروند؛ معنای آن‌ها به جایگاهشان وابسته است. این عناصر به‌خودی‌خود ظاهر آمادهٔ سایت ایجاد نمی‌کنند؛ چیدمان با CSS انجام می‌شود.

تمرین دستی: صفحهٔ فعلی‌ات را به سه ناحیهٔ آغازین، اصلی و پایانی تقسیم کن و از روی تیترها نقشهٔ محتوا را بخوان.