Anlamsal Etiketler: header nav main article footer

Anlamsal HTML, öğelerin yalnızca görünümünü değil, içeriğin anlamını açıklayan öğeleri kullanır. <article>, "bu, kendi başına yeterli bir içerik parçasıdır" der. Genel amaçlı bir <div> ise hiçbir şey ifade etmez.

İlk dönem web geliştiricileri yerleşimleri tamamen <div> ve <span> öğeleriyle oluşturuyordu. Ekran okuyucuları gezinmeyi, içeriği ve reklamları birbirinden ayıramıyordu. Arama motorları sayfa yapısını tahmin etmek zorunda kalıyordu.

<header> öğesi, sayfa veya bölüm için tanıtıcı içerik barındırır: genellikle logo, site adı ve gezinme. Bir sayfada birden fazla üst bilgi bulunabilir — biri site için, her makale için de bir tane.

Ana menü, kırıntı izi veya içindekiler tablosu gibi gezinme bağlantısı kümelerini sarmalamak için <nav> kullanın. Ekran okuyucuları nav yer işaretlerini duyurur; böylece kullanıcılar bunlara doğrudan geçebilir veya bunları atlayabilir.

Her sayfada tam olarak bir <main> bulunmalıdır. Bu öğe, bu sayfaya özgü baskın içeriği barındırır; gezinme veya alt bilgi gibi tekrarlanan öğeleri içermez. Yardımcı teknolojiler, kullanıcıların doğrudan main öğesine geçmesini sağlar.

<article>, kendi başına anlamlı olan ve başka yayınlarda da dağıtılabilecek içeriği sarar: bir blog yazısı, haber öğesi, kullanıcı yorumu veya ürün kartı. Şunu sorun: "Bunu başka bir siteye kopyalasaydım yine anlamlı olur muydu?"

<section>, birlikte bulunması gereken ilişkili içerikleri gruplar — bölümler, sekmeler veya konu alanları gibi. Her bölümün genellikle bir başlığı olur. İçerik kendi başına durabiliyorsa bunun yerine article kullanın.

<aside>, çevresindeki içerikle dolaylı olarak ilişkili içeriği barındırır: kenar çubukları, öne çıkarılmış alıntılar, reklamlar veya ilgili bağlantılar. Ekran okuyucuları bunu tamamlayıcı bir yer işareti olarak sunar.

<footer>, kendisini içeren öğe hakkındaki bilgileri barındırır: telif hakkı bildirimleri, iletişim bağlantıları ve ilgili belgeler. Üst bilgi gibi, bir sayfada birden fazla alt bilgi bulunabilir.

Mantıksal bir belge ana hattı oluşturmak için başlıkları kullanın. Sayfa başına yalnızca bir <h1> bulunmalıdır. Alt başlıklar için h2, bunların alt başlıkları için h3 kullanın ve bu şekilde devam edin. Düzeyleri atlamayın veya başlıkları yalnızca görsel boyutları için kullanmayın.

Arama motorları, sayfa içeriğini anlamak için anlamsal yapıdan yararlanır; doğru yer işaretlerine ve başlık hiyerarşisine sahip sayfalar genellikle daha iyi sıralanır. Ekran okuyucusu kullanıcıları yer işaretleri ve başlıklarla gezinir; bu nedenle anlamsallık doğrudan bir erişilebilirlik konusudur.

Bir sayfanın birincil benzersiz içeriğini (tam olarak bir kez bulunan) hangi öğe sarmalamalıdır?

Belgenize tarayıcıların, arama motorlarının ve ekran okuyucularının anlayacağı bir yapı kazandırmak için <header>, <nav>, <main>, <article>, <section>, <aside> ve <footer> kullanın.