HTML (HyperText Markup Language) Nedir?

bNET
27/02/2025

Giriş: HTML’in Tanımı ve Önemi
HTML (HyperText Markup Language), web sayfalarının yapısını oluşturmak için kullanılan standart bir işaretleme dilidir. “Hiper Metin” terimi, birbirine bağlı dokümanlar anlamına gelir; “İşaretleme Dili” ise metinleri etiketlerle (tag) tanımlayarak düzenlemeyi ifade eder. HTML, tarayıcıların metin, resim, video gibi içerikleri doğru şekilde görüntülemesini sağlar. Web geliştirmenin temel taşıdır ve tüm web siteleri HTML olmadan var olamaz.

HTML’in Tarihçesi

1991: Tim Berners-Lee, CERN’de bilim insanları arasında bilgi paylaşımı için HTML’i tasarladı. İlk sürümde sadece 18 etiket vardı.
1995: HTML 2.0, resmi standart olarak kabul edildi.
1997: HTML 3.2, tablo ve form gibi yeni özellikler eklendi.
1999: HTML 4.01, CSS desteğiyle birlikte yayınlandı.
2000: XHTML (daha katı sözdizimi) tanıtıldı.
2014: HTML5, modern web ihtiyaçlarını karşılamak üzere duyuruldu. Semantik etiketler, multimedya desteği ve API’ler eklendi.

HTML Nasıl Çalışır?
HTML, etiketler (tag) ve öznitelikler (attribute) kullanarak içeriği yapılandırır. Örneğin:

<p class="metin">Bu bir paragraftır.</p>

<p>: Açılış etiketi, </p>: Kapanış etiketi.
class: Öznitelik, ek bilgi sağlar.

Tarayıcılar, HTML dosyalarını okur, etiketleri yorumlar ve görsel bir web sayfasına dönüştürür.

Temel HTML Doküman Yapısı
Her HTML dosyası şu şekilde başlar:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Başlık</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>İlk web sayfam.</p>
</body>
</html>

<!DOCTYPE html>: HTML5 sürümünü belirtir.
<html>: Kök element.
<head>: Meta bilgiler (başlık, karakter seti) içerir.
<body>: Görüntülenen içerik burada yer alır.

Temel HTML Etiketleri ve Görevleri

Metin Düzenleme:

<h1>–<h6>: Başlıklar.
<p>: Paragraf.
<strong>, <em>: Kalın ve italik metin.

Bağlantı ve Görseller:

<a href="url">Bağlantı</a>: Link oluşturma.
<img src="resim.jpg" alt="Açıklama">: Resim ekleme.

Listeler:

<ul>, <ol>, <li>: Sırasız/sıralı liste.

Tablo ve Formlar:

<table>, <tr>, <td>: Tablo yapısı.
<form>, <input>, <button>: Kullanıcı girişi alanları.

HTML5 ile Gelen Yenilikler

Semantik Etiketler: <header>, <footer>, <article>, <section> gibi anlamsal etiketler.
Multimedya Desteği: <audio>, <video> etiketleri ve yerleşik oynatıcılar.
Canvas ve SVG: <canvas> ile dinamik grafikler çizme.
Form Geliştirmeleri: email, date, range gibi yeni input tipleri.
Yerel Depolama: Tarayıcıda veri saklama (localStorage).

HTML ile Birlikte Kullanılan Teknolojiler

CSS: Stil ve düzen için.
JavaScript: Etkileşim ve dinamik içerik için.
Backend Dilleri: PHP, Python gibi dillerle entegrasyon.

HTML Öğrenmeye Başlamak İçin İpuçları

Temel Etiketleri Öğrenin: Yukarıda listelenen etiketlerle başlayın.
Basit Projeler Yapın: Kişisel bir blog veya portfolyo sayfası oluşturun.
Kaynakları Kullanın: MDN Web Docs, W3Schools gibi platformlardan yararlanın.
Uygulama Yapın: CodePen veya JSFiddle’da kod denemeleri yapın.

En İyi Uygulamalar

Semantik HTML Kullanın: <div> yerine <nav>, <main> gibi etiketlerle SEO ve erişilebilirliği artırın.
Etiketleri Kapatın: Açılan her etiketi kapatmayı unutmayın.
W3C Validator: Kodunuzu W3C Validator ile kontrol edin.
Alt Özniteliği: Görsellere alt metni ekleyerek erişilebilirlik sağlayın.

Sonuç
HTML, web geliştirmenin temelidir ve her geliştiricinin öğrenmesi gereken ilk dildir. Modern standartlara uygun, semantik ve temiz HTML kodu yazmak, performanslı ve erişilebilir web siteleri inşa etmenin anahtarıdır. Teknolojinin gelişmesiyle HTML5 gibi güncellemeler, dilin yeteneklerini genişletmeye devam ediyor. Öğrenme yolculuğunuzda sabırlı olun ve bol bol pratik yapın!

Ek Okuma Önerileri: