HTML Temel Etiketleri
HTML, web sayfalarının içeriğini ve yapısını tanımlamak için kullanılan
bir
işaretleme dilidir.
Bu bölümde, HTML temel etiketleri hakkında bilgi verilecektir.
Temel Etiketlere Giriş Yapısal Sözleşmenin Kodlanması
Bu bölüm, önceki felsefi tartışmamızda ele alınan katmanının, tarayıcı tarafından yorumlanan somut sözleşmesini incelemektedir.
HTML'in mimari önemi, sadece içeriği barındırması değil, aynı zamanda belgenin mantıksal hiyerarşisini ve işlevini belirleyen katı bir sözleşme görevi görmesidir.
Temel etiketler, bu sözleşmenin ""iki ana amacına"" hizmet eder:
Tarayıcı Uyumluğunu Zorunlu Kılmak: <!DOCTYPE html> gibi bildiriler, tarayıcının sayfayı hangi standartta yorumlayacağını belirler ve bu da sayfanın tüm cihazlarda
"tutarlı bir şekilde" görüntülenmesini sağlar , bu, Bakım Kolaylığı için hayati öneme sahiptir.
Anlamsal Konteynerler Oluşturmak:<head> ve <body> gibi etiketler, belgenin içeriğini ve meta verilerini mantıksal olarak iki ana, ayrık bölüme ayırır ( Sorumlulukların Ayrımı ilkesinin en temel uygulamasıdır ).
Bu yapılar, modern "Bileşen Tabanlı Mimari" için bir çerçeve sunar; zira tüm JavaScript/React bileşenlerinin nihai olarak yerleşeceği ana akışı ( <body> ) tanımlayan konteynerlerdir.
DOCTYPE Etiket Açıklamaları DOCTYPE Etiketi Nedir ve Neden Önemlidir?
<!DOCTYPE html> , teknik olarak bir etiket değil, belgenin ilk satırında yer alan ve tarayıcıya belgeyi hangi katı kurallar bütününe göre işlemesi gerektiğini bildiren zorunlu bir talimattır.
Bu bildirim, modern web mimarisinin "Uyumluluk" ve Bakım Kolaylığı" niteliklerini garanti etmesi açısından kritik bir öneme sahiptir.
Tarihsel Basitleşme ve Standardizasyonun Güvencesi:HTML'in eski sürümlerinde ( HTML 4.01, XHTML ), DOCTYPE bildirimi bir DTD'ye referans verirdi ve oldukça karmaşık bir yapıya sahipti.
HTML5'in çıkışıyla birlikte, bu yapı "radikal bir şekilde" basitleştirilmiştir.
Amacı, geliştiricinin "sözleşmeyi kolayca uygulamasını" sağlamak ve tarayıcıların geçmişteki kural setlerini hatırlama yükünü azaltmaktır.
Mimari Rol: Standartlar Modunu Zorunlu KılmakDOCTYPE bildirimi olmadan, tarayıcılar geriye dönük uyumluluğu sağlamak amacıyla Quirks Modu (Uyumsuzluk Modu) adı verilen eski, standart dışı ve tarayıcıya özgü kuralları kullanmaya başlar.
Quirks Modu Bu modda, tarayıcı, geliştiricilerin eski, hatalı kodlarını taklit etmeye çalışır.
Bu, aynı CSS kodunun farklı tarayıcılarda "tamamen farklı" görünmesine neden olur.
Standards Modu (Standartlar Modu): <!DOCTYPE html> bildirimi, tarayıcıyı "Modern Standartlar Modu"'nu kullanmaya zorlar.
Bu modda, tarayıcı CSS ve HTML kurallarını W3C spesifikasyonlarına göre kesinlikle yorumlar.
Sonuç olarak, <!DOCTYPE html> kullanmak, geliştiricinin kodunun "öngörülebilir" ve "uyumlu" bir ortamda çalışacağından emin olmasını sağlayan temel bir yapısal sözleşmedir.
Bu, DRY ve Bakım Kolaylığı prensiplerinin temelini oluşturur.
HTML Etiket Açıklamaları HTML Etiketi Nedir ve Neden Önemlidir?
<html> etiketi, tüm HTML belgesini kapsayan ve bir web sayfasının en üst düzey, tekil başlangıç noktasını ( Kök Düğüm / Root Node ) belirleyen etikettir.
Bu, tarayıcıya "İşte HTML belgenizin içeriği ve meta verisi buradan başlıyor" sinyalini veren yapısal bir zorunluluktur.
<html> etiketinin ana mimari rolü, belgenin işlevselliklerini "iki net bölmeye" ayırmaktır:
Görünmez Veri (<head>): Sayfanın tarayıcıya veya arama motorlarına yönelik tüm meta verilerini tutar.
Görünür İçerik (<body>): Kullanıcının etkileşime girdiği ve gördüğü tüm içeriği barındırır.
Bu kapsülleme, Sorumlulukların Ayrımı: (Separation of Concerns) ilkesinin en temel uygulamasıdır.
<html> etiketi, tüm bu ayrık bölmeleri kendi çatısı altında tutarak belgenin bütünlüğünü ve hiyerarşik düzenini sağlar.
AQC Katkısı: lang Özelliği ve Erişilebilirlik<html> etiketinin en önemli niteliği olan lang (dil) özelliği, basit bir dil seçimi olmaktan öte, kritik bir "Nitelik Gereksinimi" (AQC) aracıdır.
Erişilebilirlik (Accessibility): Lang niteliği (lang="tr"), ekran okuyucular (screen readers) gibi yardımcı teknolojilere belgedeki içeriğin hangi dilde yazıldığını bildirir.
Bu sayede engelli kullanıcılar için içeriğin anlaşılırlığını ve kalitesini doğrudan artırmasını sağlar.
SEO ve Uluslararasılaşma: Arama motorları, lang özelliğini sayfanın coğrafi hedeflemesi ve içeriğin bağlamı için kullanır.
Bu, uygulamanın "Optimize Edilebilirlik" (SEO AQC'si) hedeflerini destekler.
HEAD Etiketi: Belge Başlığı ve Meta Verileri HEAD Etiketi Nedir ve Neden Önemlidir?
<head> etiketi, bir HTML belgesinin görünmez, ancak hayati önem taşıyan yapısal sınırını temsil eder.
Bu bölüm, kullanıcının doğrudan görmediği, ancak tarayıcı, arama motorları ve sosyal medya platformları gibi makinelerin belgeyi doğru bir şekilde işleyip anlaması için gereken tüm bilgileri içerir.
Mimari açıdan, sayfanın konfigürasyon ve kaynak bildirim katmanıdır.
<head> etiketinin temel rolü, Sorumlulukların Ayrımı ilkesini uygulayarak meta veriyi, asıl içerikten (<body> ) kesinlikle ayırmaktır.
Tanım: Sayfanın karakter seti ( <meta charset> ), görüntüleme ayarları ( <meta viewport> ), başlığı ( <title> ) ve sayfa dışından gelen tüm kaynak bağlantıları ( <link> , <script>) burada bulunur.
İşlevselliği Aktarma: <head>; , Görünüm ( CSS ) ve Davranış ( JavaScript ) katmanlarının kaynaklarını bildiren bölgedir.
Harici CSS dosyaları ( <link rel="stylesheet">) ve JavaScript modülleri ( <script src="...">) burada tanımlanarak, tarayıcıya içeriği yüklemeden önce "gerekli stil ve mantık dosyalarını" indirme talimatı verilir.
AQC Katkısı: Performans ve SEO<head> içeriği, uygulamanın Nitelik Gereksinimleri üzerinde belirleyici bir etkiye sahiptir:
Performans: CSS ve kritik JavaScript dosyalarının <head> içinde senkron olarak yüklenmesi, tarayıcının sayfayı doğru bir şekilde hızla çizmeye başlaması için gereklidir.
Bu, tarayıcının Kritik Oluşturma Yolu'nu hızlandırmak için bir mimari karardır.
SEO ve Erişilebilirlik: <title> ve <meta description> etiketleri, arama motorlarının sayfayı indekslemesi ve kullanıcıya sonuçlarda sunması için temeldir.
Ayrıca, doğru karakter kodlaması ( <meta charset> ) bildirimi, tüm dillerdeki karakterlerin doğru görüntülenmesini garanti ederek Erişilebilirlik AQC'sini destekler.
<head> etiketi, uygulamanın içten dışa doğru nasıl yapılandırıldığını ve dış dünyaya nasıl sunulduğunu belirleyen "beyin merkezidir".
BODY Etiketi: Belge Gövdesi ve Uygulama Akışının Başlangıcı BODY Etiketi Nedir ve Neden Önemlidir?
<body> etiketi, bir HTML belgesinin kullanıcı tarafından görülebilen, etkileşimli içeriğinin tamamını barındıran temel yapısal konteynerdir.
Mimari açıdan, bu etiket uygulamanın görsel sınırını ve uygulama akışının başladığı ana sahneyi tanımlar.
<body> etiketi, Sorumlulukların Ayrımı ilkesi gereği, sayfanın konfigürasyon ve meta verilerinden ( <head> ) kesinlikle ayrılmıştır.
İçerik Sorumluluğu: Kullanıcının etkileşime girdiği tüm öğeler ( metinler, resimler, formlar, bağlantılar ) bu etiketin içinde yer alır.
Bu, "görsel sunumun" tek sorumluluğudur.
JavaScript Bağlantısı (Composition Root):Modern Bileşen Tabanlı Mimari bağlamında, <body> etiketi genellikle "ana bağlantı noktası" olarak kullanılır.
React veya Vue gibi bir JavaScript çatısı, tüm bileşen ağacını bu etiketin içindeki tek bir <div> (veya doğrudan <body> içine) render etmeye başlar.
Bu, <body> etiketini Davranış katmanının çalıştığı ana alan haline getirir.
<body> etiketinin içeriği ve yapısı, uygulamanın Nitelik Gereksinimleri üzerinde doğrudan etkilidir:
Performans (AQC): Tarayıcı, "Kritik Oluşturma Yolu'nu" (Critical Rendering Path) izlerken, <body> içeriğini çizmeyi (render) birincil öncelik olarak alır.
<body> etiketinin içinde gereksiz ve ağır yapılar bulundurmak, sayfanın görüntülenme süresini yavaşlatarak Performans AQC'sini olumsuz etkiler.
Hiyerarşik Düzen: <body> etiketinin içindeki elementlerin sırası ve iç içe geçme düzeni, içeriğin kullanıcıya sunulma sırasını ve mantıksal hiyerarşisini belirler.
Bu hiyerarşi, Erişilebilirlik ve anlamsal akış için kritik öneme sahiptir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Örnek Sayfa</title>
</head>
<body>
<!-- Sayfa içeriği -->
</body>
</html>Tarayıcı Desteği
HTML etiketleri, modern web standartlarının temelini oluşturduğu için tüm güncel tarayıcılar tarafından tam desteklenmektedir.
Aşağıda listelenen tarayıcılar, HTML5 standartlarına uygun olarak bu etiketleri sorunsuz bir şekilde yorumlayabilir ve görüntüleyebilir.
Tarayıcı uyumluluğu, web geliştiricilerin farklı platformlarda tutarlı bir kullanıcı deneyimi sunmasını sağlar.