Anasayfa Web Geliştirme ve Programlama HTML Nedir?

HTML Nedir?

Son güncelleme tarihi Sep 23, 2025

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>&copy; 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!