HTML Başlık Etiketleri: h1, h2, h3, h4, h5, h6
Web sayfalarında içerik oluştururken kullanılan HTML başlık etiketleri, içeriği hiyerarşik bir düzende organize etmek için kullanılır ve altı farklı seviyede bulunur. Bunlar h1, h2, h3, h4, h5 ve h6 etiketleridir.
HTML başlık etiketleri, web sayfalarında içerik hiyerarşisini oluşturmak için kullanılan temel yapı taşlarıdır. İşlevleri ve önem sıraları aşağıdaki gibidir:
- h1 Etiketi
- En önemli başlıktır ve genellikle sayfanın ana başlığı olarak kullanılır.
- Bir sayfada yalnızca bir kez kullanılmalıdır.
- Yazı boyutu açısından en büyüğüdür.
- h2 Etiketi
- Ana başlıktan sonra gelen alt başlıkları belirtir.
- Birden fazla kez kullanılabilir.
- Hiyerarşide h1’in bir kademe altındadır.
- h3 Etiketi
- h2’nin altındaki daha küçük alt başlıklar için uygundur.
- Daha az önemli başlıkları belirtmek için kullanılır.
- h4 Etiketi
- h3’ün altında yer alan daha spesifik veya detaylı başlıklar için tercih edilir.
- Yazı boyutu küçülmeye devam eder.
- h5 Etiketi
- Daha az kullanılan bir başlık seviyesidir.
- Detaylı içerik bölümlerinin alt başlıklarını tanımlar.
- h6 Etiketi
- En küçük yazı boyutuna ve en düşük öneme sahiptir.
- Hiyerarşideki en alt başlık seviyesi olarak kullanılır.
<!doctype html>
<html>
<head>
<title>Html Başlık Etiketleri</title>
<meta charset="utf-8" />
</head>
<body>
<h1> H1 Başlık Etiketi </h1>
<h2> H2 Başlık Etiketi </h2>
<h3> H3 Başlık Etiketi </h3>
<h4> H4 Başlık Etiketi </h4>
<h5> H5 Başlık Etiketi </h5>
<h6> H6 Başlık Etiketi </h6>
<p> Bu bir paragraf </p>
<p> Bu da bir paragraf </p>
</body>
</html>
Yukarıdaki örnekte HTML başlık etiketleri ve web sayfasındaki görünümleri gösterilmiştir. Boyutlarındaki değişimden de fark edileceği üzere bu etiketlerin önem sıralaması da h1’den h6’ya doğru azalarak gitmektedir.
H1 etiketi, bir web sayfasının en önemli başlığıdır ve bu nedenle ana başlık olarak kullanılması gerekir. Sayfanın konusunu veya ana fikrini ifade ettiği için, yalnızca bir kez kullanılması önerilir.
H1 etiketinin ardından gelen H2 başlıkları, içeriği daha küçük bölümlere ayırmak ve alt başlıklar oluşturmak için kullanılır. H2’nin altına, içeriğin önem derecesine göre sırasıyla H3, H4, H5 ve H6 başlık etiketleri eklenebilir. Bu düzen, içeriği hem görsel açıdan hem de hiyerarşi bakımından kullanıcılar için daha anlaşılır hale getirir.
Doğru bir başlık yapısı, yalnızca okuyucular için değil, aynı zamanda arama motorları için de sayfanın organizasyonunu anlamayı kolaylaştırır. Bu nedenle, başlıklar içeriğe uygun bir şekilde biçimlendirilmeli ve sayfa boyunca tutarlı bir hiyerarşi korunmalıdır. Bu durumu örnek üzerinden şu şekilde anlatabilirim:
- Migren (H1)
- Migren Belirtileri (H2)
- Migren Tedavisi (H2)
- İlaçla Tedavi (H3)
- İlaçla Tedavinin Yan Etkileri (H4)
- Botoksla Tedavi (H3)
- Botoksla Tedavinin Yan Etkileri (H4)
- İlaçla Tedavi (H3)
- Migren Çeşitleri (H2)
Yukarıdaki örnekte, başlık etiketleri içerik yapısını net bir şekilde organize ederek hem okuyucular hem de arama motorları için anlaşılır bir düzen sunar. “Migren” başlığı H1 etiketiyle sayfanın ana konusunu ifade ederken, “Migren Belirtileri”, “Migren Tedavisi” ve “Migren Çeşitleri” gibi H2 başlıkları ana başlığın alt kategorilerini oluşturur.
H2 başlıkları altında yer alan “İlaçla Tedavi” ve “Botoksla Tedavi” gibi H3 başlıkları, bu kategorilerin detaylarını belirtmek için kullanılmıştır. Daha spesifik konular, “İlaçla Tedavinin Yan Etkileri” ve “Botoksla Tedavinin Yan Etkileri” gibi H4 başlıklarıyla ifade edilmiştir.
Bu düzen, içerikte bir hiyerarşi oluşturarak okuyucunun bilgiye kolayca ulaşmasını sağlar. Aynı zamanda, arama motorları bu yapıyı daha iyi analiz ederek sayfanın içeriğini doğru bir şekilde anlamlandırabilir. Başlıkların bu şekilde yapılandırılması, hem kullanıcı deneyimini iyileştirir hem de SEO açısından avantaj sağlar. Çünkü tarayıcılar, web sayfalarınızın yapısını ve içeriğini dizine eklemek için bu başlıklardan yararlanırlar.
Başlıkları doğru bir sıralamada kullanmanın da önemli olduğunu belirtmek isterim. Yukarıdaki örneğimizi tutup da aşağıdaki gibi yapmayın:
- Migren (H2)
- Migren Belirtileri (H1)
- Migren Tedavisi (H3)
- İlaçla Tedavi (H2)
- İlaçla Tedavinin Yan Etkileri (H2)
- Botoksla Tedavi (H5)
- Botoksla Tedavinin Yan Etkileri (H2)
- İlaçla Tedavi (H2)
- Migren Çeşitleri (H6)
Örnek olarak, Arthur Conan Doyle tarafından yazılan The Adventures of Sherlock Holmes kitabının HTML sürümünün aşağıdaki kısmını oluşturalım.
<center>
<h1>The Adventures of Sherlock <br> Holmes</h1>
<h2>by Arthur Conan Doyle</h2>
<hr size="1" noshade>
</center>HTML5 ile birlikte <center> etiketi artık deprecate (kullanımı önerilmeyen) olarak kabul ediliyor. Bunun yerine CSS kullanılması tavsiye ediliyor. Aşağıdaki gibi bir çözüm yapabiliriz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Adventures of Sherlock Holmes</title>
<style>
.centered {
text-align: center;
}
hr {
border: none;
height: 1px;
background-color: black;
}
</style>
</head>
<body>
<div class="centered">
<h1>The Adventures of Sherlock <br> Holmes</h1>
<h2>by Arthur Conan Doyle</h2>
<hr>
</div>
</body>
</html>