HTML sayfa yapısı, bir web sitesinin iskeletini oluşturan temel bileşenlerden meydana gelir. HTML’in mantığını anlamak, web geliştirmeye başlarken en önemli adımlardan biridir. Şimdi, bir HTML belgesinin nasıl yapılandığını ve temel bileşenlerini inceleyelim.
HTML Belgesinin Temel Yapısı
Her HTML belgesi, belirli bir hiyerarşiye sahip etiketler kullanılarak oluşturulur. Temel HTML sayfa yapısı şu şekildedir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benim İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba, Dünya!</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>
Bu kod, en basit haliyle bir HTML sayfasını temsil eder. Şimdi bu yapının temel bileşenlerine bakalım.
<html>, <head>, <body> Etiketleri
Bir HTML belgesi, üç temel kısımdan oluşur:
<!DOCTYPE html>→ Tarayıcıya HTML5 standardı kullanıldığını belirtir.<html>→ Tüm HTML içeriğini kapsayan ana etikettir.<head>→ Sayfa ile ilgili meta bilgileri içerir.<body>→ Sayfanın kullanıcıya gösterilen içeriğini barındırır.
1. <html> Etiketi
<html> etiketi, tüm HTML belgesini kapsayan en dış katmandır. “lang” özelliği, sayfanın dilini belirtmek için kullanılır (Örn: lang="tr").
2. <head> Etiketi
<head> bölümü, sayfanın başlık bilgilerini içerir ve doğrudan kullanıcıya görünmez. İçinde şu bileşenler yer alır:
<title>→ Tarayıcı sekmesinde görünen başlık.<meta charset="UTF-8">→ Türkçe karakterlerin doğru görüntülenmesini sağlar.<meta name="viewport" content="width=device-width, initial-scale=1.0">→ Mobil uyumluluk için sayfanın ölçeklendirilmesini ayarlar.
3. <body> Etiketi
<body> bölümü, kullanıcının gördüğü tüm içeriği barındırır. Metinler, resimler, videolar, butonlar ve diğer tüm web öğeleri burada yer alır.
DOCTYPE Nedir?
<!DOCTYPE html> bildirimi, HTML belgesinin hangi sürümle yazıldığını tarayıcıya bildirir. Günümüzde en yaygın kullanılan HTML sürümü HTML5 olduğundan, genellikle şu şekilde kullanılır:
<!DOCTYPE html>
Eskiden HTML4 ve XHTML gibi farklı sürümler kullanılıyordu, ancak HTML5 ile bu sistem sadeleştirilmiştir.
Sonuç
HTML sayfa yapısını anlamak, web geliştirme sürecinde en kritik adımdır. <html>, <head> ve <body> etiketleri ile sayfanın temel iskeletini oluşturabilir, meta bilgilerle SEO ve performans optimizasyonu sağlayabilirsiniz.