HTML Başlık Etiketleri h1-h6: Hiyerarşi, hgroup ve headingoffset

h1-h6 öğelerinin temel kuralları

Başlık öğeleri flow, heading ve palpable içerik kategorilerine girer; içlerine yalnızca phrasing içerik (metin, <a>, <strong>, <code> gibi satır içi öğeler) konabilir. Başlangıç ve bitiş etiketleri zorunludur. Flow içerik kabul eden her öğenin içinde yer alabilirler. Varsayılan olarak her başlık yeni bir satırda başlayan ve kapsayıcısının tüm genişliğini kaplayan blok düzeyinde bir kutu oluşturur.

Başlıkların örtük ARIA rolü heading olarak tanımlanır ve seviye bilgisi öğenin adındaki sayıdan gelir. MDN'ye göre tarayıcılar ve yardımcı yazılımlar başlık bilgisini belge için otomatik bir içindekiler tablosu oluşturmak amacıyla kullanabilir. Bu yüzden başlıklar yalnızca görsel değil, sayfanın yapısal haritasıdır.

<h1>Kahve demleme yöntemleri</h1>
<p>Evde uygulanabilecek yöntemlerin özeti.</p>
<h2>Filtre kahve</h2>
<h3>Gerekli malzemeler</h3>
<h3>Demleme adımları</h3>
<h2>Türk kahvesi</h2>
<h3>Cezve seçimi</h3>
<h4>Bakır cezve</h4>
<h4>Çelik cezve</h4>
<h2>Kaynaklar</h2>

Bu yapıda her <h2> ana bölümü, her <h3> o bölümün alt konusunu, <h4> ise alt konunun ayrıntısını işaretler. <h4> ile biten 'Cezve seçimi' bölümünden sonra doğrudan <h2> gelmesi bir sorun değildir: MDN, iç içe başlıklarda bir alt bölüm kapanırken seviyelerin 'atlanabileceğini' açıkça belirtir. Kaçınılması gereken, içeri doğru inerken seviye atlamaktır.

Seviye atlamamak neden önemli?

Ekran okuyucu kullanan kişilerin sık başvurduğu bir gezinme yöntemi, başlıktan başlığa atlayarak sayfanın içeriğini anlamaktır. Çoğu ekran okuyucu sayfadaki bütün başlıkların sıralı bir listesini de üretebilir; bu liste, içeriğin hiyerarşisini bir bakışta gösterir. <h1> öğesinden sonra doğrudan <h3> gelirse, bu şekilde gezinen kişi kayıp bir başlık olup olmadığını merak eder. MDN'nin kötü ve iyi örnek karşılaştırması şöyledir:

<!-- Kaçının: h2 atlanmış -->
<h1>Birinci seviye</h1>
<h3>Üçüncü seviye</h3>
<h4>Dördüncü seviye</h4>

<!-- Tercih edin: sıra korunmuş -->
<h1>Birinci seviye</h1>
<h2>İkinci seviye</h2>
<h3>Üçüncü seviye</h3>

Bu kural WCAG'in algılanabilirlik ve gezinilebilirlik yönergeleriyle ilişkilidir; MDN başlık sayfasında 1.3.1 ve 2.4 başlıklı başarı ölçütlerine bağlantı verir. WCAG'in genel yapısını web erişilebilirlik ve WCAG temelleri yazısında anlattık.

Sayfada kaç tane h1 olmalı?

HTML standardı, iç içe olmadıkları sürece bir sayfada birden fazla <h1> kullanılmasına izin verir. Ancak MDN bunu iyi bir uygulama olarak görmez: bir sayfanın, <title> öğesine benzer biçimde sayfanın içeriğini anlatan tek bir <h1> taşıması önerilir. Eskiden iç içe bölümleme öğelerinde (<section>, <article> gibi) her bölüme yeni bir <h1> koymak standarda uygundu; MDN bunun hiçbir zaman iyi uygulama sayılmadığını ve artık standarda uygun olmadığını belirtir.

