Makale ve Bölüm Ayrımı

Önceki ders section ögesini adlandırılmış bir bölüm olarak kullandı, article ögesini yer imi tablosunda gösterdi ama ayrımı açmadı. İkisi arasındaki seçim, anlamsal işaretlemede en sık yanlış yapılan karardır — çünkü görünür bir sonucu yoktur ve yanlış seçim hiçbir hata üretmez.

Ayrımın tek bir ölçütü vardır ve bu ders o ölçütü tanımlar.

Bağımsızlık Ölçütü

article ögesi, kendi başına dağıtılabilir bir içerik birimini işaretler. Ölçüt şudur: bu içerik bulunduğu belgeden koparılıp başka bir yerde —bir akışta, bir listede, bir okuma uygulamasında— tek başına yayımlansa anlamını korur mu?

Korursa article, korumazsa section.

Ölçüt, içeriğin türüyle ilgili değildir. Bir gazete yazısı article olabilir; bir ürün kartı, bir yorum, bir günlük kaydı, bir arama sonucu da olabilir. Tersine, uzun bir belgenin “Yöntem” bölümü article değildir: koparıldığında neyin yöntemi olduğu kaybolur.

section ögesi ise tematik bir gruplamadır. Belgenin bir bölümünü ayırır; anlamı, belgenin bütünüyle ilişkisinden gelir. İçindekiler tablosuna bir giriş oluşturacak her bölüm bu ögeye adaydır.

Bölümün Başlığı Olmalıdır

section ögesinin bir başlığı yoksa, ne ayırdığı bildirilmemiştir. Bu, önceki dersteki kuralın nedenidir: adı olmayan bir section yer imi listesinde görünmez ve öge işlevsiz kalır.

Aşağıdaki betik belgedeki bölümleme ögelerini tarar ve başlık taşıyıp taşımadıklarını bildirir.

// bolum.mjs — bolumleme ogelerinin baslik denetimi
const belge = `
<main>
  <section id="ozet">
    <h2>İstasyon Özeti</h2>
    <p>Kuzey Yamaç istasyonu 1840 metrede kuruludur.</p>
  </section>
  <section id="uyari">
    <p>Bakım nedeniyle veri akışı durabilir.</p>
  </section>
  <article id="kayit-2">
    <h2>Kalibrasyon Kaydı</h2>
    <p>Nem sensörü yeniden ayarlandı.</p>
  </article>
</main>`;

const BOLUMLEME = new Set(["section", "article", "nav", "aside"]);
const desen = /<(\/?)([a-z0-9]+)([^>]*)>/g;
const yigit = [];
let esleme;
while ((esleme = desen.exec(belge)) !== null) {
  const [, kapanis, ad, oznitelik] = esleme;
  if (kapanis) {
    if (BOLUMLEME.has(ad)) {
      const bolum = yigit.pop();
      console.log(
        (bolum.ad + (bolum.kimlik ? "#" + bolum.kimlik : "")).padEnd(18),
        bolum.baslik ? "baslik var" : "BASLIK YOK",
      );
    }
    continue;
  }
  if (BOLUMLEME.has(ad)) {
    const kimlik = oznitelik.match(/id="([^"]*)"/)?.[1] ?? "";
    yigit.push({ ad, kimlik, baslik: false });
  } else if (/^h[1-6]$/.test(ad) && yigit.length > 0) {
    yigit[yigit.length - 1].baslik = true;
  }
}

section#ozet       baslik var
section#uyari      BASLIK YOK
article#kayit-2    baslik var

İkinci bölüm bir kusur bildirir. İçeriği bir uyarıdır ve tematik bir bölüm değildir; doğru öge bir uyarı bloğu için div ya da —uyarının yapısal bir bölüm olması isteniyorsa— bir başlık eklenmiş section olurdu.

Bu denetim bir üslup tercihi değildir. Başlıksız bir bölüm, önceki dersteki yer imi listesinde görünmez; belgeyi bölümlere ayırdığı sanılırken hiçbir şey yapmamış olur.

İç İçe Makaleler

Bir makale başka bir makaleyi içerebilir ve bu geçerlidir: içteki makale, dıştakiyle ilişkilidir ama kendi başına da anlamlıdır. Bir yazının altındaki yorumlar bu yapının tipik örneğidir.

<article>
  <h2>Nem Sensörü Kalibrasyonu</h2>
  <p>Sensör, referans değere göre yüzde iki sapma gösterdi.</p>

  <section>
    <h3>Gözlemci Notları</h3>
    <article>
      <h4>Sabah ölçümü</h4>
      <p>Gövde içi yoğuşma gözlendi.</p>
    </article>
    <article>
      <h4>Akşam ölçümü</h4>
      <p>Sapma yinelenmedi.</p>
    </article>
  </section>
</article>

Yapı iki düzey bildirir. Dıştaki makale bir kalibrasyon kaydıdır; içtekiler o kayda düşülmüş notlardır ve her biri tek başına okunabilir. İkisini birbirine bağlayan section ögesi bağımsız değildir — koparıldığında “hangi kaydın notları” bilgisi kaybolur.

Başlık düzeylerine dikkat edilmelidir: iç içelik başlık düzeyini kendiliğinden değiştirmez. Başlık Hiyerarşisi dersinde belirtildiği gibi, bu kurs düzeyleri belgenin bütünü üzerinden sayar; article ögesinin içinde h1 ile yeniden başlanmaz.

