--- title: 'Anlamsal Bölüm Etiketleri' source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/anlamsal-bolum-etiketleri' course: "Web'in Temelleri ve HTML" language: tr updated: '2026-08-17T18:09:33+00:00' license: 'CC BY-SA 4.0' --- # Anlamsal Bölüm Etiketleri Başlık, gezinme, ana içerik ve alt bilgi ögelerinin yer imi rollerine karşılığı, bölümlere ad verme ve anlamsız kapsayıcının yeri. Önceki konu belgenin iskeletini kurdu: başlıklar, metin, listeler, bağlantılar, tablolar. Bu bildirimlerin hiçbiri belgenin **bölümlerini** adlandırmıyor. Gezinme nerede bitiyor, ana içerik nerede başlıyor, alt bilgi hangisi? Bu ders o soruyu yanıtlayan ögeleri ele alır. Ögelerin görünüme etkisi yok denecek kadar azdır; kazandırdıkları şey, belgeye bir üst düzey harita eklemektir. ## Bölüm Ögesi Ne Bildirir Bir belgenin okuyucusu ekranı görüyorsa bölümleri düzenden çıkarır: üstteki şerit başlık, yandaki sütun gezinme, ortadaki alan içeriktir. Bu çıkarım görsel ipuçlarına dayanır ve belgenin kendisinde bildirilmemiştir. Anlamsal bölüm ögeleri bu çıkarımı bildirime çevirir. Belgeye "burası gezinme" denildiğinde o bilgi görsel olmayan araçlara da açılır: ekran okuyucu kullanıcıları bölümden bölüme atlayabilir, okuma kipleri ana içeriği ayırabilir, dizinleyiciler gezinme bağlantılarını içerik bağlantılarından ayırabilir. Bu bilginin taşındığı yapıya **erişilebilirlik ağacı (accessibility tree)** denir. Belge Nesne Modeli dersindeki ağaçtan türetilir ve her ögeyi bir **rol**, bir **ad** ve bir **durum** üçlüsüyle karşılar. Bölüm ögeleri bu ağaçta **yer imi (landmark)** rolleri üretir. ## Yer İmi Rolleri Karşılıklar tanımlıdır ve bir bölümü koşullar. Aşağıdaki betik kuralları uygular. ```js // alanlar.mjs — bolum ogelerinin yer imi rollerine karsiligi const ROL = { header: "banner", // yalnizca belgenin en ust duzeyinde nav: "navigation", main: "main", aside: "complementary", footer: "contentinfo", // yalnizca belgenin en ust duzeyinde form: "form", // yalnizca erisilebilir adi varsa section: "region", // yalnizca erisilebilir adi varsa article: "article", div: null, }; const belge = [ { ad: "header", derinlik: 1 }, { ad: "nav", derinlik: 2, etiket: "Ana gezinme" }, { ad: "main", derinlik: 1 }, { ad: "section", derinlik: 2, etiket: "Günlük ölçümler" }, { ad: "section", derinlik: 2 }, { ad: "aside", derinlik: 2, etiket: "İstasyon künyesi" }, { ad: "div", derinlik: 2 }, { ad: "footer", derinlik: 1 }, { ad: "footer", derinlik: 3 }, ]; for (const oge of belge) { let rol = ROL[oge.ad]; if ((oge.ad === "header" || oge.ad === "footer") && oge.derinlik > 1) rol = null; if ((oge.ad === "section" || oge.ad === "form") && !oge.etiket) rol = null; const ad = oge.etiket ? ' ("' + oge.etiket + '")' : ""; console.log((" ".repeat(oge.derinlik - 1) + oge.ad + ad).padEnd(34), rol ?? "— yer imi degil"); } console.log("--- yer imi listesi ---"); const yerImleri = belge .map((oge) => { let rol = ROL[oge.ad]; if ((oge.ad === "header" || oge.ad === "footer") && oge.derinlik > 1) rol = null; if ((oge.ad === "section" || oge.ad === "form") && !oge.etiket) rol = null; return rol ? rol + (oge.etiket ? ": " + oge.etiket : "") : null; }) .filter(Boolean); console.log(yerImleri.join("\n")); ``` ``` header banner nav ("Ana gezinme") navigation main main section ("Günlük ölçümler") region section — yer imi degil aside ("İstasyon künyesi") complementary div — yer imi degil footer contentinfo footer — yer imi degil --- yer imi listesi --- banner navigation: Ana gezinme main region: Günlük ölçümler complementary: İstasyon künyesi contentinfo ``` Çıktının son bölümü, ekran okuyucu kullanıcısının gördüğü listedir. Belgenin haritasıdır ve kullanıcı buradan doğrudan bir bölüme atlayabilir. Üç koşul dikkat gerektirir. `header` ve `footer` ögeleri yalnızca **belgenin en üst düzeyinde** yer imi üretir; bir makalenin içindeki alt bilgi bir yer imi değildir, o makalenin alt bilgisidir. `section` ögesi ancak bir **adı** olduğunda yer imi üretir; adsız bir bölüm listede görünmez. `div` hiçbir koşulda yer imi üretmez. Betikteki `aside` karşılığı, ögenin belgenin ana akışında durduğu durumu yansıtır. Bir makalenin ya da bölümün **içine** yuvalanmış `aside` için eşleme koşulludur: o konumda yer imi sayılması erişilebilir bir ad taşımasına bağlıdır. Kural, `section` için yukarıda verilen koşulun aynısıdır ve nedeni de aynıdır — adsız bir bölge, listede ayırt edilemeyeceği için listeye alınmaz. ## Ögeler `header` bir tanıtım bloğudur: başlık, alt başlık, künye. En üst düzeyde belgenin tanıtımıdır; bir makalenin içinde o makalenin tanıtımıdır. `nav` gezinme bağlantılarını taşır. Belgedeki her bağlantı grubunun `nav` olması gerekmez — öge, belgenin **birincil** gezinme bloklarını işaretler. Bir paragrafın içindeki bağlantılar gezinme değildir. `main` belgenin ana içeriğidir ve belgede bir kez bulunur. İçinde gezinme, alt bilgi veya site geneline yayılan tekrar eden içerik bulunmaz; yalnızca o belgeye özgü içerik bulunur. `aside` ana akışla dolaylı ilişkili içeriktir: yan not, künye kutusu, ilgili bağlantılar. Ölçüt, çıkarıldığında ana içeriğin anlamını yitirmemesidir. `footer` bir bölümün kapanış bilgisidir: yazar, telif, ilgili belgeler. En üst düzeyde belgenin, bir makalenin içinde o makalenin alt bilgisidir. ## Bölüme Ad Vermek Aynı türden birden çok yer imi varsa —iki gezinme bloğu gibi— hangisinin hangisi olduğu adla ayrılır. İki yol vardır. ```html ``` `aria-label` adı doğrudan yazar; belgede görünmez. `aria-labelledby` adı belgede zaten bulunan bir ögenin metninden alır ve bu yeğlenir: ad ile görünen başlık ayrışmaz. Ad yazarken rol adı tekrarlanmaz. `aria-label="Ana gezinme menüsü"` yazımı ekran okuyucuda "ana gezinme menüsü gezinme" biçiminde duyurulur; rol zaten ögeden gelir. ## Atlama Bağlantısı Klavyeyle gezen bir kullanıcı, her sayfada gezinme bağlantılarının tamamını geçerek ana içeriğe varır. Bunu kısaltan yapı, belgenin ilk odaklanabilir ögesi olarak yazılan bir bağlantıdır. ```html Ana içeriğe atla

