Bir sayfadaki içeriği nasıl anlamsal olarak ayırırsınız?

İçeriğin anlamsal ayrımı, uygun HTML5 etiketlerinin kullanılmasıyla sağlanır.

Ana anlamsal etiketler:

• <header>: Giriş veya gezinme veya giriş öğeleri grubudur. Sık sık site başlığı, gezinme, logo içerir.
• <nav>: Navigasyon bağlantıları bloğu.
• <main>: Belgenin ana içeriği. Sayfada benzersiz olmalıdır (altbilgi, başlık, yan menüde tekrarlanmamalıdır).
• <article>: Kendine yeterli, bağımsız içerik parçası (makale, blog gönderisi, yorum).
• <section>: Belgeden ayrı bir bölüm (bölüm, paragraf, ana sayfadaki içerik bloğu). Bir başlık (<h1>-<h6>) olmalıdır.
• <aside>: Ana içerikle dolaylı olarak ilişkili içerik kısmı (yan menü, alıntı kutusu, reklam).
• <footer>: Bölüm veya belgenin altbilgisi. Genellikle yazar bilgisi, telif hakkı, ilgili belgelere bağlantılar içerir.
• <figure>: Bağımsız içerik (resim, diyagram, tablo), anlamını kaybetmeden belgenin ana akışından taşınabilir. Sık sık <figcaption> ile kullanılır.
• <figcaption>: <figure> öğesine açıklama.
• <mark>: Metni vurgular (işaretler), çevresindeki metin bağlamında özel bir anlam veya ilgi taşır.
• <time>: Belirli bir zamanı veya zaman aralığını temsil eder.

Anlamsal etiketlerin kullanımı erişilebilirliği, SEO'yu ve kodun bakımını artırır. Arama motorları ve yardımcı teknolojiler (ekran okuyucular) sayfanın yapısını daha iyi anlar.