HTML Ne İçin Kullanılır? Web Dünyasının Temeli ve Sayfa İskeleti Rehberi

HTML (HyperText Markup Language), web üzerinde gördüğün istisnasız her sayfanın iskeletini ve içeriğini tanımlayan işaretleme dilidir. Bir binanın kolonları, duvarları ve odaları ne ise bir web sitesi için de HTML odur. Başlıklar, paragraflar, butonlar, formlar ve görseller tarayıcıya HTML etiketleri aracılığıyla iletilir.

HTML ile Neler Yapılır ve Nerelerde Kullanılır?

HTML bir programlama dili değil, içeriği anlamlandıran güçlü bir yapı standardıdır:

• Web Sayfası Mimarisi: İnternetteki tüm sitelerin metin, başlık, liste ve tablo düzeni HTML ile kurulur.
• Kullanıcı Etkileşim Formları: Giriş yapma, kayıt olma, ödeme yapma ve anket doldurma gibi form alanları HTML <form> etiketleriyle yönetilir.
• Medya ve Çoklu Ortam Yerleşimi: Video oynatıcılar (<video>), ses dosyaları (<audio>) ve etkileşimli grafik çizimleri (<canvas>, <svg>).
• SEO ve Arama Motoru Optimizasyonu: Google arama motoru botları sayfayı semantik etiketlerine göre (header, nav, article, main) okur ve puanlar.
• Erişilebilirlik (A11y): Görme engelli bireylerin ekran okuyucu yazılımlarla web sayfalarını eksiksiz gezebilmesini sağlar.

HTML Öğrenmeye Nereden Başlamalısın?

1. 1 1. İlk .html Dosyanı Oluştur. Masaüstünde index.html adında bir dosya oluştur ve VS Code ile aç. Tarayıcında açtığında doğrudan çalıştığını gör.
2. 2 2. Temel Sayfa İskeletini Anla. <!DOCTYPE html>, <html>, <head> (meta ve başlık) ve <body> (görünen alan) ayrımını kavra.
3. 3 3. Semantik Etiketleri Tercih Et. Her şeye <div> basmak yerine <header>, <main>, <article>, <nav> ve <footer> kullan.
4. 4 4. Doğru Form Yapıları Kur. <label> etiketlerini <input> ile "for" ve "id" üzerinden mutlaka bağla.
5. 5 5. SEO Meta Etiketlerini Ekle. Open Graph (og:title, og:image) ve meta description etiketlerini sayfanın head kısmına yerleştirmeyi öğren.

HTML Nerede ve Hangi Uygulamayla Çalıştırılır? (Kurulum ve Ayarlar)

HTML bir programlama derleyicisi gerektirmez; yazdığın .html uzantılı dosyayı bilgisayarındaki herhangi bir web tarayıcısıyla (Chrome, Edge, Safari, Firefox) çift tıklayarak açabilirsin.

VS Code + Live Server (En Pratik Yöntem)

VS Code içinde kodu kaydettiğin anda tarayıcıyı otomatik yenileyen Live Server eklentisiyle profesyonel gibi çalışabilirsin.

Aracı incele →

Herhangi Bir Web Tarayıcısı (Chrome / Firefox)

Dosyayı index.html adıyla kaydet ve üzerine çift tıkla; doğrudan tarayıcıda açılır. Sağ tıklayıp "İncele (Inspect)" diyerek etiketleri canlı görebilirsin.

Aracı incele →

Tarayıcıda Canlı HTML/CSS Editörü

Program kurmadan Webino App canlı önizleme editöründe HTML etiketlerini yazıp sonucu yan panelde anında gör.

Aracı incele →

HTML Kurarken Yapılması Gereken Kritik Ayarlar

• ✓

  1. Dosya Uzantısını .html Olarak Kaydetme

  Dosya adını index.html yaparken Windows’un sonuna gizlice .txt eklemediğinden (index.html.txt olmadığından) emin ol. En garantisi klasörü doğrudan VS Code içinde açmaktır.

• ✓

  2. Emmet Kısayolu (! + Tab)

  VS Code’da boş bir index.html dosyası açıp sadece ünlem işareti (!) yazdıktan sonra Tab tuşuna bas; standart <!DOCTYPE html> ve <meta charset="UTF-8"> iskeleti otomatik oluşur.

• ✓

  3. Live Server ve Auto Save Ayarı

  VS Code’da File → Auto Save seçeneğini işaretle ve sağ alttaki "Go Live" butonuna tıkla. Artık her harf yazdığında sayfa tarayıcıda canlı güncellenir.

İlk HTML Kodunu Çalıştırma Komutları:

HTML Kurulum & Çalıştırma Kopyala

<!-- 1. VS Code'da index.html oluştur ve ! + Tab tuşuna bas: -->
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>İlk Web Sayfam</title>
</head>
<body>
  <h1>Merhaba HTML!</h1>
</body>
</html>

Pratik Bir Semantik HTML Örneği

Aşağıda modern, semantik ve erişilebilir temel bir sayfa yapısı yer almaktadır:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kişisel Portföy</title>
</head>
<body>
  <header>
    <nav aria-label="Ana Menü">
      <a href="#hakkimda">Hakkımda</a>
      <a href="#projeler">Projeler</a>
    </nav>
  </header>

  <main>
    <article id="hakkimda">
      <h1>Merhaba, Ben Yazılım Geliştiriciyim</h1>
      <p>Modern web teknolojileri üzerine çalışıyorum.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Tüm Hakları Saklıdır.</p>
  </footer>
</body>
</html>

Yeni Başlayanların HTML’de Sık Yaptığı 3 Hata

HTML yazarken dikkat etmen gereken temel noktalar:

• "Div Çorbası" (Div Soup): Semantik etiketler yerine her kutuya <div> vermek ekran okuyucuların ve Google botlarının sayfayı anlamasını engeller.
• Görsellere "alt" Metni Vermemek: <img> etiketlerinde resim yüklenemediğinde veya görme engelli kullanıcılar için açıklayıcı "alt" yazısı bulunmalıdır.
• Formlarda Label Etiketini Unutmak: Sadece placeholder koymak erişilebilirlik açısından yetersizdir; kalıcı etiket için <label> şarttır.