Heading outline
Belge başlık hiyerarşisini ve outline algoritmasını öğrenirsin.
Başlık hiyerarşisi
Başlıklar <h1>'den <h6>'ya altı düzeydedir. Bir sayfanın mantıksal bir başlık hiyerarşisi olmalıdır: h1 ana başlık, h2 bölümler, h3 alt bölümler biçiminde. Düzey atlamamak gerekir; örneğin h2'den sonra h4 gelmesi kötüdür.
Ekran okuyucu kullanıcıları başlıklarla sayfada gezer. Atlama veya düzensiz hiyerarşi, içeriğin yapısını anlaşılmaz kılar. Görsel büyüklük için başlık düzeyini değiştirme; CSS kullan.
Document outline algoritması
Başlık hiyerarşisi, sayfanın document outline'ını (belge taslağını) oluşturur. Eskiden <section> içindeki ilk başlık otomatik h1 sayılırdı; bu outline algoritması pratikte hiçbir tarayıcı tarafından uygulanmadı.
Bugün geçerli yaklaşım şudur: başlık düzeyi gerçek h1-h6 değerine göre belirlenir. Yani <section> içinde <h4> yazarsan, o başlık h4 olarak duyurulur. Bu yüzden düzeyleri bilinçli kullan.
Uygulama Doğru başlık hiyerarşisi kur
Body içine bir <main> ekle. main içine bir <h1> koy (metin dolu olsun). Sonra iki <section> ekle. Her section içinde bir <h2> olsun (metin dolu). İlk section içinde h2'den sonra bir <h3> de olsun (metin dolu). main'i kapat.
Örnek çözümü göster
<body>
<main>
<h1>Yardım Merkezi</h1>
<section>
<h2>Sıkça sorulan sorular</h2>
<h3>Hesap</h3>
</section>
<section>
<h2>İletişim</h2>
</section>
</main>
</body>Kendini test et
-
Aşağıdakilerden hangisi kötü başlık hiyerarşisidir?
- h1 → h2 → h3
- h1 → h2 → h2
- h1 → h3 → h4
- h1 → h2 → h3 → h4
Cevabı göster
h1 → h3 → h4 — Doğru. h1'den h3'e atlamak h2 düzeyini atlar; ekran okuyucu kullanıcıları şaşırır.
-
Ana başlığı tamamla
<main> <____>Üye Profili</h1> <section> <h2>Siparişler</h2> </section> </main>Cevabı göster
<main> <h1>Üye Profili</h1> <section> <h2>Siparişler</h2> </section> </main> -
Düzeyi rolüyle eşleştir
- h1
- Ana sayfa başlığı
- h2
- Bölüm başlığı
- h3
- Alt bölüm başlığı
- h6
- En derin alt başlık
-
Bir sayfada kaç tane h1 önerilir?
- Üç
- Bir
- Sayfa uzunsa yedi
- Sınırsız, ne kadar çok o kadar iyi
Cevabı göster
Bir — Doğru. Genellikle her sayfada tek bir h1 ana başlık yeterlidir.