Başlık Hiyerarşisi

Baş bölümü tamamlandı; gövdenin yazımı başlıyor. Gövdenin ilk yapısal kararı başlıklardır: belgenin hangi bölümlere ayrıldığını ve bu bölümlerin birbirine göre düzeyini bildiren etiketler.

Altı başlık ögesi vardır: h1 ile h6. Sayı, başlığın düzeyini verir — birinci düzey en üsttedir. Bu sayı bir yazı tipi ölçüsü değildir; iç içelik derinliğini bildirir.

Başlık Bir Yapı Bildirimidir

Bir başlık ögesi iki iş görür. Kendisinden sonra gelen içeriğe bir ad verir ve o içeriğin belgedeki derinliğini bildirir. İkinci iş, düzey sayısıyla taşınır.

Bir kitabın içindekiler bölümünü düşünmek yeterlidir: bölüm başlıkları, alt bölüm başlıkları ve alt alt bölüm başlıkları farklı girinti düzeylerinde yazılır ve girinti, hangi alt bölümün hangi bölüme ait olduğunu gösterir. HTML’de girintinin karşılığı düzey sayısıdır.

Bu bilgi kullanılır. Ekran okuyucular belge içinde başlıktan başlığa gezinme sunar; kullanıcı belgeyi baştan dinlemek yerine ana hattı tarayıp ilgilendiği bölüme atlar. İçerik çıkaran araçlar belgeyi başlıklara göre bölümler. Dizinleyiciler başlık metnine, gövde metninden farklı bir ağırlık verir.

Ana Hattı Çıkarmak

Başlık düzeyleri bir ağaç tanımlar ve bu ağaç belgeden hesaplanabilir.

// baslik.mjs — baslik duzeyi dizisinden ana hat cikarir
const belge = `
<h1>Kuzey Yamaç İstasyonu</h1>
<h2>Konum</h2>
<h2>Ölçülen Büyüklükler</h2>
<h3>Sıcaklık</h3>
<h3>Bağıl Nem</h3>
<h2>Veri Erişimi</h2>
<h4>Dosya Biçimi</h4>
`;

const basliklar = [...belge.matchAll(/<h([1-6])>([^<]*)<\/h\1>/g)].map((e) => ({
  duzey: Number(e[1]),
  metin: e[2],
}));

let onceki = 0;
const uyarilar = [];
const numara = [];
for (const baslik of basliklar) {
  if (onceki !== 0 && baslik.duzey > onceki + 1) {
    uyarilar.push(`h${onceki} sonrasi h${baslik.duzey}: h${onceki + 1} atlandi (${baslik.metin})`);
  }
  numara.length = baslik.duzey;
  numara[baslik.duzey - 1] = (numara[baslik.duzey - 1] ?? 0) + 1;
  const etiket = [...numara].map((s) => s ?? 0).join(".");
  console.log("  ".repeat(baslik.duzey - 1) + etiket + "  " + baslik.metin);
  onceki = baslik.duzey;
}

console.log("--- denetim ---");
console.log("baslik sayisi :", basliklar.length);
console.log("h1 sayisi     :", basliklar.filter((b) => b.duzey === 1).length);
for (const uyari of uyarilar) console.log("uyari         :", uyari);

1  Kuzey Yamaç İstasyonu
  1.1  Konum
  1.2  Ölçülen Büyüklükler
    1.2.1  Sıcaklık
    1.2.2  Bağıl Nem
  1.3  Veri Erişimi
      1.3.0.1  Dosya Biçimi
--- denetim ---
baslik sayisi : 7
h1 sayisi     : 1
uyari         : h2 sonrasi h4: h3 atlandi (Dosya Biçimi)

Son başlık kusuru görünür kılar. Veri Erişimi ikinci düzeydeyken Dosya Biçimi dördüncü düzeye yazılmış, üçüncü düzey atlanmıştır. Numaralandırmada bu, boş bir basamak olarak 1.3.0.1 biçiminde belirir: ana hatta karşılığı olmayan bir düzey vardır.

Düzey Atlamanın Sonucu

Atlanan düzey, ana hatta bir boşluk bırakır. Belgeyi başlıktan başlığa gezen bir kullanıcı, Veri Erişimi ile Dosya Biçimi arasında var olmayan bir ara bölüm bekler ve bulamaz. Sonuç bir görsel kusur değil, yanlış bir yapı bildirimidir.

Atlamanın nedeni çoğunlukla sunumla ilgilidir: yazar, dördüncü düzey başlığın varsayılan görünümünü daha uygun bulmuştur. Bu, birinci derste tanımlanan katman ihlalidir. Doğru çözüm düzeyi yapıya göre seçmek ve görünümü sunum katmanında düzeltmektir.

Ters yönde bir kural yoktur: düzey azalırken atlamak kusur değildir. Üçüncü düzey bir bölümden sonra ikinci düzeye dönmek, alt bölümün bittiğini ve yeni bir üst bölüm başladığını bildirir; bu olağan bir kapanıştır.

Belgede Kaç Birinci Düzey Başlık

Bu konuda iki savunulabilir yaklaşım vardır ve ikisi de kullanımdadır.

Tek h1 yaklaşımı: belgede yalnızca bir birinci düzey başlık bulunur ve belgenin konusunu adlandırır. Diğer her şey onun altındadır. Bu yaklaşım ana hattı tek köklü bir ağaç yapar ve belgeyi bağlamı dışında özetlemeyi kolaylaştırır.

