HTML Nedir?
Merhaba, web geliştirme dünyasının tutkunu! Dijital çağda, bir web sitesini sıfırdan oluşturmanın temeli olan HTML
(HyperText Markup Language), her geliştiricinin vazgeçilmezi. Eğer "HTML nedir" diye soruyorsanız, bu yazı tam size
göre: Başlangıç seviyesinden ileri seviyeye kadar, HTML'in tarihini, temel yapısını, HTML5 yeniliklerini,
erişilebilirlik standartlarını, CSS ve JavaScript entegrasyonunu, örnek kod parçacıklarını, yaygın hataları, mobil
uyumlu tasarım ipuçlarını ve pratik egzersizleri kapsayan en detaylı rehber. Kaliteweb gibi güvenilir bir hosting
sağlayıcısıyla sitenizi yayınladığınızda, HTML'in gücüyle milyonlara ulaşabilirsiniz. Hazırsanız, HTML'in büyüleyici
dünyasına adım atalım!
HTML'in Tarihi: Web'in Temel Taşının Evrimi
HTML, web'in omurgası olarak 1980'lerin sonundan beri evrilen bir dildir. HTML nedir sorusunun kökeni, CERN'de çalışan
fizikçi Tim Berners-Lee'ye dayanır. 1989'da Berners-Lee, bilimsel belgeleri paylaşmak için bir sistem tasarladı
ve 1991'de ilk HTML versiyonunu yayınladı. Bu ilk sürüm, sadece 18 etiket içeriyordu ve hipermetin bağlantıları
(hypertext) ile markup dili (markup language) kavramlarını birleştiriyordu. HTML 1.0 (1993), temel metin formatlaması ve
bağlantılarla sınırlıydı; tablolar veya resimler yoktu.
1990'ların ortalarında, HTML 2.0 (1995) IETF tarafından standartlaştırıldı ve formlar eklendi. HTML 3.2 (1997), stil
sayfaları ve tablo desteğini getirdi, ancak tarayıcı savaşları (Netscape vs Internet Explorer) standartlaşmayı
zorlaştırdı. HTML 4.01 (1999), daha katı kurallar ve erişilebilirlik odaklı iyileştirmelerle geldi; XHTML 1.0 (2000)
ise XML tabanlı bir varyasyondu.
2000'lerin başında, web 2.0'nin yükselişiyle HTML'in evrimi hızlandı. WHATWG (Web Hypertext Application Technology
Working Group) 2004'te HTML5'i geliştirmeye başladı. W3C'nin 2014'te HTML5'i standartlaştırmasıyla, modern web
doğdu. 2025 itibarıyla, HTML5'in son güncellemeleri (örneğin WCAG 2.2 entegrasyonu) erişilebilirlik ve performans
odaklı. HTML'in evrimi, statik sayfalardan dinamik, interaktif uygulamalara geçişi simgeliyor – bugün 5 milyardan fazla
web sitesi HTML kullanıyor.
Bu tarih, HTML'in esnekliğini gösterir: Başlangıçta bilimsel paylaşım için tasarlanmışken, şimdi e-ticaret devleri ve
mobil uygulamaların temelini oluşturuyor. İleri seviye geliştiriciler için, HTML'in XML kökenleri (XHTML) hala modüler
kodlamada faydalı.
HTML'in Temel Etiketleri ve Yapısı: Başlangıç Seviyesi Rehber
HTML nedir ve nasıl yapılandırılır? HTML, etiketler (tags) ile metni ve içerikleri işaretleyen bir markup dilidir. Temel
yapı, bir ağaç hiyerarşisidir: Kök <html>, başlık <head> ve gövde <body>.
Bir HTML belgesi şöyle başlar:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk HTML Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bir paragraf etiketi.</p>
</body>
</html>
Burada, <!DOCTYPE html> HTML5'i bildirir. <html lang="tr"> dilini tanımlar – SEO için kritik. <head> bölümünde meta
etiketler (charset için UTF-8, viewport için mobil uyum) ve title yer alır. <body>'de içerik: <h1> başlık, <p> paragraf.
Temel etiketler:
- Yapısal Etiketler: <header>, <nav>, <main>, <footer>, <section>, <article> – semantik HTML için.
- Metin Etiketleri: <strong> (kalın), <em> (italik), <a href="url"> (bağlantı), <img src="resim.jpg" alt="Açıklama">
(görsel – alt metin erişilebilirlik için zorunlu).
- Liste Etiketleri: <ul> (sırasız liste), <ol> (sıralı), <li> (öğe).
- Form Etiketleri: <form>, <input type="text">, <button>.
İleri seviye: Etiketler kapanmalı (<p>Tekst</p>), öznitelikler (attributes) küçük harfle yazılır. Boş etiketler (void
elements) kapanmaz: <br>, <hr>, <img>. HTML yapısı, DOM (Document Object Model) oluşturur – JS için temel.
Pratik Egzersiz 1: Basit bir sayfa oluşturun. <head>'e meta ekleyin, <body>'ye başlık, paragraf ve bir bağlantı koyun.
Tarayıcıda açın ve kodu validator.w3.org ile doğrulayın.
HTML5 Yenilikleri: Modern Web'in Gücü (2025 Güncellemeleri)
HTML5, 2014 standartıyla devrim yarattı ve 2025'te hala evriliyor. HTML5 nedir? Eski sürümlere göre semantik, multimedya
ve API'ler eklenmiş hali. Başlıca yenilikler:
1. Semantik Etiketler: <header>, <footer>, <nav>, <article>, <aside> – SEO ve erişilebilirlik için. Örnek:
<article><h2>Başlık</h2><p>İçerik</p></article>.
2. Multimedya Desteği: <audio src="ses.mp3" controls></audio>, <video src="video.mp4" width="400" controls
poster="kapak.jpg"></video> – Flash'a gerek yok. 2025'te, <picture> etiketi responsive görseller için:
<picture><source srcset="mobil.jpg" media="(max-width: 600px)"><img src="desktop.jpg" alt="Resim"></picture>.
3. Form İyileştirmeleri: <input type="email">, <input type="date">, <datalist> – doğrulama için. <progress value="70"
max="100"> ilerleme çubuğu.
4. Canvas ve SVG: <canvas id="cizim" width="200" height="100"></canvas> grafik çizimi için (JS ile). <svg><circle
cx="50" cy="50" r="40" fill="red"/></svg> vektör grafikler.
5. API'ler: Geolocation (navigator.geolocation.getCurrentPosition()), LocalStorage (localStorage.setItem('anahtar',
'değer')), Web Workers – arka plan işleri.
2025 yenilikleri: <dialog> modal pencere için (<dialog open><p>İçerik</p></dialog>), inert attribute (devre dışı
bırakma), lazy loading (<img loading="lazy"> – performans için). İleri seviye: HTML5'in ARIA (Accessible Rich Internet
Applications) entegrasyonu, dinamik içerik için.
Pratik Egzersiz 2: Bir video player oluşturun. <video> etiketiyle bir video ekleyin, controls ve poster attribute'larını
kullanın. Canvas ile basit bir çizim ekleyin.
Erişilebilirlik Standartları: WCAG ve HTML
HTML nedir ve neden erişilebilir olmalı? Erişilebilirlik, engelli kullanıcıların web'i kullanmasını sağlar. WCAG (Web
Content Accessibility Guidelines) 2.2 (2023, 2025'te güncellenmiş), W3C'nin standartıdır: POUR prensipleri (Perceivable,
Operable, Understandable, Robust).
HTML'de erişilebilirlik:
- Alt Metinler: <img alt="Açıklama"> – ekran okuyucular için zorunlu.
- Semantik Yapı: <h1>-<h6> hiyerarşisi, <label for="id"> formlar için.
- ARIA Etiketleri: <button aria-label="Kapat">X</button> – gizli içerik için.
- Kontrast ve Renk: CSS ile WCAG AA (4.5:1 kontrast oranı).
- Klavye Navigasyonu: <a href> ve <button> focusable olsun.
Başlangıç: Tüm görsellerine alt ekleyin. İleri: <nav aria-label="Ana Menü"> ile landmark'lar tanımlayın. WCAG 2.2, mobil
dokunma hedeflerini (44x44 piksel) ekler. Araçlar: WAVE veya Lighthouse ile test edin.
Pratik Egzersiz 3: Bir form oluşturun. <input>'lara <label> ekleyin, bir resme alt metin verin. Ekran okuyucu
simülasyonuyla (NVDA) test edin.
CSS ve JavaScript Entegrasyonu: HTML'i Canlı Kılmak
HTML yalnızken statik; CSS stil, JS etkileşim katar. Entegrasyon, web'in üçlü gücüdür.
CSS Entegrasyonu: Üç yol: Inline (<p style="color:red;">), Internal (<style> p {color:red;} </style>), External (<link
rel="stylesheet" href="stil.css"> – önerilen).
Örnek: HTML'de <div class="kutu">İçerik</div>, CSS'de .kutu { background: blue; padding: 10px; }.
JavaScript Entegrasyonu: <script src="script.js"></script> veya inline (<script>alert('Merhaba');</script>). DOM
manipülasyonu: document.getElementById('id').innerHTML = 'Yeni';.
Örnek Kod: Basit bir buton.
HTML:
<button id="buton">Tıkla</button>
<p id="metin">Henüz tıklamadın.</p>
JS:
document.getElementById('buton').addEventListener('click', function() {
document.getElementById('metin').innerHTML = 'Tıklandı!';
});
CSS: #buton { background: green; }
İleri seviye: ES6+ (arrow functions), async/await API çağrıları için. 2025'te, Web Components (<custom-element>) ile
modüler entegrasyon.
Pratik Egzersiz 4: Bir sayfa yapın. External CSS ile stilleyin, JS ile buton ekleyin ki metni değiştirsin.
Örnek Kod Parçacıkları: Pratik Uygulamalar
Başlangıç örneği: Basit bir sayfa.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Örneği</title>
<style> body { font-family: Arial; } </style>
</head>
<body>
<header><h1>Benim Sitem</h1></header>
<nav><a href="#anasayfa">Anasayfa</a></nav>
<main>
<section>
<article>
<h2>İlk Makale</h2>
<p>HTML ile yazıldı.</p>
<img src="resim.jpg" alt="Örnek resim">
</article>
</section>
</main>
<footer><p>© 2025</p></footer>
<script>console.log('HTML hazır!');</script>
</body>
</html>
İleri örnek: Form ile JS doğrulama.
HTML:
<form id="form">
<label for="email">E-posta:</label>
<input type="email" id="email" required>
<button type="submit">Gönder</button>
</form>
JS:
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
let email = document.getElementById('email').value;
if (email.includes('@')) {
alert('Geçerli!');
} else {
alert('Hata!');
}
});
Bu parçalar, HTML5 form validation'ını gösterir.
Yaygın Hatalar ve Düzeltmeler: Kaçınmanız Gereken Tuzaklar
HTML kodlamada hatalar yaygın; işte en sık olanlar.
1. Kapanmayan Etiketler: <p>Metin yerine <p>Metin</p>. Fix: Editörde auto-close kullanın (VS Code).
2. Yanlış DOCTYPE: Eski <!DOCTYPE HTML PUBLIC...> yerine <!DOCTYPE html>. Fix: HTML5 standartını kullanın.
3. Alt Metin Eksikliği: <img src="a.jpg"> yerine alt ekleyin. Fix: Her görsele descriptive alt verin.
4. Semantik Hatalar: <div> soup (aşırı div kullanımı) yerine semantik etiketler. Fix: <section> ve <article> tercih
edin.
5. Öznitelik Hataları: HREF="url" yerine href="url". Fix: Küçük harf, tırnaklı.
6. Nesting Sorunları: <p><h1>Yanlış</h1></p> – p içinde h1 olamaz. Fix: Doğru hiyerarşi: Blok etiketler iç içe.
7. Charset Eksikliği: UTF-8 belirtmeyin, Türkçe karakterler bozulur. Fix: <meta charset="UTF-8">.
İleri: Cross-browser uyum – IE desteği için polyfill'ler. Validator araçları (W3C) ile kontrol edin.
Pratik Egzersiz 5: Hatalı bir kodu düzeltin. Kapanmayan etiketler ekleyin, validator ile test edin.
Mobil Uyumlu Tasarım İpuçları: Responsive HTML
Mobil uyum, 2025'te zorunlu – kullanıcıların %60'ı mobilden giriyor. HTML nedir ve mobil? Viewport meta ile başlar:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
İpuçları:
1. Semantik ve Esnek Yapı: Fluid grid'ler – CSS Grid/Flexbox ile: <div style="display: flex;">.
2. Media Queries: CSS'te @media (max-width: 600px) { body { font-size: 16px; } }.
3. Responsive Görseller: <img srcset="kucuk.jpg 300w, buyuk.jpg 800w" sizes="(max-width: 600px) 300px, 800px">.
4. Dokunma Hedefleri: Butonlar en az 44x44 piksel.
5. Mobile-First: Küçük ekranı önce tasarlayın, sonra genişletin.
İleri: AMP (Accelerated Mobile Pages) için HTML5 subset'i kullanın. Kaliteweb'in hosting'inde, responsive siteler daha
hızlı yüklenir.
Pratik Egzersiz 6: Bir sayfayı responsive yapın. Viewport ekleyin, media query ile menüyü mobilde hamburger'a dönüştürün
(JS ile).
Pratik Egzersizler: Uygulamalı Öğrenme
Yukarıdaki egzersizleri genişletelim:
- Egzersiz 7 (İleri): Bir blog sayfası oluşturun. HTML5 semantik etiketler, CSS animasyonları ve JS ile yorum ekleme
özelliği ekleyin. Erişilebilirlik için ARIA kullanın.
- Egzersiz 8: Hatalı bir kodu debug edin. Yaygın hataları tespit edip düzeltin, Lighthouse ile skorunuzu 90+'ya
çıkarın.
Bu egzersizler, teoriyi pratiğe döker – GitHub'da paylaşın!
HTML ile Web Geleceğini Şekillendirin
HTML nedir? Web'in kalbi, evrilen bir dil. Bu rehberle, başlangıçtan ileri seviyeye hakim oldunuz – tarihinden mobil
ipuçlarına. HTML5'in gücüyle, erişilebilir ve responsive siteler kurun. Kaliteweb'de yayınlayın, milyonlara ulaşın.
Geliştirme yolculuğunuzda başarılar!