HTML Öğrenme Yol Haritası · 0 → 100

HTML
Sıfırdan
Ustaya

16 BÖLÜM
Temel etiketlerden Senior-level best practice'e kadar her şey.
16 Bölüm
5 Proje
~30 Gün
∞ Pratik
SEVİYE 1
Başlangıç
Bölüm 1–6
SEVİYE 2
Orta
Bölüm 7–11
SEVİYE 3
İleri
Bölüm 12–14
SEVİYE 4
Uzman
Bölüm 15–16
01
BAŞLANGIÇ
HTML Nedir?
Temel mantığı kavra, etiket yapısını öğren
▶
HyperText Markup Language Web İskeleti Tarayıcı Render Tag Mantığı

HTML (HyperText Markup Language), web sayfalarının görsel iskeletini oluşturan işaretleme dilidir. Bir programlama dili değildir — içeriği anlamlandırır ve tarayıcıya nasıl gösterileceğini söyler.

<p>Merhaba Dünya</p> <!-- Kural basit: aç → içerik → kapat --> <h1>Başlık</h1> <strong>Kalın metin</strong> <a href="#">Link</a>
Nasıl çalışır? Tarayıcı HTML dosyasını okur → DOM (Document Object Model) ağacı oluşturur → Her etiketi ekranda görsel öğeye dönüştürür.
Hedef: Açılış/kapanış etiket mantığını ezberlemeden içselleştirmek
02
BAŞLANGIÇ
HTML Dosya Yapısı
Temel şablon, head/body ayrımı
▶
<!DOCTYPE html> <!-- HTML5 bildirimi --> <html lang="tr"> <head> <!-- Meta bilgiler, tarayıcıya mesaj --> <meta charset="UTF-8"> <title>Sayfa Başlığı</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Kullanıcının gördüğü her şey --> <h1>Merhaba!</h1> </body> </html>
!DOCTYPE
Tarayıcıya "bu HTML5 dosyası" der. İlk satırda olmalı, her zaman.
<html>
Root element. lang="tr" ile dil belirt — SEO + erişilebilirlik için kritik.
<head>
Görünmez metadata. Title, charset, CSS/JS linkleri burada.
<body>
Ekranda gördüğün her şey. DOM ağacının görünen kısmı.
Hedef: Bu şablonu kapatarak ezberden yaz — HTML editörü olmadan
03
BAŞLANGIÇ
Temel HTML Etiketleri
Metin, formatlama, yapı etiketleri
▶
ETİKETKULLANIMNOT
<h1>–<h6>BaşlıklarSayfada tek h1 kullan (SEO)
<p>ParagrafBlock element, alt alta dizilir
<div>Genel blok konteynerAnlamı yok, sadece gruplar
<span>Inline konteynerMetin içi stil için
<strong>Önemli / kalın<b>'den farkı: semantik anlam taşır
<em>Vurgu / italik<i>'den farkı: anlam taşır
<br>Satır sonuSelf-closing, kapanış yok
<hr>Yatay çizgiTematik ayrım için
💡 İpucu: <strong> ve <b> görsel olarak aynı görünür ama ekran okuyucular <strong>'u "önemli" olarak seslendirir. Semantic HTML, iyi HTML.
04
BAŞLANGIÇ
Link ve Medya
Bağlantılar, görseller, video, ses
▶
<!-- Link --> <a href="https://google.com" target="_blank" rel="noopener"> Google'a Git </a> <!-- Görsel --> <img src="foto.jpg" alt="Profilim" width="300" loading="lazy"> <!-- Video --> <video controls muted poster="kapak.jpg"> <source src="video.mp4" type="video/mp4"> </video>
target="_blank"
Linki yeni sekmede açar. Güvenlik için rel="noopener noreferrer" ekle.
alt=""
Görsel yüklenemezse gösterilir. Ekran okuyucular için ZORUNLU. SEO etkisi var.
loading="lazy"
Görsel ekrana gelince yükle. Sayfa hızını artırır. Modern HTML5 özelliği.
controls
Video/audio oynatma butonlarını gösterir. Olmadan tarayıcı UI'ı saklar.
05
BAŞLANGIÇ
Listeler
Sıralı, sırasız ve açıklama listeleri
▶
<!-- Sırasız liste (ul) --> <ul> <li>HTML öğren</li> <li>CSS öğren</li> </ul> <!-- Sıralı liste (ol) --> <ol type="A"> <!-- 1, A, I, a, i --> <li>Adım 1</li> <li>Adım 2</li> </ol> <!-- Açıklama listesi (dl) --> <dl> <dt>HTML</dt> <dd>Web'in iskeleti</dd> </dl>
💡 Gizli özellik: Listeler iç içe koyulabilir (nested). Nav menüleri genellikle <ul><li><a> kombinasyonu ile yapılır.
06
BAŞLANGIÇ
Tablolar
Veri düzenleme, dashboard mantığı
▶
<table> <thead> <!-- Başlık satırı --> <tr> <th scope="col">Ad</th> <th scope="col">Yaş</th> <th scope="col">Şehir</th> </tr> </thead> <tbody> <!-- Veri satırları --> <tr> <td>Ali</td> <td>20</td> <td>İstanbul</td> </tr> </tbody> <tfoot> <!-- Özet satırı (opsiyonel) --> <tr><td colspan="3">Toplam: 1 kişi</td></tr> </tfoot> </table>
⚠️ Dikkat: Tablolar sadece tablo verisi için kullanılmalı! Eskiden layout için kullanılırdı — bu artık yanlış. Layout için CSS Flexbox/Grid kullan.
07
ORTA SEVİYE
Formlar — ÇOK KRİTİK
Kullanıcıdan veri almanın tek yolu
▶
<form action="/giris" method="POST"> <label for="email">E-posta</label> <input type="email" id="email" name="email" placeholder="ad@örnek.com" required> <input type="password" name="sifre" minlength="8"> <!-- Checkbox --> <input type="checkbox" name="kabul" id="kabul"> <label for="kabul">Şartları kabul et</label> <!-- Select dropdown --> <select name="sehir"> <option value="ist">İstanbul</option> <option value="ank">Ankara</option> </select> <button type="submit">Giriş Yap</button> </form>
INPUT TYPENE YAPAR
textDüz metin girişi
email@ ve domain kontrolü yapar
passwordKarakterleri gizler
numberSadece sayı, min/max destekli
checkboxÇoklu seçim (true/false)
radioTek seçim (group ile)
fileDosya yükleme diyaloğu
rangeSlider kaydırıcı
08
ORTA SEVİYE
Semantic HTML
Pro level başlangıcı — SEO + A11Y
▶
<header> <!-- Site/section başı --> <nav> <ul><li><a href="/">Ana Sayfa</a></li></ul> </nav> </header> <main> <!-- Sayfanın ana içeriği (tek olmalı) --> <article> <!-- Bağımsız içerik (blog yazısı) --> <h1>Makale Başlığı</h1> <section> <!-- Tematik bölüm --> <p>İçerik...</p> </section> </article> <aside>Yan panel / reklam</aside> </main> <footer>Copyright 2025</footer>
Neden önemli? Google, semantic etiketleri anlar ve sayfa yapısını doğru yorumlar. <div> kullanırsak Google kör kalır. Ekran okuyucular da semantic yapıyla sayfayı anlamlı seslendirir.
Hedef: Hayatında bir daha gereksiz <div> yazmamak
09
ORTA SEVİYE
HTML Attributes
CSS ve JS'e bağlanmanın kapısı
▶
<!-- id: sayfada benzersiz, JS/CSS hedefi --> <div id="hero-section"></div> <!-- class: tekrar kullanılabilir, CSS için --> <p class="kart vurgulu büyük">Metin</p> <!-- title: tooltip gösterir --> <abbr title="HyperText Markup Language">HTML</abbr> <!-- data-*: custom veri taşıma (JS için) --> <div data-kullanici-id="42" data-rol="admin"></div> // JS: element.dataset.kullaniciId → "42"
10
ORTA SEVİYE
Inline vs Block Mantığı
Layout anlayışının temeli
▶
🟩 BLOCK ELEMENTLER
Tam satırı kaplar. Altına iner.
div, p, h1-h6, ul, ol, li, table, header, footer, section, article, form
🟧 INLINE ELEMENTLER
İçerik kadar yer kaplar. Yan yana dizilir.
span, a, img, strong, em, label, input, button, abbr
/* CSS ile display özelliği değiştirilebilir */ span { display: block; } /* inline → block */ div { display: inline; } /* block → inline */ .flex{ display: flex; } /* modern layout */ .grid{ display: grid; } /* grid layout */
11
ORTA SEVİYE
HTML + CSS Entegrasyonu
Frontend burada başlar
▶
<!-- 1. External CSS (EN İYİ YOL) --> <link rel="stylesheet" href="style.css"> <!-- 2. Internal CSS --> <style> body { background: #f5f0e8; } </style> <!-- 3. Inline CSS (son çare) --> <p style="color:red; font-size:16px">Metin</p> <!-- JS bağlama --> <script src="app.js" defer></script>
Kural: External CSS kullan, inline style yazma. HTML = yapı, CSS = görünüm, JS = davranış. Bu üçlü ayrımı asla karıştırma.
12
İLERİ SEVİYE
SEO Temelleri
Google'da görünmek için zorunlu bilgi
▶
<head> <!-- Temel SEO --> <title>Anahtar Kelime | Site Adı</title> <meta name="description" content="150-160 karakter açıklama"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://sitem.com/sayfa"> <!-- Open Graph (sosyal medya önizleme) --> <meta property="og:title" content="Başlık"> <meta property="og:image" content="og-resim.jpg"> <meta property="og:type" content="website"> </head>
SEO Altın Kuralları: 1 sayfada tek <h1> · <img>'de alt yazısı · Anlamlı <title> (60 karakter) · Semantic HTML kullan · Hızlı yükle (LCP < 2.5s)
13
İLERİ SEVİYE
Accessibility (A11Y)
Engelli kullanıcılar için erişilebilirlik
▶
<!-- label ile input bağlama --> <label for="isim">Adınız</label> <input type="text" id="isim" aria-required="true"> <!-- ARIA rolleri --> <nav aria-label="Ana menü"></nav> <button aria-expanded="false" aria-controls="menu">Menü</button> <!-- Skip link (klavye kullanıcıları için) --> <a href="#main-content" class="skip-link"> İçeriğe atla </a>
Gerçek dünya: Web erişilebilirliği birçok ülkede yasal zorunluluk. WCAG 2.1 AA standardı. Ekran okuyucu (NVDA/VoiceOver) ile kendi siteni test et.
14
İLERİ SEVİYE
Responsive Mantık
Mobil uyumluluğun HTML tarafı
▶
<!-- Viewport meta — HER sayfada olmalı --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive görsel --> <picture> <source media="(max-width:600px)" srcset="mobil.jpg"> <img src="masaustu.jpg" alt="Hero görsel"> </picture> <!-- srcset ile çözünürlük optimizasyonu --> <img src="img.jpg" srcset="img-400.jpg 400w, img-800.jpg 800w" sizes="(max-width:600px) 100vw, 50vw">
15
UZMAN
Advanced HTML
iframe, canvas, SVG, custom elements
▶
<!-- Canvas: JS ile grafik çizimi --> <canvas id="grafik" width="800" height="400"></canvas> <!-- SVG: Vektör grafik --> <svg viewBox="0 0 100 100" xmlns="..."> <circle cx="50" cy="50" r="40" fill="#e85d04"/> </svg> <!-- Template: JS ile dinamik içerik --> <template id="kart-sablonu"> <div class="kart"><slot name="baslik"></slot></div> </template> <!-- data-* custom attribute --> <div data-tema="karanlik" data-dil="tr"></div>
16
UZMAN
Best Practices — Senior Level
Temiz, ölçeklenebilir, erişilebilir HTML
▶
✅ Semantic kullan
<div> yerine <article>, <section>, <nav>. Google ve ekran okuyucular sever.
✅ Alt attribute
Her <img>'e anlamlı alt yaz. Dekoratifse alt="" (boş bırak, saklamaz).
✅ Indent tutarlılığı
2 ya da 4 boşluk — seç ve hep aynı yap. Okunabilirlik = bakım kolaylığı.
✅ Küçük harf
Etiketler ve attribute'lar lowercase olmalı. <DIV> değil, <div>.
✅ Validation
validator.w3.org ile HTML'ini kontrol et. Sıfır error hedefle.
✅ Performance
loading="lazy", <script defer>, kritik CSS inline. LCP 2.5s altı.
Hedef: Kodu okuyan biri "ah evet, bunu anladım" desin — yorum satırı gerekmeden

HTML tek başına
bir kariyer değildir.
Ama şunun
kapısını açar:

Temeli doğru kur. Semantic yaz. Best practice'i alışkanlık haline getir. Gerisi gelir.
↑ Başa Dön W3C Validator
→
CSS
Görsel tasarım, layout, animasyon
→
JavaScript
Etkileşim, mantık, DOM manipülasyonu
→
Frontend Framework
React / Vue / Svelte — modern UI
→
UI/UX Design
Figma, tasarım prensipleri
→
Web Development
Full stack → kariyer