HTML'de header nasıl yapılır
Sayfanın üst kısmını (logo, site adı, ana menü) bir <header> elementiyle sar. Varsayılan görünümü olmayan bir blok kutudur, bu yüzden birkaç satır CSS onu bir çubuğa çevirir:
Logodaki margin-inline-end: auto, menüyü ve butonu çubuğun öbür ucuna iter. <style> elementini kaldır, yine bir header'ın olur: onu header yapan koyu arka plan değil, etikettir.
header, head ve h1 farkı
Birbirine benzeyen ve farklı işler yapan üç ad:
| Element | Nerede | Görünür | Kaç tane |
|---|---|---|---|
<head> | Doğrudan <html> içinde, <body> öncesinde | Hayır: <title>, <meta>, <link> tutar | Tam olarak bir |
<header> | <body> içinde | Evet: bir sayfanın ya da bölümün giriş içeriği | İstediğin kadar |
<h1> ile <h6> arası | <body> içinde herhangi bir yerde | Evet: bir başlık | İstediğin kadar |
Aşağıdaki <head>, bir tarayıcının sekmesinde gösterdiği sayfa başlığını belirler. Önizlemede görebildiğin her şey <body> elementinden gelir:
Bir header çoğunlukla bir başlık içerir, ama içermek zorunda değildir; bir başlığın da çevresinde bir header'a ihtiyacı yoktur.
Makalelerin içindeki header'lar
<header> yalnızca sayfayı değil, en yakın makalesini ya da bölümünü açar. Her yazının kendi header'ı olduğu bir blog yazısı listesi geçerli ve yaygındır:
Ekran okuyucular için yalnızca sayfa seviyesindeki header (article, aside, main, nav ya da section içinde olmayan) banner landmark'ı olur. Makale header'ları sıradan gruplardır, böylece birkaç banner ile karşılaşmazsın.
Sticky header
position: sticky, altındaki içerik kayarken header'ı üstte tutar. Aşağıdaki kutunun içinde kaydır:
Onu çalıştıran üç ayrıntı var: top: 0 (sticky bir uzaklık olmadan hiçbir şey yapmaz), bir arka plan rengi (yoksa satırlar arkasından görünür) ve konumlandırılmış içerik üstüne boyanmasın diye z-index. Gerçek bir sayfada kayan kutu sayfanın kendisidir, bu yüzden header doğrudan <body> içinde durur.
position: fixed olan bir header da yerinde kalır, ama sayfa akışından çıkar; bu yüzden içerik altına kayar ve üstte padding'e ihtiyaç duyar. Sticky yerleşimdeki yerini korur.
Bir header'a neler girebilir
Bir header neredeyse her içeriği barındırabilir: başlıklar, bir logo resmi, bir <nav>, bir arama formu, bir buton. Başka bir <header> ya da bir <footer> içeremez ve bir <footer>, bir <address> ya da başka bir <header> içinde duramaz.
<header>
<a href="/"><img src="logo.svg" alt="Acme home"></a>
<nav aria-label="Main">...</nav>
<form role="search">...</form>
</header>
Logo ana sayfaya giden bir link olduğunda, alt metni linkin nereye gittiğini söylemeli ("Acme home"), çünkü bir ekran okuyucunun duyurduğu budur.
Sık yapılan hatalar
<header>ile<head>karıştırmak. Meta veriler<head>içine girer; görünür içerik asla girmez.- Her başlık için
<header>kullanmak. Tek başına bir başlığın header ile sarılmasına gerek yoktur. Bir grup giriş içeriği olduğunda<header>kullan. - Arka planı olmayan bir sticky header. Sayfa metni görünür şekilde arkasından kayar. Bir
backgroundayarla. - Yapışmayan sticky.
overflow: hiddenya daoverflow: autoolan bir üst element sticky için kaydırma kutusu olur, bu yüzden header o kutunun içinde yapışır (ya da hiç yapışmaz). Üst elementleri kontrol et. - Site menüsünü header içindeki bir
<div>içine koymak. Ekran okuyucu kullananlar ona atlayabilsin diye<nav>kullan.
Sıkça Sorulan Sorular
HTML'de header etiketi nedir?
<header> giriş içeriği için semantik bir elementtir: sayfanın üstündeki site logosu ve menüsü ya da bir makalenin üstündeki başlık ve yazar satırı. Varsayılan stili olmayan normal bir blok kutudur.
HTML'de head ile header arasındaki fark nedir?
<head> belgenin <title>, <meta> etiketleri ve stil dosyası linklerini içeren görünmez kısmıdır ve tam olarak bir tane vardır. <header> ise <body> içindeki görünür içeriktir ve bir sayfada birkaç tane olabilir.
Bir sayfada birden fazla header elementi olabilir mi?
Evet. Bir sayfada genellikle bir site header'ı olur, her <article> ya da <section> da başlığı ve bilgileri için kendi <header> elementine sahip olabilir. Ekran okuyucular için yalnızca article, aside, main, nav ya da section içinde olmayan bir header sayfa banner'ı sayılır.
nav, header'ın içine mi girmeli?
Girebilir ve ana menü sayfanın üstünde durduğunda çoğunlukla girer. <nav> elementini <header> dışına koymak da geçerlidir; yerleşimine uyanı seç.
Kaydırırken bir header'ın üstte kalmasını nasıl sağlarım?
Ona içerik altından kaysın diye position: sticky; top: 0; ile birlikte bir arka plan rengi ve bir z-index ver. Sticky yalnızca header'ın üst elementi header'dan daha yüksekken çalışır; overflow: hidden olan bir üst element de onun sayfaya yapışmasını engeller.
