- Konu sahibi
- #1
HTML’de header nedir?
HTML’de
<header>, bir sayfanın veya belirli bir içerik bölümünün giriş kısmını tanımlayan anlamsal etikettir. Genellikle logo, site adı, başlık, tanıtım metni, gezinme menüsü veya bölümün giriş bilgilerini içerir. <head> etiketiyle aynı şey değildir: <header> sayfada kullanıcıya görünen içerik içindir; <head> ise tarayıcıya ve arama sistemlerine yönelik belge bilgilerinin bulunduğu bölümdür.Header nasıl çalışır?
<header> tek başına özel bir görünüm oluşturmaz. Tarayıcı bu etiketi varsayılan olarak bir kutuya, renge veya menüye dönüştürmez. Etiketin asıl faydası, belgenin yapısını ve içeriğin rolünü açıkça belirtmesidir. Görsel düzen için CSS, bağlantılar için <nav>, ana içerik için <main> gibi uygun HTML öğeleri birlikte kullanılabilir.Belgenin en üstündeki site başlığı için bir
<header> kullanabileceğiniz gibi, bir makalenin veya kartın kendi giriş bölümü için de ayrı bir <header> kullanabilirsiniz. Ancak her başlık metnini bu etiketle sarmalamak gerekli değildir.Çalışan en küçük örnek
Aşağıdaki dosyayı
index.html adıyla kaydedip tarayıcıda açın:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Header örneği</title>
</head>
<body>
<header>
<h1>Örnek Web Sitesi</h1>
<nav aria-label="Ana menü">
<a href="/">Ana sayfa</a>
<a href="/iletisim">İletişim</a>
</nav>
</header>
<main>
<h2>Hoş geldiniz</h2>
<p>Sayfanın ana içeriği burada yer alır.</p>
</main>
</body>
</html>Örnekte beklenen görünüm sayfanın üstünde site adı ve iki bağlantı, altında ana içeriktir. Bağlantıların hedef sayfaları bu örnekte oluşturulmamıştır; gerçek sitede yollarını ayrıca sağlamalısınız.
<header> görünmüyorsa bu genellikle HTML etiketinin çalışmadığı anlamına gelmez; etiketin kendisi varsayılan bir arka plan veya çerçeve üretmez. Görsel bir üst alan istiyorsanız CSS eklemeniz gerekir.Uygularken şu sırayı izleyin:
- Sayfanın veya bölümün giriş içeriğini belirleyin; logo, başlık ve menü gibi parçaları seçin.
- Bu parçaları uygun kapsayıcının içine
<header>ile yerleştirin. - Site gezinmesini
<nav>, ana başlığı<h1>veya ilgili seviyedeki başlık etiketiyle işaretleyin. - Dosyayı tarayıcıda açıp bağlantıların ve başlık hiyerarşisinin beklediğiniz gibi olduğunu kontrol edin.
- Renk, boşluk veya sabit konum gibi görsel ihtiyaçlar varsa bunları CSS ile ayrıca tanımlayın.
Benzer etiketlerden farkı
Karar verirken en sık karıştırılan öğeler şunlardır:
| Öğe | Görevi | Kullanıcıya görünür mü? |
|---|---|---|
<header> | Sayfanın veya bir bölümün giriş içeriğini gruplar. | İçindeki içerik genellikle görünür. |
<head> | Başlık, karakter kodlaması ve stil dosyası gibi belge bilgilerini tanımlar. | Kendisi görünmez. |
<footer> | Sayfanın veya bölümün kapanış bilgilerini gruplar. | İçindeki içerik genellikle görünür. |
<nav> | Gezinme bağlantılarını belirtir. | İçindeki bağlantılar görünür. |
Örneğin bir makalenin yazarı, yayın bilgisi ve makale başlığı makalenin
<header> bölümünde bulunabilir; makalenin tamamını saran site üst alanı ise ayrıca <header> olabilir. Bir header öğesinin içine başka bir header veya footer koymayın. Header; başka bir header, footer veya address öğesinin alt öğesi de olmamalıdır. Makale header'ını site header'ının içine gömmek yerine article içinde ayrı kullanın.Sık yapılan hatalar
<head> yerine <header> kullanmak: Sayfanın başlığını, karakter kodlamasını veya CSS bağlantısını <head> içinde tutun. Kullanıcının gördüğü site başlığı ve menü ise <body> içindeki <header> bölümüne aittir.Header’ın otomatik tasarım yaptığını sanmak: Semantik etiket, kendiliğinden menü düzeni veya sabit üst çubuk oluşturmaz. Bu davranışlar HTML içeriği ve CSS ile ayrıca kurulmalıdır.
Başlık etiketi kullanmamak:
<header> bir başlık değildir. İçerik gerçekten bir bölüm başlığı taşıyorsa uygun <h1>–<h6> öğesini de ekleyin.Menüyü anlamsız bağlantı grubuyla yazmak: Birden fazla ana gezinme bağlantısını
<nav> içine almak, sayfanın yapısını daha anlaşılır kılar. Ancak sayfadaki her bağlantı grubunun <nav> olması gerekmez.Sık sorulan sorular
Her header ekran okuyucuda site üst alanı olarak tanınır mı?
Hayır. Body bağlamındaki genel header banner işaret noktası olabilir; article, section veya main gibi bağlamlarda bölümün giriş grubu olarak generic rol alır. Bu yüzden makale header'ına site geneli banner rolünü rastgele eklemeyin.Header ile HTTP header aynı şey midir?
Hayır. HTML’deki<header> belge içeriğinin anlamsal bir bölümüdür. HTTP header ise tarayıcı ile sunucu arasındaki istek ve yanıt bilgilerini taşır; HTML etiketi değildir.