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