Semantik HTML

 

🎯 Semantik HTML Nedir?

Semantik HTML, bir etiketin ne işe yaradığını ve anlamını açıkça belirtmesidir.
Bu sayede:

• 🔍 Arama motorları sayfayı daha iyi anlar (SEO)

• ♿ Ekran okuyucular içeriği doğru okur (Accessibility)

• 🧠 Kod okunabilirliği ve bakım kolaylığı artar

---

1️⃣ Bölümleme (Yapısal) Etiketleri

<header>

• Bir sayfanın veya bölümün üst kısmıdır

• Logo, başlık, giriş yazısı içerebilir

• ❌ Tüm sayfa için birden fazla olabilir

ARIA:
Genellikle gerekmez (role="banner" otomatik gelir)

---

<nav>

• Gezinme menüsünü tanımlar

• Menü, link listeleri

ARIA:

<nav aria-label="Ana Menü">

Birden fazla <nav> varsa zorunlu

---

<main>

• Sayfanın tek ve ana içeriği

• Sayfada yalnızca 1 tane olmalı

ARIA:
Gerekmez (role="main" otomatik)

---

<section>

• Anlamsal bir konu bölümü

• Genelde bir başlık (h2-h6) içerir

İpucu:
Sadece CSS için kullanma ❌
Anlamı varsa kullan ✔️

---

<article>

• Bağımsız içerik

• Blog yazısı, haber, ürün kartı

Test:

“Bu içeriği tek başına paylaşabilir miyim?”
Evet → <article>

---

<aside>

• Ana içerikle dolaylı ilişkili

• Reklam, önerilen içerik, sidebar

ARIA:

<aside aria-label="İlgili İçerikler">

---

<footer>

• Sayfanın veya bölümün alt kısmı

• Telif hakkı, yasal linkler, ikincil menüler

---

<details> & <summary>

• Açılıp kapanan içerik

<details>
  <summary>Daha fazla bilgi</summary>
  İçerik burada
</details>

ARIA:
Otomatik desteklidir ✔️

---

<h1> – <h6>

• Başlık hiyerarşisi

• <h1> en önemli, <h6> en az önemli

Altın Kural:
❌ Atlama yapma (h1 → h3)
✔️ Sıralı kullan

---

2️⃣ İçerik Etiketleri

<p>

• Paragraf

---

<blockquote>

• Uzun alıntı

<blockquote cite="kaynak">

---

<q>

• Kısa alıntı (tırnaklı)

---

<dl>, <dt>, <dd>

• Terim – açıklama listesi

<dl>
  <dt>HTML</dt>
  <dd>İşaretleme dili</dd>
</dl>

---

<figure> & <figcaption>

• Görsel + açıklama

---

<pre>

• Önceden biçimlendirilmiş metin

• Kod, ASCII çizimler

---

<hr>

• Konu değişimini gösterir
  ❌ Sadece çizgi diye kullanma

---

3️⃣ Satır İçi (Inline) Etiketler

<strong>

• Önem vurgusu (kalın)

<em>

• Anlam vurgusu (italik)

---

<b> & <i>

• Sadece görsel stil

• Anlam yok

---

<abbr>

• Kısaltma

<abbr title="HyperText Markup Language">HTML</abbr>

---

<code>

• Kod parçaları

---

<mark>

• Vurgulu metin (fosforlu)

---

<time>

• Tarih / saat

<time datetime="2026-01-23">23 Ocak 2026</time>

---

<span>

• Anlamsız, sadece stil veya JS için
  ❌ Gereksiz kullanma

---

<sub> & <sup>

• Alt / üst simge
  H₂O, m² gibi

---

4️⃣ Medya ve Gömülü İçerik

<img>

• Görsel

ARIA / Accessibility (ÇOK ÖNEMLİ):

<img src="logo.png" alt="Şirket logosu">

---

<audio> & <video>

• Ses / video

İpucu:
Her zaman <controls> ekle

---

<picture> & <source>

• Responsive görseller

---

<iframe>

• Harici sayfa gömme

ARIA:

<iframe title="Harita"></iframe>

---

<canvas>

• JS ile çizim

• Erişilebilirlik zayıf, dikkatli kullan

---

<svg>

• Vektörel grafik

• Erişilebilirlik için <title> eklenmeli

---

5️⃣ Tablo Etiketleri

<table>

• Tablo kapsayıcısı

---

<caption>

• Tablo başlığı (ÇOK ÖNEMLİ)

---

<thead>, <tbody>, <tfoot>

• Tablo bölümleri

---

<tr>

• Satır

---

<td>

• Veri hücresi

---

<th>

• Başlık hücresi

ARIA / Accessibility:

<th scope="col">Fiyat</th>
<th scope="row">Ürün A</th>

---

<colgroup> & <col>

• Sütun bazlı biçimlendirme

---

📌 ARIA Ne Zaman Gerekli?

✔️ Semantik etiket yoksa
✔️ Aynı etiket birden fazlaysa
✔️ Özel bileşen (custom UI) varsa

❌ Semantik HTML varsa gereksiz

---

🧠 Altın Kurallar (Sınav & Gerçek Hayat)

• Önce HTML anlamı, sonra CSS

• <div> son çare

• <span> = stil / JS

• Her görselin alt metni olmalı

• Başlık hiyerarşisi bozulmaz