Kuzey Yamaç Ölçüm İstasyonu

``` Bağlantı çoğunlukla sunum katmanında gizlenir ve yalnızca odaklandığında görünür duruma gelir. Hedefin kimliği, `main` ögesinin kendisinde bulunur. ## Anlamsız Kapsayıcı Ne Zaman `div` ve `span` ögeleri hiçbir anlam bildirmez. Varlıklarının gerekçesi, her gruplamanın anlamlı olmamasıdır: bir kutuyu ortalamak, bir arka plan vermek, bir sunum grubu kurmak için ögeye ihtiyaç vardır ve bu ögenin belgeye yanlış bir bildirim eklememesi gerekir. Seçim ölçütü şudur: bu grup, belgenin yapısı hakkında bir şey söylüyor mu? Söylüyorsa anlamsal öge, söylemiyorsa `div` kullanılır. Yalnızca sunum için `section` yazmak, yer imi listesine anlamsız bir giriş ekler — ya da adsız olduğu için hiçbir şey eklemez ve öge gereksiz kalır. `div` blok düzeyinde, `span` metin akışı içinde gruplar. İkisi de sunum katmanının tutamağıdır. ## İstasyon Belgesinde ```html Ana içeriğe atla

Ölçüm Ağı

Kuzey Yamaç Ölçüm İstasyonu

Deniz seviyesinden 1840 metre yükseklikte kurulu otomatik ölçüm istasyonu.

Ölçülen Büyüklükler

``` Belgenin yer imi listesi bu noktada beş girişlidir ve bu liste, önceki konuda kurulan başlık ana hattından ayrı bir gezinme düzlemidir. İkisi birbirini tamamlar: yer imleri belgenin kaba bölümlerini, başlıklar bölümlerin içindeki hiyerarşiyi verir. ## Özet - Anlamsal bölüm ögeleri, görsel düzenden çıkarılan bölüm bilgisini belgede bildirime çevirir ve erişilebilirlik ağacında yer imi rolleri üretir. - `header` ve `footer` yalnızca belgenin en üst düzeyinde yer imi üretir; `section` ancak adı varsa üretir; `div` hiçbir koşulda üretmez. - `main` belgede bir kez bulunur ve yalnızca o belgeye özgü içeriği taşır. - Aynı türden birden çok yer imi adla ayrılır; adın belgede görünen bir başlıktan alınması yeğlenir ve ada rol adı yazılmaz. - Anlam bildirmeyen gruplamalar için `div` ve `span` kullanılır; sunum amacıyla anlamsal öge yazmak belgeye yanlış bildirim ekler. ## Sonraki Adım Bu ders `section` ögesini adlandırılmış bir bölüm olarak kullandı ve `article` ögesini yer imi tablosunda gösterdi ama ayrımı açmadı. İkisi arasındaki seçim en sık yanlış yapılan anlamsal karardır. Sonraki ders bu ayrımı tanımlar ve bir bölümün kendi başına anlamlı olup olmadığını sınayan ölçütü verir.