HTML Nedir?

HTML, HyperText Markup Language (Köprü Metni İşaretleme Dili) kısaltmasıdır. Web'de içerik oluşturmak ve yapılandırmak için kullanılan standart dildir. HTML, başlıklar, paragraflar, bağlantılar, görseller, formlar ve diğer içerikleri tanımlamak için etiketlerden oluşan bir element sistemi kullanır. Tarayıcıda ziyaret ettiğiniz her sayfa HTML üzerine inşa edilmiştir — HTML, webin iskeletidir.

HTML Açılımı

HTML açılımı: HyperText Markup Language — Türkçesiyle Köprü Metni İşaretleme Dili. Her kelime ayrı bir anlam taşır:

• HyperText — Sayfaları birbirine bağlayan köprüler (linkler) anlamına gelir. Web'i "web" yapan bu bağlantılardır.
• Markup — İşaretleme demektir. İçerik, etiketlerle (<h1>, <p>, <a> gibi) işaretlenerek yapılandırılır.
• Language — Dil demektir. HTML, tarayıcıların anladığı standart bir dildir.

Kısaca: HTML, web sayfalarının iskeletini oluşturan işaretleme dilidir. Programlama dili değildir — mantık, döngü veya koşul içermez; yalnızca içeriğin yapısını tanımlar.

Tarihçe

HTML, 1991 yılında Tim Berners-Lee tarafından gelişmekte olan World Wide Web üzerinde belge paylaşmak amacıyla oluşturulmuştur. O tarihten bu yana HTML birçok büyük sürümden geçmiştir: HTML 2.0 (1995), HTML 4.01 (1999), XHTML (2000) ve son olarak 2014 yılında W3C ve WHATWG tarafından standartlaştırılan HTML5, günümüzdeki yaşayan standart olarak kalmaya devam etmektedir.

Temel Sözdizimi

Bir HTML belgesi iç içe geçmiş elementlerden oluşur. Her element bir açma etiketi, içerik ve bir kapama etiketinden oluşur. Bazı elementler kendi kendini kapatır (void elementler) ve kapama etiketi gerektirmez. Etiketler, ek bilgi veya davranış sağlayan özellikler (attribute) taşıyabilir.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Sayfam</title>
  </head>
  <body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu bir <a href="https://ornek.com">bağlantı</a>dır.</p>
    <img src="foto.jpg" alt="Bir fotoğraf" />
  </body>
</html>

Temel Kavramlar

• DOCTYPE — <!DOCTYPE html>, tarayıcıya bu belgenin HTML5 olduğunu bildirir. Her zaman ilk satır olmalıdır.
• Element — Temel yapı taşı: açma etiketi, içerik ve kapama etiketi. Örnek: <p>Merhaba</p>
• Void element — İçeriği olmayan kendi kendini kapatan elementler: <img>, <br>, <input>, <meta>, <link>
• Özellik (Attribute) — Açma etiketinin içindeki ek bilgi: <a href="/sayfa">, <img alt="açıklama">
• İç içe geçme — Elementler doğru şekilde iç içe yerleştirilmelidir; bir alt element, üst elementinden önce kapatılmalıdır
• Head — Meta veri içerir: başlık, karakter seti, viewport, CSS bağlantıları, komut dosyaları
• Body — Tüm görünür sayfa içeriğini barındırır

HTML5 Semantik Elementleri

HTML5, görünüm değil anlam tanımlayan semantik elementler eklemiştir. Tarayıcıların, arama motorlarının ve yardımcı teknolojilerin içeriği anlamasına yardımcı olurlar:

• <header> — Sayfa veya bölüm için giriş içeriği ya da gezinme
• <nav> — Gezinme bağlantıları kümesi
• <main> — Belgenin ana içeriği (sayfa başına yalnızca bir tane)
• <section> — Başlığı olan tematik içerik grubu
• <article> — Kendi başına anlam taşıyan içerik (blog yazısı, haber)
• <aside> — Ana içerikle ilgili yan içerik (kenar çubuğu)
• <footer> — Sayfa veya bölüm altbilgisi
• <figure> / <figcaption> — İsteğe bağlı açıklamalı görsel veya diyagram

Yaygın Etiketler Referansı

• Başlıklar — <h1>'den <h6>'ya kadar — sayfa başına yalnızca bir <h1> kullanın
• Paragraf — <p>
• Bağlantı — <a href="url">metin</a>
• Görsel — <img src="url" alt="açıklama">
• Listeler — <ul> (sırasız), <ol> (sıralı), öğeler <li> ile
• Tablo — <table>, <tr>, <th>, <td>
• Form — <form>, <input>, <textarea>, <button>, <select>
• Div / Span — <div> (blok), <span> (satır içi) — genel kapsayıcılar
• Kalın / İtalik — <strong> (önemli), <em> (vurgu)
• Kod — <code> (satır içi), <pre> (önceden biçimlendirilmiş blok)

HTML, CSS ve JavaScript Karşılaştırması

Webin üç temel teknolojisinin her birinin ayrı bir rolü vardır:

• HTML — Yapı ve içerik. Sayfada ne olduğunu tanımlar.
• CSS — Sunum. Renkleri, yazı tiplerini, düzeni ve boşlukları kontrol eder.
• JavaScript — Davranış. Etkileşim, animasyonlar ve dinamik güncellemeler ekler.

CSS olmayan bir web sayfası sade ama okunabilirdir. JavaScript olmayan bir web sayfası hâlâ içerik gösterir. Ancak HTML olmayan bir web sayfasının gösterecek hiçbir şeyi yoktur.

Erişilebilirlik Temelleri

• Görsellere her zaman alt özelliği ekleyin — ekran okuyucular bunları kullanır
• Her yerde genel <div> yerine semantik elementler kullanın
• Form girdilerini <label for="id"> ile etiketleyin
• Başlıkların mantıksal bir hiyerarşi izlediğinden emin olun (h1 → h2 → h3)
• Metin ve arka plan arasında yeterli renk kontrastı sağlayın

Dikkat Edilmesi Gereken Kurallar

• Her zaman <!DOCTYPE html> ile başlayın
• HTML büyük/küçük harfe duyarlı değildir ancak küçük harf etiketler gelenekseldir
• Özellik değerleri her zaman tırnak işaretleri içinde olmalıdır
• Void elementlerin (<img>, <br>, <input>) kapama etiketi yoktur
• Elementleri doğru şekilde iç içe yerleştirin — etiketler asla örtüşmemelidir
• Erişilebilirlik ve SEO için <html> etiketinde lang özelliğini kullanın