Çalıştırılabilir HTML Dokümanları: HTML başlıklar

Q: HTML'de kaç tane başlık etiketi var?

Altı tane: , , , , ve . en önemlisidir (sayfa başlığı), ise en az önemli olanı. yoktur; öyle bir etiket bilinmeyen bir satır içi element olarak ele alınır.

Q: HTML başlıklarının varsayılan boyutları nedir?

Varsayılan 16px metinle tarayıcılar h1 başlığını 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) ve h6 10.72px (0.67em) olarak, hepsini kalın gösterir.

Q: Bir sayfada birden fazla h1 olabilir mi?

HTML buna izin verir, ama sayfayı adlandıran tek bir , ekran okuyucu kullananlar ve arama motorları için en net yapıdır. Altındaki ana bölümler için kullan.

Q: Bir başlığın boyutunu nasıl değiştiririm?

CSS'te font-size ayarla, örneğin h2 { font-size: 20px; } ya da tek bir başlık için bir class. Bir başlık seviyesini asla varsayılan boyutu yüzünden seçme.

HTML Başlık Etiketleri: h1'den h6'ya Boyut, Sıra ve Stil

HTML'de sayfaya ana hatlarını veren altı başlık seviyesi vardır: <h1> ile <h6> arası. Varsayılan boyutları, başlıkların nasıl sıralanacağını, kaç tane h1 kullanılacağını, boyutlarının CSS ile nasıl değiştirileceğini ve ekran okuyucuların onları nasıl kullandığını öğren.

Bu sayfada çalıştırılabilir editörler var - düzenle, çalıştır ve sonucu anında gör.

Yazan Kevin Spektor, Co-founder & CTO

Sep 24, 2026 tarihinde yayınlandı

Altı HTML başlık etiketi

HTML'de altı başlık seviyesi vardır: <h1> ile <h6> arası. <h1> en üst seviyedir (sayfanın başlığı), <h6> en alt seviye. Tarayıcılar her seviyeyi bir öncekinden küçük, hepsini kalın ve her birini kendi satırında gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Etiket	Varsayılan boyut	16px metinle
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> ve <h6> varsayılan olarak normal metinden küçüktür, bu da insanları şaşırtır. Boyut yalnızca bir varsayılandır ve sonraki bölümler seviyenin neden asla boyuta göre seçilmemesi gerektiğini gösteriyor.

Başlıklar sayfanın ana hattıdır

Başlıklar süs değildir. Hepsi birlikte, bir kitabın içindekiler tablosu gibi, sayfanın ana hattını oluşturur. Ekran okuyucu kullananlar aradıklarını bulmak için başlıktan başlığa atlar, arama motorları da sayfadaki konuları anlamak için onları okur.

Kural basit: sayfa başlığı için bir <h1>, her ana bölüm için <h2>, bir <h2> içindeki alt bölümler için <h3> ve böyle devam eder, seviye atlamadan. Bu örnek başlıklardan, yardımcı teknolojilerin gördüğü şekilde bir içindekiler tablosu oluşturur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

İkinci <h3> etiketini <h5> yap, ana hatta bir boşluk görünür: başlıklarla gezinen biri h4 başlığının nereye gittiğini merak eder.

Bir başlığın boyutunu değiştirmek

Seviyeyi ana hattaki yerine göre seç, sonra görünümü CSS ile ayarla. Bir kenar çubuğu başlığının <h2> olması ama küçük görünmesi gerekebilir; bir hero başlığı çok büyük bir <h1> olabilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Tersi de geçerli: bir başlık etiketini sadece metni büyük ya da kalın yapmak için kullanma. Bir cümlenin içindeki kalın kelimeler için <strong>, başlık olmayan büyük metin için class'ı olan bir <p> kullan. Metin etiketleri için kalın yazı sayfasına bak.

Alt başlıklar ve sloganlar

Bir başlığın hemen altındaki alt başlık genellikle kendisi bir başlık değildir: yeni bir bölüm başlatmaz. Bir paragraf kullan ve istersen ikisini <hgroup> ile grupla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Ana hat temiz kalır (bir h1, sonra h2 bölümleri), slogan da görsel olarak başlıkla birlikte durur.

Bir başlığa link vermek

Bir başlığa bir id ver; href değerinde #id olan her link doğrudan ona atlar. İçindekiler tabloları ve "bölüm linkini kopyala" butonları böyle çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Sık yapılan hatalar

Seviyeyi boyutu için seçmek. Ana hattaki yerine göre seç, sonra CSS ile stil ver.
Seviye atlamak. <h2> başlığından doğrudan <h4> başlığına geçmek, ekran okuyucu kullananlar için gezinmeyi bozar.
Vurgu için başlık kullanmak. Bir paragrafın içindeki kalın bir satır <strong> olmalı, <h4> değil.
<h1> olmaması ya da tek <h1> olarak bir logo. <h1> sayfanın içeriğini, örneğin makale ya da ürün başlığını adlandırmalı.
Boş başlıklar. İçinde yalnızca bir ikon olan ya da hiçbir şey olmayan bir başlık boş olarak duyurulur. İçine gerçek metin koy.

Sıkça Sorulan Sorular

HTML'de kaç tane başlık etiketi var?

Altı tane: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>. <h1> en önemlisidir (sayfa başlığı), <h6> ise en az önemli olanı. <h7> yoktur; öyle bir etiket bilinmeyen bir satır içi element olarak ele alınır.

HTML başlıklarının varsayılan boyutları nedir?

Varsayılan 16px metinle tarayıcılar h1 başlığını 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) ve h6 10.72px (0.67em) olarak, hepsini kalın gösterir.

Bir sayfada birden fazla h1 olabilir mi?

HTML buna izin verir, ama sayfayı adlandıran tek bir <h1>, ekran okuyucu kullananlar ve arama motorları için en net yapıdır. Altındaki ana bölümler için <h2> kullan.

h2'den h4'e geçmek gibi başlık seviyesi atlayabilir miyim?

Kaçın. Ekran okuyucu kullananlar başlık seviyesine göre gezinir ve h2 başlığından h4 başlığına atlamak eksik bir bölüm olduğunu düşündürür. Seviyeyi ana hattaki yerine göre seç, boyutu CSS ile değiştir.

Bir başlığın boyutunu nasıl değiştiririm?

CSS'te font-size ayarla, örneğin h2 { font-size: 20px; } ya da tek bir başlık için bir class. Bir başlık seviyesini asla varsayılan boyutu yüzünden seçme.

İlgili kavramlar