Bölümlere göre h1 yaklaşımı: her bölümleme ögesi kendi başlık düzeyini yeniden başlatır ve düzey, iç içelikten hesaplanır. Bu yaklaşımın dayandığı ana hat hesabı, ekran okuyucu gerçekleştirimlerinde tutarlı biçimde desteklenmemiştir.

Bu kurs birinci yaklaşımı izler: belgede tek bir h1, altında sayı sırasına uyan başlıklar. Gerekçe kuramsal üstünlük değil, gerçekleştirimlerin bu düzeni tutarlı biçimde yorumlamasıdır. Bir yapı bildiriminin değeri, onu okuyan araçların ondan aynı sonucu çıkarmasına bağlıdır.

Başlığın İçeriği

Başlık ögesi metin taşır ve metin içi işaretlemeye izin verir: bir başlıkta kısaltma, kod parçası veya vurgu bulunabilir. Bulunmaması gereken şey, ayrı bir bölüme ait olan içeriktir — başlık bir bölümü adlandırır, kendisi bölümün içeriği değildir.

Başlık metni bağlamı dışında da anlaşılır olmalıdır. Başlıktan başlığa gezinen bir kullanıcı, gövde metnini görmeden yalnızca başlıkları duyar. “Ayrıntılar”, “Devamı” veya “Bölüm 3” gibi başlıklar bu kullanımda bilgi taşımaz.

Bir belgede başlık ögesiyle yazılmamış ama görsel olarak başlık gibi duran metin varsa, ana hatta o bölüm yoktur. Tersi de geçerlidir: yalnızca büyük görünsün diye başlık ögesine konmuş bir metin, ana hatta var olmayan bir bölüm ekler.

Alt Başlık Sorunu

Bir başlığın altına, onu tamamlayan kısa bir tanıtım satırı yazmak sık karşılaşılan bir gereksinimdir. Bu satır ikinci düzey bir başlık ögesine konursa ana hatta var olmayan bir bölüm eklenmiş olur: gezinme sırasında kullanıcı bir alt bölüm bekler, oysa yalnızca bir tanıtım cümlesi vardır.

<h1>Kuzey Yamaç Ölçüm İstasyonu</h1>
<h2>1840 metrede, dört büyüklük</h2>   <!-- ana hatta sahte bir bolum ekler -->

Doğru yazım, tanıtım satırını başlık ögesi dışında bırakır ve ikisini bir arada tutar:

<header>
  <h1>Kuzey Yamaç Ölçüm İstasyonu</h1>
  <p>1840 metrede, dört büyüklük</p>
</header>

Burada ana hatta yalnızca bir giriş vardır; tanıtım satırı bir paragraftır ve başlıkla görsel ilişkisi sunum katmanında kurulur. Kullanılan header ögesi, bir sonraki konunun konusudur; buradaki işlevi, iki ögeyi tek bir tanıtım bloğu olarak gruplamaktır.

Aynı akıl yürütme, başlık metninin bir bölümünü küçük göstermek için ikinci bir başlık ögesi açmaya da uygulanır. Ana hatta bir giriş eklemek isteniyorsa başlık ögesi kullanılır; istenmiyorsa kullanılmaz. Görünüm bu kararın ölçütü değildir.

İstasyon Belgesinin Ana Hattı

Kurs boyunca geliştirilen belgenin gövdesi başlıklarla bölümlenir:

<body>
  <h1>Kuzey Yamaç Ölçüm İstasyonu</h1>
  <p>Deniz seviyesinden 1840 metre yükseklikte kurulu otomatik ölçüm istasyonu.</p>

  <h2>Konum ve Kuruluş</h2>
  <p>İstasyon, kuzeye bakan yamacın orta kesiminde yer alır.</p>

  <h2>Ölçülen Büyüklükler</h2>
  <h3>Sıcaklık</h3>
  <p>Ölçüm aralığı on dakikadır.</p>
  <h3>Bağıl Nem</h3>
  <p>Ölçüm aralığı on dakikadır.</p>

  <h2>Veri Erişimi</h2>
  <p>Kayıtlar günlük dosyalar hâlinde yayımlanır.</p>
</body>

Bu iskelet, belgenin geri kalanının üzerine kurulacağı yapıdır. Sonraki derslerde her bölümün içi doldurulacak; başlık düzeni değişmeyecektir.

Özet

• Başlık düzeyi bir yazı tipi ölçüsü değil, belgedeki derinliği bildiren yapı verisidir.
• Başlıklar bir ana hat tanımlar; bu ana hat gezinme, içerik çıkarma ve dizinleme araçlarınca kullanılır.
• Düzey artarken atlamak ana hatta karşılığı olmayan bir boşluk bırakır; düzey azalırken atlamak kusur değildir.
• Belgede tek bir birinci düzey başlık bulundurma yaklaşımı, gerçekleştirimlerin tutarlı yorumu nedeniyle bu kursta izlenir.
• Başlık metni bağlamı dışında da anlaşılır olmalıdır; başlıktan başlığa gezen kullanıcı gövdeyi görmez.

Sonraki Adım

Başlıklar bölümleri adlandırdı; içlerini paragraflar dolduracak. Paragraf metninin kendisi de yapısızdır: bir vurgunun neden vurgu olduğu, bir kısaltmanın neyin karşılığı olduğu, alıntının nereden geldiği bildirilmedikçe kaybolur. Sonraki ders metin içi işaretlemeyi ele alır ve bu arada ayrıştırıcının metne uyguladığı bir dönüşümü gösterir: kaynak metindeki boşluk ve satır sonlarının ne olduğunu.