Bu eski kuralın arka planı için MDN, 'There Is No Document Outline Algorithm' (belge ana hattı algoritması yoktur) başlıklı bir yazıya bağlantı verir. Sonuç olarak başlık seviyesini bugün öğenin adı belirler: bir <section> içindeki <h1> yardımcı teknolojilere birinci seviye başlık olarak sunulur.

hgroup: başlık ve alt başlığı birlikte işaretlemek

<hgroup> bir başlığı ve onunla ilgili ikincil içeriği gruplar: alt başlık, alternatif başlık ya da slogan gibi. İzin verilen içerik kuralı kesindir: sıfır ya da daha fazla <p>, ardından <h1> ile <h6> arasından tek bir başlık öğesi, ardından yine sıfır ya da daha fazla <p>. Yani alt başlık için ikinci bir başlık öğesi değil, paragraf kullanılır.

<hgroup>
  <h1>Kahve Rehberi</h1>
  <p>Çekirdekten fincana bütün aşamalar</p>
</hgroup>
<p>Bu rehber evde kahve hazırlamanın temel yöntemlerini anlatır.</p>

<hgroup> belge yapısını değiştirmez; içindeki tek başlık normal şekilde başlık hiyerarşisine katılır, <p> öğeleri ise yalnızca o başlığa eşlik eden metindir. Örtük ARIA rolü group olarak tanımlanır. Alt başlığı ikinci bir başlık öğesiyle yazmak hem bu kurala aykırıdır hem de başlık listesine gereksiz bir seviye ekler.

Bölümleri başlıklarla etiketlemek

Ekran okuyucu kullanıcılarının bir diğer gezinme yöntemi, sayfadaki bölümleme öğelerinin listesini çıkarmaktır. Aynı sayfada aynı türden birden fazla bölüm varsa (örneğin üst menü ve alt menü için iki <nav>) her birini görünen bir başlıkla adlandırmak işe yarar. MDN bunun için başlığa id verip bölüme aria-labelledby eklemeyi gösterir:

<header>
  <nav aria-labelledby="ana-menu">
    <h2 id="ana-menu">Ana menü</h2>
    <!-- menü bağlantıları -->
  </nav>
</header>
<footer>
  <nav aria-labelledby="alt-menu">
    <h2 id="alt-menu">Alt menü</h2>
    <!-- menü bağlantıları -->
  </nav>
</footer>

Bu sayede ekran okuyucu iki gezinme bölgesini 'Ana menü' ve 'Alt menü' adlarıyla duyurur; aksi halde kullanıcı her birinin içeriğine girip ne olduğunu anlamak zorunda kalabilir. Erişilebilir adın nasıl hesaplandığı aria-label, aria-labelledby ve aria-describedby yazısının konusudur; <nav>, <header> ve <footer> öğelerinin kendisi ise HTML semantik etiketler yazısında.

headingoffset ve headingreset: seviyeyi işaretlemeyi değiştirmeden kaydırmak

