Header yapısı

Sitenin <header> bölümünü nav ve logo ile yapılandırırsın.

Header ve site kimliği

Bir sayfanın en üst kısmı genellikle <header> ile işaretlenir. Bu bölge site branding denilen kimlik kısmıdır: logo, site adı ve ana menü burada durur. Ziyaretçi sayfaya girince önce burayı görür.

İçinde sıkça bir <h1> (logo ya da site adı) ve bir <nav> (ana menü) bulunur. Bir sayfada birden çok <header> olabilir; her <article> ya da <section> kendine ait bir üst kısım tutabilir.

Menüyü nav içine dizmek

Bir <header> içine logo ve menüyü yan yana ya da alt alta koyabilirsin. Menüyü <nav> içine alıp bağlantıları bir liste hâlinde dizmek en sağlıklı yoldur.

Tipik bir magazin üst kısmı şöyledir: <header><h1>Peynir Dergisi</h1><nav><ul><li><a>...</a></li></ul></nav></header>. Böylece ekran okuyucu menüyü 'liste' diye okur ve ziyaretçi kaç bağlantı olduğunu duyar.

Uygulama Magazin üst kısmını kur

Body içine bir <header> ekle. Header içine bir <h1> yaz; metni Peynir Dergisi olsun. Header içine bir <nav> ekle; içinde bir <ul> ve en az iki <li> olsun. Her <li> içinde bir <a> bulunsun ve metni dolu olsun.

Örnek çözümü göster

<body>
  <header>
    <h1>Peynir Dergisi</h1>
    <nav>
      <ul>
        <li><a href="/yazilar">Yazılar</a></li>
        <li><a href="/arsiv">Arşiv</a></li>
      </ul>
    </nav>
  </header>
</body>

Header kullanımında dikkat

İki noktaya dikkat et. Birincisi, <header> yalnızca sayfanın en üstü için değildir; bir <article> da kendi üst kısmını tutabilir. İkincisi, menü için <nav> kullan ama sayfadaki her bağlantıyı <nav> içine alma; yalnızca asıl menüyü sarmalı.

Yani <header> bir 'kimlik' kabı, <nav> ise 'asıl menü' kabıdır. İç içe kullanıldıklarında sayfanın üst kısmı hem anlamlı hem erişilebilir olur.

Kendini test et

Bir sayfanın üst <header> bölümünde en çok ne beklersin?
- Yalnızca dip not yazısı
- Logo ve ana menü
- Yorum kutusu
- Tablo verisi
Cevabı göster

Logo ve ana menü — Doğru. header site kimliğini ve ana menüyü barındırır.

Üçüncü menü bağlantısını tamamla

<nav>
  <ul>
    <li><a href="/yazilar">Yazılar</a></li>
    <li><a href="/arsiv">Arşiv</a></li>
    <li><a href="/____">İletişim</a></li>
  </ul>
</nav>

Cevabı göster

<nav>
  <ul>
    <li><a href="/yazilar">Yazılar</a></li>
    <li><a href="/arsiv">Arşiv</a></li>
    <li><a href="/iletisim">İletişim</a></li>
  </ul>
</nav>

Header parçalarını eşleştir

header

Üst kısım
nav

Ana menü
h1

Logo / site adı
ul

Bağlantı listesi

Sıradaki ders: Ana içerik

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler