HTML'de Başlık Etiketleri

Bir web sitesinde ana başlığımızı en büyük yazı boyutu veren etiket ile yazarız ve ara başlıkları da büyüklük sırası ile ona uygun büyüklükteki etiket ile yazılır.

Html başlık etiketleri <h1> den başlayıp <h6> ya kadar sıra ile devam eder.

<h1> etiketi yazı boyutu en yüksek büyüklüğe sahiptir, sırası ile küçülerek devam eder, <h6> en küçük yazı boyutuna sahiptir.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h1>H1 Başlık</h1>
  <h2>H2 Başlık</h2>
  <h3>H3 Başlık</h3>
  <h4>H4 Başlık</h4>
  <h5>H5 Başlık</h5>
  <h6>H6 Başlık</h6>
</body>
</html>

NOT: Neden HTML başlık etiketlerini kullanıyoruz? diye bir soru aklınıza gelebilir. Şöyle ki web sitemizde ki başlıklar sadece h etiketleri ile değil <span> , <p> gibi etiketleri css ile boyut, font, kalınlık gibi şeyleri düzenleyerek başlık haline getirebiliriz ama bu doğru değildir. Çünkü arama motorları ve taryıcılardan gelen bot ziyaretçiler sitemizin google arama sonuçlarında çıkması için <h> etiketlerini okur ve ona göre yorumlar. Yani sadece başlıklarımızı boyutu için değil tarayıcıların ve arama motorlarının da anlaması bizim için önemli. 

Burada aklınıza şu soru gelebilir ”Tarayıcıların ve arama motorlarının bizim sitedeki başlıkları okuyup anlamasının önemi nedir?”.
Arama motorlarında bir kelime veya cümle arattığınızda yazı içindeki başlıklardaki kelimeler ve yazı içindeki kelimeleri tarayarak sizin önünüze uygun web sitelerini çıkarıyor. Yani web siteleri için önemli bir durum. Her site en üst sıralarda çıkmak ister. Bunun için sitelerde başlık için etiketler kullanılır.

Sizlere daha iyi anlayabilmeniz için doğru ve yanlış kullanımı gsötermek istiyorum.

Yanlış:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <span>Emin Yılmaz Kimdir?</span>
  <p>Buraya paragraf gelir...</p>
</body>
</html>

yukarıdaki örnek başlığın yanlış kullanımıdır, çünkü sitemizi ziyaret eden tarayıcı ve arama motorunun gönderdiği bot ziyaretçiler bu sayfanın "Emin Yılmaz Kimdir?" sorusuna cevap verdiğini anlamaz ve organik arama sonuçlarında arka sıralara doğru düşersiniz.

Doğru:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h1>Emin Yılmaz Kimdir?</h1>
  <p>Buraya paragraf gelir...</p>
</body>
</html>

yukarıdaki örnek başlığın doğru kullanımıdır, çünkü sitemizi ziyaret eden tarayıcı ve arama motorunu gönderdiği bot ziyaretçiler bu sayfanın "Emin Yılmaz Kimdir?" sorusuna cevap verdiğini anlamıştır ve organik arama sonuçlarında bu sayfayı üst sıraları doğru taşıyacak ve kullanıcılarına alakalı sonuçlar çıkaracaktır.

Sorular (0)