HTML'de semantiksel öğeler nedir ve ne işe yararlar?

HTML'deki anlamsal öğeler, içeriklerini çevreleyen ve yalnızca görünümünü değil, aynı zamanda anlamını da tanımlayan <header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details> gibi etiketlerdir.

Ana amaç:

• Erişilebilirlik: Yardımcı teknolojilerin (ekran okuyucular) sayfanın yapısını ve içeriğini anlamasına yardımcı olur, böylece içerik engelli kullanıcılar için erişilebilir hale gelir.
• SEO (Arama Motoru Optimizasyonu): Arama motorları, semantik işaretleme içeren sayfaları daha iyi indeksler ve sıralar, çünkü ana içeriği ve sorgularla ilgisini daha doğru belirleyebilirler.
• Geliştirme ve bakım: Kodun okunabilirliğini ve sürdürülebilirliğini artırır, böylece sayfa yapısı diğer geliştiriciler (ve kendiniz) için daha anlaşılır hale gelir.
• Yapının daha iyi anlaşılması: Sayfanın mantıksal bloklarını (navigasyon, ana içerik, altbilgi vb.) net bir şekilde ayırmaya olanak tanır.

Örnek anlamsal olmayan işaretleme:

<div>
  <h2>Makale Başlığı</h2>
  <p>Makale içeriği...</p>
</div>
<div>
  <h3>Yan Menü</h3>
  <p>Yan menü bilgisi...</p>
</div>

Örnek anlamsal işaretleme:

<article>
  <h2>Makale Başlığı</h2>
  <p>Makale içeriği...</p>
</article>
<aside>
  <h3>Yan Menü</h3>
  <p>Yan menü bilgisi...</p>
</aside>

Semantik öğelerin kullanımı, daha yapılandırılmış, erişilebilir ve arama motorları için optimize edilmiş web sayfaları oluşturmaya katkıda bulunur.