Makalenin Üstverisi

Bağımsız dağıtılabilirlik, makalenin kendi künyesini taşımasını gerektirir: koparıldığında ne zaman ve kim tarafından yazıldığı da onunla birlikte gitmelidir. İki öge bu bilgiyi makinece okunabilir kılar.

time ögesi bir tarihi veya süreyi işaretler. Görünen metin serbest yazılabilir; datetime özniteliği aynı değeri tanımlı bir biçimde taşır.

<article>
  <h3>Nem sensörü yeniden ayarlandı</h3>
  <p>Referans değere göre yüzde iki sapma düzeltildi.</p>
  <footer>
    <p>Kayıt tarihi: <time datetime="2024-03-12T07:30">12 Mart sabahı</time></p>
    <address>Gözlemci: A. Yılmaz</address>
  </footer>
</article>

datetime değerinin biçimi tanımlıdır: tarih YYYY-AA-GG, saat SS:DD düzeninde yazılır ve ikisi T ile birleşir. Bu biçim, “12 Mart sabahı” gibi serbest bir yazımdan sıralama ve karşılaştırma yapılamayacağı için gereklidir.

address ögesi bir adres değil, iletişim bilgisidir: bulunduğu makalenin (ya da en üst düzeyde belgenin) yazarına ulaşma yolunu işaretler. Bir posta adresini işaretlemek için kullanılmaz.

Karar Ölçütleri

Sıralı bir denetim, çoğu durumu çözer.

Soru	Yanıt evetse
İçerik koparıldığında tek başına anlamlı mı?	article
Belgenin bir konusunu ayıran, başlığı olan bir bölüm mü?	section
Ana içerikten koparılabilir, dolaylı ilişkili bir ek mi?	aside
Yalnızca sunum için gruplama mı?	div

İlk üç soruya “hayır” veriliyorsa öge gereksizdir. Anlamsal öge eklemek her zaman bir iyileştirme değildir: yanlış bildirim, hiç bildirim yapmamaktan daha zararlıdır çünkü belgeyi okuyan araç ona güvenir.

Bir başka sık hata, her div ögesini section ile değiştirmektir. Bu, yer imi listesini anlamsız girişlerle doldurur — ya da adsız oldukları için hiçbir şey eklemez ve yalnızca kaynak metni büyütür.

İstasyon Belgesinde

Ölçüm istasyonu sayfasında iki yapı bir arada bulunur.

<main id="ana-icerik">
  <h1>Kuzey Yamaç Ölçüm İstasyonu</h1>

  <section aria-labelledby="olculen">
    <h2 id="olculen">Ölçülen Büyüklükler</h2>
    <ul>
      <li>Sıcaklık</li>
      <li>Bağıl nem</li>
    </ul>
  </section>

  <section aria-labelledby="kayitlar">
    <h2 id="kayitlar">Kalibrasyon Kayıtları</h2>

    <article>
      <h3>Nem sensörü yeniden ayarlandı</h3>
      <p>Referans değere göre yüzde iki sapma düzeltildi.</p>
      <footer><p>Gözlemci: A. Yılmaz</p></footer>
    </article>

    <article>
      <h3>Rüzgâr ölçer yatağı değiştirildi</h3>
      <p>Düşük hızlarda takılma gözlenmişti.</p>
      <footer><p>Gözlemci: A. Yılmaz</p></footer>
    </article>
  </section>
</main>

“Ölçülen Büyüklükler” bir bölümdür: koparıldığında hangi istasyonun büyüklükleri olduğu kaybolur. Her kalibrasyon kaydı ise bir makaledir: tarih, işlem ve gözlemci bilgisiyle birlikte başka bir belgede —örneğin ağ genelindeki bir kayıt akışında— tek başına yayımlanabilir.

İç footer ögeleri, önceki derste belirtildiği gibi belgenin alt bilgisi değildir; bulundukları makalenin alt bilgisidir ve yer imi listesine girmezler.

Özet

• article, bulunduğu belgeden koparıldığında anlamını koruyan içerik birimidir; ölçüt içeriğin türü değil, bağımsız dağıtılabilirliğidir.
• section, belgenin bir konusunu ayıran tematik gruplamadır ve anlamını belgeyle ilişkisinden alır.
• Başlığı olmayan bir section yer imi listesinde görünmez ve neyi ayırdığını bildirmez.
• Makaleler iç içe olabilir; içteki makale dıştakiyle ilişkilidir ama kendi başına da anlamlıdır.
• Yanlış anlamsal öge, öge yazmamaktan daha zararlıdır; ilk üç ölçüte uymayan gruplamalar div ile yazılır.

Sonraki Adım

Belge bölümlendi ama hâlâ yalnızca metinden oluşuyor. Ölçüm istasyonu sayfasının konumu bir görselle anlatılmalı ve bu görsel, göremeyen okuyucu için de bir karşılık taşımalıdır. Sonraki ders görsel ögesini ele alır: alternatif metnin ne söylemesi gerektiğini, boyut bildiriminin yerleşimi nasıl etkilediğini ve aynı görselin farklı ekranlar için farklı boyutlarda nasıl sunulduğunu.