Web geliştirme dünyasına adım atan herkesin ilk karşılaştığı kavramlardan biri HTML'dir. Bende ilk başladığımda HTML ile statik sayfalar yapıyordum. Not defterinde ve o zamanlar Microsoftun geliştirmiş olduğu Frontpage arayüz geliştirme programı vardı. Statik projelerde hazır eklentileriyle çok kolayca bir web sitesi yapılabiliyordu. Bu makalede, HTML'nin ne olduğunu, tarihçesini, temel yapısını, etiketlerini, özelliklerini (attributes), semantik kullanımını, formları, multimedya entegrasyonunu, erişilebilirlik özelliklerini, HTML5 yeniliklerini ve pratik örneklerini uzun ve detaylı bir şekilde ele alacağız. Amacımız, sıfırdan başlayanlar için temel bir rehber oluşturmakken, deneyimli geliştiricilere de hatırlatma niteliğinde bilgiler sunmak. HTML, web'in temel yapı taşıdır ve CSS ile JavaScript gibi teknolojilerle birleştiğinde dinamik web siteleri oluşturmanın anahtarı olur. Hazırsanız, başlayalım!

HTML Nedir ve Neden Önemlidir?

HTML, yani "HyperText Markup Language" (Hiper Metin İşaretleme Dili), web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan bir işaretleme dilidir. Programlama dili değil, bir metin biçimlendirme sistemidir; yani kendi başına çalışmaz, ancak web tarayıcıları tarafından yorumlanarak görsel bir sayfaya dönüştürülür. HTML, metin, görüntü, video gibi içerikleri yapılandırır ve sayfalar arası bağlantılar (hiperlinkler) oluşturur. "Hypertext" terimi, sayfaları birbirine bağlayan linkleri ifade eder; bu sayede kullanıcılar bir sayfadan diğerine kolayca geçiş yapabilir.

HTML'nin önemi şudur:

  • Temel Yapı Taşı: Her web sitesi HTML ile başlar. CSS görünümü, JavaScript etkileşimi sağlar, ama içerik yapısı HTML'dedir.
  • Erişilebilirlik ve SEO: İyi yapılandırılmış HTML, arama motorlarının (SEO) ve ekran okuyucuların (erişilebilirlik) içeriği anlamasını kolaylaştırır.
  • Çapraz Platform Uyumluluk: Tüm tarayıcılar (Chrome, Firefox, Safari) ve cihazlar (mobil, desktop) HTML'yi destekler.
  • Ücretsiz ve Açık Kaynak: Standartlar W3C (World Wide Web Consortium) ve WHATWG tarafından belirlenir, herkes kullanabilir.

HTML, etiketler (tags) aracılığıyla çalışır. Etiketler, < ve > işaretleri arasında yer alır ve genellikle çift olarak kullanılır (açılış ve kapanış etiketi). Örneğin, <p>Bu bir paragraf.</p>. Tek etiketler de vardır, örneğin <img> (görüntü için).

HTML'nin Tarihçesi

HTML'nin hikayesi, internetin doğuşuyla başlar. 1980'lerde, İsviçre'deki CERN laboratuvarında çalışan fizikçi Tim Berners-Lee, araştırmacıların bilgilerini paylaşması için bir sistem geliştirdi. Bu sistem, "ENQUIRE" adlı bir hiper metin ağıydı. 1989'da Berners-Lee, CERN'de internet tabanlı bir bilgi paylaşım sistemi önerdi ve 1990'da HTML'yi geliştirerek World Wide Web (WWW) kavramını hayata geçirdi. İlk HTML sürümü, basit etiketlerle metinleri bağlamaya odaklanmıştı.

  • 1991-1993: İlk Sürümler: Berners-Lee, HTML'yi resmi olarak tanıttı. İlk web tarayıcısı (WorldWideWeb) ile birlikte kullanıldı. 1993'te HTML, IETF (Internet Engineering Task Force) tarafından standartlaştırıldı.
  • HTML 2.0 (1995): W3C'nin ilk resmi spesifikasyonu. Temel etiketler (başlık, paragraf, liste) eklendi.
  • HTML 3.2 (1997): Tablo desteği, font stilleri gibi görsel özellikler geldi, ancak sunum odaklıydı.
  • HTML 4.01 (1999): Yapısal iyileştirmeler; CSS entegrasyonu teşvik edildi. XHTML (XML tabanlı HTML) varyantı doğdu.
  • HTML5 (2014): WHATWG ve W3C işbirliğiyle geliştirildi. Semantik etiketler (<header>, <footer>), multimedya (<video>, <audio>), canvas gibi yenilikler eklendi. "Living Standard" olarak sürekli güncelleniyor (son kararlı sürüm 2021).
  • Günümüz: HTML, "HTML Living Standard" olarak evrilmekte. WHATWG, standartları yönetiyor; W3C onaylıyor. HTML5.2, HTML5.3 gibi küçük güncellemeler var, ama ana odak erişilebilirlik ve performans.