Her başlığın bir hesaplanan başlık seviyesi vardır; yardımcı teknolojilere sunulan seviye budur. Normalde bu, öğe adındaki sayıdır. headingoffset global özniteliği bu sayıya ekleme yapar. Değeri 0 ile 8 arasında (ikisi dahil) negatif olmayan bir tam sayıdır; tam sayı olarak çözümlenemeyen bir değer 0 sayılır. Tarayıcı, başlığın kendisinden başlayarak bütün atalarını dolaşır (shadow sınırlarını geçip shadow host'a da çıkar) ve bulduğu bütün headingoffset değerlerini toplar.

Bu özelliğin çözdüğü sorun, yeniden kullanılan bileşenlerdir. Örneğin bir ürün kartı her zaman <h1> ile yazılmış olsun; kartı sayfanın farklı derinliklerinde kullanırken başlık etiketini değiştirmek yerine kapsayıcıya headingoffset verirsiniz:

<h1>Ürün kataloğu</h1>
<article>
  <h1>Filtre kahve makinesi</h1>
  <p>Kart bileşeni birinci seviyede.</p>
</article>
<section headingoffset="1">
  <h1>Benzer ürünler</h1>
  <article>
    <h1>Moka pot</h1>
    <p>Aynı kart bileşeni bir seviye daha derinde.</p>
  </article>
</section>

MDN'deki benzer örneğe göre hesaplanan seviyeler şöyledir: 'Ürün kataloğu' 1, 'Filtre kahve makinesi' 1, 'Benzer ürünler' 2, 'Moka pot' 2. Toplama kuralının ayrıntıları şunlardır:

• Değerler birikir: headingoffset="1" taşıyan bir öğenin içinde, headingoffset="2" taşıyan bir öğe varsa, onun içindeki <h2> beşinci seviyeye çıkar.
• Sayım başlığın kendisinden başlar; <h1 headingoffset="2"> üçüncü seviyedir.
• Hesaplanan seviye hiçbir zaman 9'u geçmez. HTML'de <h6> üstünde başlık öğesi olmadığından 7, 8 ve 9. seviyeler yalnızca headingoffset ya da aria-level ile üretilebilir.
• Öznitelik yalnızca hesaplanan seviyeyi değiştirir: öğenin adı (dolayısıyla h1 CSS seçicisi ve varsayılan stil) ve heading rolü aynı kalır. Başlıkta açıkça yazılmış bir aria-level varsa o önceliklidir.

headingreset ise bir boolean özniteliktir ve ataların ofsetlerinin içeri geçmesini durdurur. Öğenin kendi headingoffset değeri yine sayılır, ondan yukarıdakiler sayılmaz. MDN bu özniteliği, çevresindeki belgenin yapısına ait olmayan içerik için önerir: bir <dialog>, bir popover ya da başka bir kaynaktan eklenen işaretleme gibi.

<section headingoffset="2">
  <h1>Seviye 3</h1>
  <dialog headingreset>
    <h1>Seviye 1</h1>
    <p>Bölümün ofseti burada uygulanmaz.</p>
  </dialog>
</section>

role="heading" ve aria-level yerine neden yerel başlık?

ARIA'da bir öğeyi başlık olarak tanıtan heading rolü ve seviyeyi belirten aria-level özniteliği vardır. <div role="heading" aria-level="2"> yazarak bir <div> öğesini ikinci seviye başlık gibi sunabilirsiniz. MDN'nin ARIA heading rolü sayfası ise bu rolün en iyi kullanımının hiç kullanmamak olduğunu söyler: rol ve aria-level yalnızca büyük değişiklik yapamadığınız eski kodu sonradan erişilebilir kılmak içindir; yeni kodda <h1>-<h6> öğelerini kullanın.

Bu tavsiyenin pratik gerekçeleri de var. heading rolünde aria-level zorunludur; yazılmazsa tarayıcılar yedek değer olarak 2 kullanır, bu da yapıyı sessizce bozabilir. Seviyeyi 6'nın üzerine çıkarmak teorik olarak mümkün olsa da MDN, farklı tarayıcı ve ekran okuyucu birleşimlerinde sonucun öngörülemez olabileceği uyarısıyla 6'yı geçmemenizi önerir. Ayrıca bir başlığa aria-label ya da aria-labelledby eklemek, yardımcı teknolojilerin başlığın görünen metni yerine etiketi okumasına yol açar; başlıklara bu öznitelikleri eklemeyin. ARIA'nın genel kuralları için ARIA nedir yazısına bakın.

Başlıklara bağlantı vermek de yerel öğelerle kolaydır: başlığa bir id verdiğinizde, href="#id" biçimindeki sayfa içi bağlantılar o başlığa atlar ve klavyeyle de ulaşılabilir hale gelir. Uzun bir yazının başına konan içindekiler listesi bu şekilde kurulur:

<nav aria-labelledby="icindekiler">
  <h2 id="icindekiler">İçindekiler</h2>
  <ol>
    <li><a href="#filtre">Filtre kahve</a></li>
    <li><a href="#turk-kahvesi">Türk kahvesi</a></li>
  </ol>
</nav>
<h2 id="filtre">Filtre kahve</h2>
<p>Filtre kahve için orta incelikte çekilmiş kahve kullanılır.</p>
<h2 id="turk-kahvesi">Türk kahvesi</h2>
<p>Türk kahvesi çok ince çekilmiş kahveyle cezvede pişirilir.</p>

Parça bağlantılarının ayrıntıları (#top, boş parça ve id kuralları) HTML a etiketi yazısında, sıralı liste öğeleri ise HTML listeler yazısında anlatılıyor.

Uygulamalı örnek: kalın paragrafları başlığa çevirmek

Eski bir sayfada bölüm adlarının <p><b>...</b></p> biçiminde yazıldığını, bazı alt bölümlerin de yalnızca daha küçük görünsün diye <h5> ile işaretlendiğini düşünün. Görsel olarak sayfa düzgün görünür, ancak başlık listesi ya boştur ya da 1'den 5'e atlayan bir yapı gösterir. Düzeltme üç adımdan oluşur: sayfanın konusunu anlatan tek bir <h1> belirleyin; her ana bölüm adını <h2> yapın; alt bölümleri bağlı oldukları ana bölümün altına <h3> olarak yerleştirin. Görünüm farkı CSS ile giderilir, yapı ise HTML'de doğru kalır. Son olarak başlık metinlerini tek tek okuyun: yalnızca başlıkları okuyan biri sayfanın ne anlattığını anlayabiliyorsa hiyerarşi işini yapıyor demektir.

Sık yapılan hatalar

• Başlığı yazı boyutu için seçmek: 'Bu yazı küçük görünsün' diye <h4> kullanmak yapıyı bozar. Boyutu CSS ile ayarlayın.
• Başlık yerine kalın paragraf kullanmak: <p><b>Bölüm adı</b></p> görsel olarak başlığa benzer ama başlık listesinde görünmez. MDN, <b> öğesinin başlık işaretlemek için kullanılmamasını açıkça söyler.
• İçeri inerken seviye atlamak: <h2> altından doğrudan <h4> açmak, başlıkla gezinen kişiye eksik bir bölüm varmış izlenimi verir.
• Her bölüme yeni h1 koymak: eski belge ana hattı yaklaşımı artık standarda uygun değildir; tek <h1> ve sıralı alt seviyeler kullanın.
• hgroup içine iki başlık koymak: alt başlık bir <p> olmalıdır.
• Başlığın içine blok öğe koymak: başlıklar yalnızca phrasing içerik alır; içine <div> ya da <p> konmaz. Bu tür iç içe kullanım hataları için sık yapılan hatalar yazısına bakın.

Sık Sorulan Sorular

Birden fazla h1 kullanmak hata mı?

Standart, iç içe olmadıkları sürece birden fazla <h1> kullanılmasına izin verir; yani geçersiz değildir. Ancak MDN tek <h1> kullanmayı ve alt başlıkları seviye atlamadan sıralamayı en iyi uygulama olarak önerir.

h1 ile title aynı olmalı mı?

Zorunlu değil. İkisi farklı yerlerde görünür: <title> sekmede ve başlık çubuğunda, <h1> sayfanın içinde. MDN tek <h1> öğesinin, <title> gibi sayfanın içeriğini anlatmasını önerir; bu yüzden çoğu zaman benzer metinler taşırlar.

Kenar çubuğundaki kutu başlıkları hangi seviyede olmalı?

Kutunun sayfadaki yerine göre karar verin. Ana içerikle aynı düzeyde bir bölümse <h2> uygun olur. Önemli olan, başlıkla gezinen bir kişinin listeyi okuduğunda mantıklı bir hiyerarşi görmesidir.

headingoffset kullanırsam CSS seçicilerim değişir mi?

Hayır. MDN'ye göre öznitelik öğenin adını değiştirmez; h1 seçicisi eşleşmeye devam eder ve varsayılan stil aynı kalır. Değişen yalnızca yardımcı teknolojilere sunulan seviyedir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML semantik etiketler · article, section ve div farkı · erişilebilir ad · yeni HTML özellikleri