HTML Academy · Ders

Başlıklar h1-h6 ve Hiyerarşileri

Anlamlı bir belge yapısı oluşturmak için başlık düzeylerini kullanmayı öğrenin.

Başlıklar h1-h6 ve Hiyerarşileri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Altı Başlık Düzeyi

HTML, <h1> ile <h6> arasında altı başlık öğesi sunar:

h1 — Ana sayfa başlığı (en önemli)
h2 — Ana bölümler
h3 — Alt bölümler
h4, h5, h6 — Daha derin alt bölümler (nadiren gerekir)

Başlıkların boyutu görsel olarak küçülür, ancak boyut numarayla değil CSS ile belirlenir.

Anlamsal Hiyerarşi

Başlıklar bir belge ana hat yapısı oluşturur — sayfanız için bir içindekiler tablosu:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

h1 Kuralı

<h1> için en iyi uygulamalar:

Sayfa başına tam olarak bir <h1> kullanın
<title> öğesiyle aynı olmalı veya onunla yakından ilişkili olmalıdır
Sayfanın ana konusunu belirtmelidir
Arama motorları, arama motoru optimizasyonu açısından buna büyük önem verir

Düzeyleri Atlamayın

Başlık düzeyleri sırayla kullanılmalıdır — h2’den h4’e atlamayın:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Gezinme için Başlıklar

Ekran okuyucu kullananlar, uzun sayfalarda gezinmek için başlıklara güvenir:

H tuşuyla başlıklar arasında geçiş yaparlar
Ekran okuyucular, tüm başlıkları bir içindekiler tablosu gibi listeler
Doğru hiyerarşi, sayfada görme olmadan gezinmeyi mümkün kılar

Stil ve Anlam

Başlık düzeyini görsel boyutuna göre seçmeyin — bunun için CSS kullanın:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Bölümlerde Başlıklar

HTML5 bölümleme öğelerini kullanırken başlık hiyerarşisi her bölümde yeniden başlar:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Başlıklar için Erişilebilirlik İpuçları

Erişilebilirlik için şu başlık kurallarına uyun:

Her sayfada en az bir başlık bulunmalıdır
Ana içerik alanı bir <h1> ile başlamalıdır
Başlıkları yalnızca metni kalınlaştırmak veya büyütmek için kullanmayın
Başlıkların yerine kalın metin kullanmayın

Arama Motoru Optimizasyonu ve Başlıklar

Arama motorları, sayfa içeriğini anlamak için başlıkları kullanır:

<h1>, arama motoru optimizasyonu açısından en büyük ağırlığa sahiptir
Hedef anahtar sözcükleri başlıklara doğal biçimde ekleyin
Başlıklar içeriği bölerek okunabilirlik ölçümlerini iyileştirir
Arama motorları, başlıkları sonuçlarda gösterir (öne çıkan snippet'ler)

Tarayıcıların Varsayılan Stilleri

Tarayıcılar başlıklara varsayılan stiller uygular:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Gezinmede Başlıklar

Başlıklar, gezinme bölgelerinde de kullanılabilir:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Hızlı Kontrol

İyi yapılandırılmış bir sayfada genellikle kaç h1 öğesi bulunmalıdır?

Özet: Başlıklar

Başlık hiyerarşisinin temel noktaları:

Altı düzey: h1 ile h6 arası
Sayfa başına bir h1 — ana başlık
Düzeyleri sırayla kullanın — hiçbir düzeyi atlamayın
Başlıklar erişilebilir bir belge ana hat yapısı oluşturur
Görsel boyut için başlık numaraları yerine CSS kullanın

Sıkça Sorulan Sorular

“Başlıklar h1-h6 ve Hiyerarşileri” dersi ücretsiz mi?

Evet — “Başlıklar h1-h6 ve Hiyerarşileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Başlıklar h1-h6 ve Hiyerarşileri” dersinde ne öğreneceğim?

Anlamlı bir belge yapısı oluşturmak için başlık düzeylerini kullanmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Başlıklar h1-h6 ve Hiyerarşileri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön