HTML Nedir?

Öğe, etiket ve nitelik

Bu üç kelime sık birbirinin yerine kullanılır ama farklı şeyleri anlatır:

<a href="/iletisim/" lang="tr">Bize ulaşın</a>

• Etiket (tag): Açılış <a> ve kapanış </a> işaretleri.
• Öğe (element): Açılış etiketi, içerik ve kapanış etiketinin bütünü; yani bağlantının kendisi.
• Nitelik (attribute): Açılış etiketine eklenen ad-değer çiftleri. href bağlantının hedefini, lang içeriğin dilini belirtir.

Bazı öğelerin içeriği ve kapanış etiketi yoktur: <img>, <br>, <meta>, <input> bunlara örnektir ve "boş öğe" (void element) olarak adlandırılır. Öğeler iç içe yerleştirilerek bir ağaç oluşturur; tarayıcı bu ağacı okuyup bellekte DOM'a dönüştürür.

Bir HTML belgesinin iskeleti

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kurumsal Web Tasarım Hizmeti</title>
    <meta name="description" content="Hizmetin kısa özeti.">
    <link rel="stylesheet" href="/stil.css">
  </head>
  <body>
    <header>…</header>
    <main>
      <h1>Kurumsal Web Tasarım</h1>
      <p>…</p>
    </main>
    <footer>…</footer>
  </body>
</html>

<!DOCTYPE html> tarayıcıyı standart modda çalıştırır; eksik olduğunda sayfa eski tarayıcı davranışlarını taklit eden "quirks" modunda çizilir. <head> ziyaretçiye görünmeyen ama tarayıcı ve arama motorları için kritik bilgileri taşır: karakter kodlaması, viewport ayarı, sayfa başlığı (title etiketi), açıklama ve stil dosyaları. <body> ise görünen içeriği barındırır. lang niteliği, ekran okuyucuların doğru telaffuzu seçmesine ve tarayıcıların çeviri önermesine yardım eder.

HTML5'ten Living Standard'a

HTML uzun yıllar numaralı sürümlerle (HTML 4.01, XHTML 1.0, HTML5) ilerledi. Bugün ise tek bir güncel spesifikasyon var: tarayıcı üreticilerinin yer aldığı WHATWG tarafından sürdürülen HTML Living Standard. WHATWG ve W3C, 2019'da imzaladıkları anlaşmayla bundan sonra tek bir HTML sürümü üzerinde birlikte çalışmayı kabul etti. "Living" ifadesi, standardın belirli aralıklarla dondurulan sürümler yerine sürekli güncellenmesini anlatır. Yani "HTML5" bugün daha çok modern HTML için kullanılan bir pazarlama adıdır; teknik olarak takip edilen belge Living Standard'dır.

Tarayıcılar hatalı kodu nasıl işler?

HTML affedici bir dildir: kapatılmamış bir etiket ya da yanlış iç içe yerleştirilmiş öğeler sayfanın çökmesine yol açmaz. Living Standard, önceki sürümlerden farklı olarak geçersiz belgelerin nasıl işleneceğini de ayrıntılı biçimde tanımlar; böylece bütün tarayıcılar aynı hatalı kodu aynı ağaca dönüştürür. Ancak ortaya çıkan ağaç, yazarın kastettiği ağaç olmayabilir. Örneğin bir <p> içine <div> yerleştirildiğinde ayrıştırıcı paragrafı erkenden kapatır ve stil kuralları beklenmedik öğelere uygulanır. W3C'nin doğrulama aracı (Nu HTML Checker) bu tür sorunları yayına almadan önce yakalamaya yardım eder.

HTML, CSS ve JavaScript'in iş bölümü

HTML içeriğin ne olduğunu, CSS nasıl görüneceğini, JavaScript ise nasıl davranacağını belirler. Bu ayrım korunduğunda içerik, stil ve betik yüklenmese bile okunabilir kalır. Arama motorları ve yapay zekâ sistemleri de bir sayfayı öncelikle HTML üzerinden anlar: başlık etiketleri, başlık yapısı, bağlantılar ve görsellerin alt metinleri bu katmanda yer alır. Bir butonu <div> yerine <button> ile, bir menüyü <nav> ile işaretlemek gibi anlam taşıyan öğe seçimlerinin ayrıntısı anlamsal HTML maddesinde anlatılıyor.