HTML

HTML Nedir

HTML, bir sayfanın içeriğini ve yapısını tarayıcıya anlatan işaretleme dilidir. Başlık, paragraf, link, görsel, form gibi her parça bir element ile yazılır. Bir element açılış etiketi, içerik ve kapanış etiketinden oluşur; ayarlar açılış etiketine attribute olarak eklenir.¹

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8" />
    <title>Sayfa başlığı</title>
  </head>
  <body>
    <p>Merhaba <strong>dünya</strong>.</p>
    <img src="kedi.jpg" alt="Pencerede uyuyan gri bir kedi" />
  </body>
</html>

<head> kullanıcının görmediği bilgileri (başlık, karakter seti) taşır, <body> ekranda görünen her şeyi içerir. <img> ve <br> gibi void elementlerin içeriği ve kapanış etiketi yoktur. Elementler düzgün iç içe yazılmalıdır: <p><strong>…</strong></p> doğru, <p><strong>…</p></strong> yanlıştır.¹

Semantic HTML

Semantic HTML, etiketi nasıl göründüğüne göre değil ne anlama geldiğine göre seçmektir.² <div> ve <span> tarayıcıya ve yardımcı araçlara içerik hakkında hiçbir şey söylemez. <nav>, <button> ya da <h2> ise ne olduklarını söyler.

Bu önemlidir, çünkü tarayıcı HTML'den bir erişilebilirlik ağacı (accessibility tree) üretir ve ekran okuyucular sayfayı buradan okur. Anlamlı etiketler sayfaya gezinilebilir bölümler (landmark) kazandırır.² Görünüş ise HTML'in değil CSS'in işidir; bir etiketi varsayılan stili hoşunuza gidiyor diye seçmeyin.²

Ölçek büyüktür: 2026'da bir milyon ana sayfanın %53,1'inde görsellerde alternatif metin, %51'inde form alanlarında etiket eksikti.³ Çoğu, doğru etiket seçilseydi çıkmayacak hatalardır.

Sayfa İskeleti

Bir sayfayı bölmek için kullanılan başlıca etiketler şunlardır:⁴

<body>
  <header>
    <nav>…</nav>
  </header>
  <main>
    <article>
      <h1>Yazının başlığı</h1>
      <p>…</p>
    </article>
    <aside>İlgili yazılar</aside>
  </main>
  <footer>…</footer>
</body>

HTML Standard'a göre <section> genel amaçlı bir kutu değildir; yalnızca stil vermek için bir kapsayıcı gerekiyorsa <div> kullanılır.⁵ Üstteki <header> ve <footer> sayfa düzeyinde landmark olur, <article> ya da <section> içindekiler olmaz.⁶

Başlıklar

<h1>'den <h6>'ya kadar altı başlık seviyesi vardır. Başlıklar sayfanın içindekiler tablosu gibidir; ekran okuyucu kullanıcıları başlıklar arasında atlayarak gezinir.⁷

Doğru Etiketi Seçmek

Button ve link

Link bir başka yere götürür, buton bulunduğunuz sayfada bir işlem yapar (menü açmak, formu göndermek gibi).⁹

<a href="/fiyatlar">Fiyatları gör</a>
<button type="button">Menüyü aç</button>

<div onclick="…"> ile buton yapmak kolay görünür ama klavyeyle odaklanma, Enter ve Space ile çalışma gibi tarayıcının bedavaya verdiği her şeyi kaybettirir; sonra hepsini elle yazmanız gerekir.⁷¹⁰

Form alanları

Her form alanının bir <label>'ı olmalıdır. Etiket alanın ne için olduğunu ekran okuyucuya söyler, ayrıca tıklayınca alana odaklanır.¹¹

<label for="email">E-posta</label>
<input id="email" type="email" name="email" />

Görseller

alt görselin ilettiği bilgiyi kısa anlatır. Görsel süs içinse alt="" bırakılır; böylece ekran okuyucu atlar. Link ya da buton içindeki görselin alt metni gideceği yeri ya da yaptığı işi anlatır.¹²

Link metni

"Buraya tıklayın" yerine tek başına okunduğunda anlamlı bir metin yazın: "Balinalar hakkında daha fazla bilgi".⁷

ARIA'dan Önce HTML

ARIA, HTML'in yetmediği durumlarda elemente rol ve durum ekleyen özelliklerdir (role, aria-label). W3C'nin ilk kuralı şudur: gereken anlam ve davranışı veren yerel bir HTML elementi varsa ARIA eklemek yerine onu kullanın.¹³ role="button" yalnızca anlam ekler, klavye davranışını eklemez.² Veriler de ARIA kullanan sayfalarda ortalama hatanın daha yüksek çıktığını gösteriyor (59,1'e karşılık 42), karmaşık sayfaların daha çok ARIA kullanması bunun bir kısmını açıklayabilir.³

Detaylı Öğrenmek İçin

• Baştan sona kurs: web.dev'in ücretsiz Learn HTML kursu.¹⁴

• Her etiketin tanımı: MDN'in element listesi, işlevine göre gruplanmış.¹⁵

• Kendi sayfanı kontrol et: W3C'nin Nu Html Checker doğrulayıcısı.¹⁶

• Konuşma: Jen Luker'ın button ve div konuşması (12 dk).¹⁰

• Konuşma: Marcy Sutton'ın link ve buton konuşması.¹⁷