HTML’de başlık etiketleri, bir web sayfasının içeriğini hiyerarşik bir şekilde düzenlemek ve anlamlı bir yapı kazandırmak için kullanılır. Bu etiketler, H1'den H6'ya kadar sıralanır ve her biri farklı bir önem düzeyini ifade eder. En üst seviye başlık H1 iken, en alt düzey başlık H6'dır. Bu yazıda, başlık etiketlerinin ne işe yaradığı, nasıl kullanıldığı ve doğru kullanım kuralları ele alınacaktır.
Başlık Etiketleri Nedir?
Başlık etiketleri, bir belgenin veya sayfanın farklı bölümlerini tanımlamak için kullanılan HTML öğeleridir.
- H1: Sayfanın ana başlığıdır ve yalnızca bir kez kullanılır.
- H2: Ana başlığın altındaki bölümleri ifade eder.
- H3-H6: Daha alt seviyedeki alt başlıkları belirtir.
Bu etiketler, bir belgenin genel yapısını ifade etmek için kullanılır. Örneğin, bir Wikipedia makalesinde ana başlık H1 ile ifade edilirken, alt başlıklar (örneğin, “Terminoloji”, “Genel Biyoloji ve Habitat”) H2 ile işaretlenir. Daha alt detaylar (örneğin, “Davranış”) H3 olarak tanımlanabilir.
Başlık Etiketlerinin Doğru Kullanımı
Başlık etiketlerini kullanırken şu temel kurallara dikkat edilmelidir:
Her sayfada yalnızca bir H1 kullanılmalıdır.
- H1, sayfanın en üst düzey ana başlığını temsil eder ve tekrarlanmamalıdır.
Alt başlıklar hiyerarşik bir sırayla kullanılmalıdır.
- Örneğin, bir H3 etiketi kullanmadan önce mutlaka bir H2 etiketi bulunmalıdır. Aynı şekilde, bir H6 etiketi kullanmadan önce H1′den H5′e kadar olan sıralama takip edilmelidir.
Başlıklar metin boyutu için kullanılmamalıdır.
- H1, H2 gibi etiketlerin varsayılan metin boyutları farklıdır (H1 genelde daha büyüktür), ancak bu boyutlar CSS ile özelleştirilebilir. Bu yüzden başlık etiketleri sadece hiyerarşi oluşturmak için kullanılmalıdır.
Örnek Kod ve Açıklama
Aşağıda, başlık etiketlerinin kullanımıyla ilgili bir örnek verilmiştir:
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Başlık Etiketleri Örneği</title>
</head>
<body>
<h1>Web Sayfasının Ana Başlığı</h1>
<h2>Alt Başlık: Kavramlar</h2>
<p>Bu bölümde kullanılan temel kavramlar ve açıklamaları bulunmaktadır.</p>
<h2>Alt Başlık: Doğa ve Yaşam Alanları</h2>
<h3>Alt Alt Başlık: Hayvanların Davranışları</h3>
<h4>Detay: Grup Halinde Yaşama</h4>
<p>Hayvanların grup halinde yaşama alışkanlıkları ve bunun doğaya
etkileri burada açıklanır.</p>
<h4>Detay: Yavruların Bakımı</h4>
<p>Yavruların korunması ve büyütülmesi süreçleri hakkında bilgiler yer alır.</p>
</body>
</html>
Bu örnek, bir sayfanın farklı seviyelerdeki başlıklarını hiyerarşik olarak düzenlemek için nasıl bir yapı izlenebileceğini göstermektedir. H1, sayfanın ana başlığını temsil ederken, H2 ve alt başlıklar sayfa içindeki bölümlere ayrılmıştır.
Başlık Etiketlerinin Önemi
Başlık etiketleri yalnızca görsel düzen için değil, aynı zamanda arama motoru optimizasyonu (SEO) için de önemlidir. Arama motorları, bir sayfanın ana içeriğini ve yapısını anlamak için başlık etiketlerini tarar. Ayrıca, bu etiketler kullanıcılar için de önemlidir; içeriği daha okunabilir ve kolayca gezinilebilir hale getirir.
Sonuç
HTML’de başlık etiketleri, bir sayfanın içerik yapısını oluşturmak için kritik bir araçtır. H1'den H6'ya kadar olan etiketler, bir belgenin ana başlığını ve alt başlıklarını belirlemek için hiyerarşik bir düzen sunar. Bu etiketlerin doğru kullanımı, hem kullanıcı deneyimini hem de SEO performansını artırır. Ancak, boyut farklarından ziyade anlam ve yapı için kullanılması gerektiği unutulmamalıdır.