HTML'nin gelişimi, web'in büyümesiyle paralel gitti. Başlangıçta basit metin paylaşımı için tasarlanan dil, bugün karmaşık uygulamaların (örneğin, web app'ler) temelini oluşturuyor. Tim Berners-Lee'nin vizyonu, açık ve erişilebilir bir web yarattı.

HTML'nin Temel Yapısı

Bir HTML belgesi, standart bir yapıya sahiptir. Her sayfa, şu bileşenlerden oluşur:

  1. DOCTYPE Bildirimi: Belgenin HTML sürümünü belirtir. HTML5 için: <!DOCTYPE html>. Bu, tarayıcıya "standart modda" render etmesini söyler.
  2. Etiketi: Kök eleman. Tüm içerik bunun içinde yer alır. Lang attribute ile dil belirtilir: <html lang="tr">.
  3. Bölümü: Meta bilgiler burada. İçerir:
    • <title>: Sayfa başlığı (tarayıcı sekmesinde görünür).
    • <meta>: Charset (<meta charset="UTF-8">), description, keywords.
    • <link>: CSS dosyalarını bağlar (<link rel="stylesheet" href="style.css">).
    • <script>: JavaScript dosyaları.
  4. Bölümü: Görünen içerik burada. Metin, görüntü, formlar vb.

Örnek temel yapı:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Örneği</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bir paragraf.</p>
</body>
</html>

Bu yapı, her HTML dosyasının iskeletidir. Dosyalar .html veya .htm uzantısıyla kaydedilir ve herhangi bir metin editörüyle (Notepad, VS Code) yazılabilir.

HTML Etiketleri: Temel ve İleri Düzey

Etiketler, HTML'nin kalbidir. Blok düzeyinde (yeni satır başlatır, örneğin <div>) ve satır içi (akışta kalır, örneğin <span>) olarak ikiye ayrılır.

  • Başlık Etiketleri: <h1> (en büyük) ile <h6> (en küçük). SEO için önemli; hiyerarşi oluşturur. Örnek: <h1>Ana Başlık</h1><h2>Alt Başlık</h2>
  • Paragraf ve Metin: <p> paragraf için. <br> satır sonu, <hr> yatay çizgi. Kalın: <strong>, Eğik: <em>, Altı çizili: <u> (ama CSS önerilir).
  • Listeler: Sırasız (<ul><li>Öğe</li></ul>), Sıralı (<ol><li>Öğe</li></ol>), Tanım (<dl><dt>Terim</dt><dd>Açıklama</dd></dl>).
  • Bağlantılar ve Görüntüler: <a href="https://example.com">Link</a>. <img src="resim.jpg" alt="Açıklama"> – Alt attribute erişilebilirlik için zorunlu.
  • Tablolar: <table><tr><th>Başlık</th></tr><tr><td>Veri</td></tr></table>. Semantik için <thead>, <tbody> kullanın.
  • Bölümler: <div> genel kapsayıcı, <span> satır içi kapsayıcı.

Semantik etiketler (HTML5): <header> (üst kısım), <nav> (menü), <article> (içerik), <section> (bölüm), <aside> (yan bar), <footer> (alt kısım), <main> (ana içerik). Bunlar, yapıyı anlamlı kılar ve ekran okuyuculara yardımcı olur.

Attributes (Özellikler): Etiketleri Özelleştirme

Her etiket, attributes ile genişletilebilir. Global attributes (tüm etiketlerde): id (benzersiz kimlik), class (CSS sınıfı), style (inline CSS), title (tooltip).

Özel attributes: <a> için href, target="_blank" (yeni sekme). <img> için src, alt, width, height. <input> için type="text", placeholder.

Örnek: <button class="btn" onclick="alert('Tıklandı!')">Tıkla</button>

Attributes, etiketin davranışını değiştirir. HTML5'te yeni: data-* (özel veri, örneğin data-id="123").

Semantik HTML: Anlamlı Yapı Oluşturma

Semantik HTML, içeriğin anlamını vurgular. <div> yerine <article> kullanmak, SEO'yu ve erişilebilirliği artırır. Örneğin, bir blog için:

  • <header>: Logo ve menü.
  • <main><article><h1>Başlık</h1><p>İçerik</p></article></main>
  • <footer>: Telif hakkı.

Bu, tarayıcıların ve arama motorlarının sayfayı daha iyi anlamasını sağlar. ARIA attributes (role="navigation") ile erişilebilirlik artırılır.

Formlar: Kullanıcı Etkileşimi

Formlar, veri toplamak için kullanılır (<form action="sunucu.php" method="post">). Elemanlar:

  • <input type="text">: Metin girişi.
  • <input type="password">: Şifre.
  • <input type="checkbox">, <input type="radio">: Seçim.
  • <select><option>Seçenek</option></select>: Dropdown.
  • <textarea>: Çok satırlı metin.
  • <button type="submit">: Gönder.

Örnek form:

<form action="/gonder" method="post">
<label for="isim">İsim:</label>
<input type="text" id="isim" name="isim">
<button type="submit">Gönder</button>
</form>

Formlar, JavaScript ile doğrulanabilir. Erişilebilirlik için label ve required kullanın.

Multimedya Entegrasyonu

HTML5, harici eklenti olmadan multimedya destekler:

  • <img>: Görüntü.
  • <audio src="ses.mp3" controls></audio>: Ses.
  • <video src="video.mp4" controls width="400"></video>: Video.
  • <canvas id="cizim" width="200" height="200"></canvas>: Çizim (JavaScript ile).

CORS için <img crossorigin="anonymous">. <embed>, <object> eski yöntemler.

Erişilebilirlik (Accessibility)

HTML, engelli kullanıcılar için erişilebilir olmalı. İpuçları:

  • Semantik etiketler kullanın.
  • alt attribute'leri ekleyin.
  • Klavye navigasyonu için tabindex.
  • ARIA: aria-label, role.
  • Renk kontrastı ve metin boyutu dikkat edin.

W3C'nin WCAG standartları rehberlik eder.

HTML5 Yenilikleri

HTML5, web'i devrimleştirdi:

  • Semantik etiketler.
  • Multimedya: <video>, <audio>.
  • Form iyileştirmeleri: type="email", placeholder, autofocus.
  • Depolama: LocalStorage, SessionStorage (API'ler).
  • Grafik: <canvas>, SVG.
  • Performans: <link rel="preload"> kaynak ön yükleme.

HTML5, mobil uyumlu (responsive) tasarımı teşvik eder.

Pratik Örnekler ve İpuçları

Basit bir web sayfası:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Örnek Sayfa</title>
<style>body { font-family: Arial; }</style>
</head>
<body>
<header>
<h1>Hoş Geldiniz!</h1>
<nav><a href="#hakkinda">Hakkında</a></nav>
</header>
<main>
<section id="hakkinda">
<p>Bu bir örnek paragraf.</p>
<img src="resim.jpg" alt="Örnek resim">
</section>
</main>
<footer>© 2025</footer>
</body>
</html>

İpuçları: HTML'i doğrula (validator.w3.org), minify et (performans için), versiyon kontrolü kullan (Git).

Sonuç

HTML, web'in vazgeçilmezi. Bu makale, temelinden ileri düzeyine kadar kapsadı. Pratik yaparak öğrenin; basit sayfalarla başlayın. Daha fazla kaynak için resmi siteleri inceleyin. Web geliştirme yolculuğunuzda başarılar!