Semantik HTML Nedir ve Neden Önemlidir

Semantik HTML, doğru HTML öğesini doğru iş için kullanmak anlamına gelir. Bir <button> eylemleri tetiklemelidir; bir <a> gezinme sağlamalıdır. Bir <table> tablosal veriyi temsil etmeli, düzeni kontrol etmemelidir. <h1> görsel olarak büyütülmüş metin değil, sayfanın birincil konusu olmalıdır. Öğeler yalnızca etiket adları aracılığıyla anlam taşıdığında, hem makineler (tarayıcılar, ekran okuyucular) hem de insanlar (geliştiriciler, içerik editörleri) sayfayı daha iyi anlar.

Web bu ilke üzerine inşa edildi, ancak yıllar süren div odaklı geliştirme bu ilkeyi aşındırdı. Modern HTML5, işaret noktası öğeleriyle semantik işaretlemeyi yeniden canlandırdı; geliştiricilere yalnızca ARIA veya CSS sınıf adlarına dayanmadan belge yapısını ifade etmek için zengin bir söz dağarcığı sundu.

Başlık Yapısı: SEO ve Gezinmenin Omurgası

Başlıklar sayfanızın ana hatlarını oluşturur. Arama motorları, içerik hiyerarşisini anlamak ve öne çıkan snippet'ler ile yapay zeka genel bakışları oluşturmak için h1–h3 başlıklarınızı çıkarır. Ekran okuyucu kullanıcıları başlıklar arasında atlayarak gezinir ve başlıklar onların içeriği taramak ve atlamak için birincil yoludur.

Sayfa başına tam olarak bir <h1> kullanın; birincil konuyu/anahtar kelimeyi içersin.
Mantıksal bir hiyerarşi izleyin: h1 → h2 → h3 — asla düzeyleri atlamayın.
Başlıkları açıklayıcı ve benzersiz tutun — aynı sayfada yinelenen h2 metninden kaçının.
Görsel stil için başlıkları kullanmayın; bunun yerine CSS sınıflarını kullanın.

HTML5 İşaret Noktası Öğeleri

İşaret noktası öğeleri bir sayfayı gezilebilir bölgelere ayırır. Doğrudan HTML'e yerleştirilmiş bir "içeriğe atla" mekanizmasının eşdeğeridirler. Arama motorları bunları birincil içerik alanını gezinme ve yardımcı içerikten ayırt etmek için kullanır.

<header> — Giriş içeriği, site markası, birincil gezinme.
<nav> — Gezinme menüleri. Birden fazla nav öğesini ayırt etmek için aria-label kullanın.
<main> — Sayfanın baskın içeriği. Sayfa başına yalnızca bir tane.
<article> — Bağımsız olarak var olabilecek kendi kendine yeten içerik.
<section> — Bir belge içindeki tematik gruplandırma.
<aside> — Yan bilgi çubukları, ilgili bağlantılar gibi dolaylı olarak ilgili içerik.
<footer> — Sayfanın veya en yakın bölümleme atasının altbilgi içeriği.

Listeler: Tarayıcıların Sevdiği Semantik Gruplamalar

Sırasız listeler (<ul>) ve sıralı listeler (<ol>), öğelerin ilişkili olduğunu ve ağırlık bakımından eşdeğer olduğunu arama motorlarına bildirir. Bu, gezinme menüleri, özellik listeleri, adım adım talimatlar ve öğeler arasındaki ilişkilerin önemli olduğu her içerik için özellikle önemlidir.

Tablolar: Veri ve Düzen

Tablolar yalnızca tablosal veri içermelidir — düzen için asla <table> kullanmayın. <caption>, <thead>, <th scope="col"> ve <tbody> ile düzgün işaretlenmiş bir veri tablosu, ekran okuyuculara hücreleri başlıklarıyla ilişkili olarak okumak için ihtiyaç duydukları tüm bağlamı sağlar.

<!-- Minimal erişilebilir veri tablosu -->
<table>
  <caption>WCAG Uyumluluk Seviyesi Karşılaştırması</caption>
  <thead>
    <tr>
      <th scope="col">Seviye</th>
      <th scope="col">Kriter Sayısı</th>
      <th scope="col">Yasal Uyumluluk İçin Gerekli</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>30</td><td>Evet</td></tr>
    <tr><td>AA</td><td>20</td><td>Evet (WCAG 2.1 AA)</td></tr>
    <tr><td>AAA</td><td>28</td><td>Önerilen</td></tr>
  </tbody>
</table>

Formlar: Açık Etiketler Vazgeçilmezdir

Her form kontrolünün programlı olarak ilişkilendirilmiş bir etiketi olmalıdır. <label for="id"> kalıbı en güvenilir yöntemdir. Yer tutucu metin bir etiket yerine geçemez — girişte kaybolur, düşük kontrastlıdır ve tüm ekran okuyucular tarafından tutarlı biçimde duyurulmaz.

<!-- Kötü: yer tutucu etiket olarak kullanılmış -->
<input type="email" placeholder="E-posta adresi">

<!-- İyi: açık etiket ilişkilendirmesi -->
<label for="email">E-posta adresi</label>
<input type="email" id="email" name="email" autocomplete="email">

Mikroveri ve Schema.org

Semantik HTML yapısal temeli oluşturur; schema.org JSON-LD bunun üzerine makine tarafından okunabilir bir semantik katman ekler. Article, BreadcrumbList, FAQPage veya HowTo şemalarını eklemek, Google Arama'da zengin sonuçları etkinleştirir ve içeriğinizin yapay zeka tarafından üretilen yanıtlarda alıntılanabilirliğini artırır.

SEO ve Erişilebilirlik için Semantik HTML