Belge ve site yapısı

Sayfayı anlamlı parçalara bölen elemanlar vardır: <header> giriş veya logo alanı, <nav> ana gezinme, <main> sayfanın ana içeriği (sayfada bir tane), <article> bağımsız yazı, <section> konu bölümü, <aside> yan bilgi, <footer> alt kısım.

<body>
  <header><h1>My Blog</h1></header>
  <nav><a href="/">Home</a> <a href="/posts">Posts</a></nav>
  <main>
    <article>
      <h2>First post</h2>
      <p>Text of the post…</p>
    </article>
    <aside>Related links</aside>
  </main>
  <footer>© Nibras Code</footer>
</body>

Ekran okuyucular bu bölümler arasında hızla geçiş yapar, arama motorları sayfanın yapısını daha iyi anlar, kod da okunur olur. Genel <div> ve <span> yalnızca anlamlı eleman bulunmadığında ve CSS için grup gerektiğinde kullanılır.

• Başlık hiyerarşisini section'lar içinde de koru.
• Menüleri <nav> içinde liste olarak yaz.
• Her <section>'ın bir başlığı olsun.

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Kod yazmadan önce kâğıtta sayfanın kutularını çiz: üst alan, gezinme, ana içerik, yan panel, alt kısım. Sonra her kutuya uygun anlamsal elemanı seç. Aynı plan site boyunca tekrarlanırsa ziyaretçi kendini rahat hisseder.