HTML Belge Yapısı: doctype, html, head ve body Öğeleri

En küçük doğru HTML belgesi

MDN'nin quirks modu rehberinde önerilen iskelet aşağıdaki gibidir. Sayfa dilini lang="tr" ile Türkçe olarak belirttik ve karakter kodlamasını UTF-8 olarak bildirdik:

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8" />
    <title>Ürün listesi - Örnek Mağaza</title>
  </head>
  <body>
    <h1>Ürün listesi</h1>
    <p>Bu sayfa belge iskeletini gösterir.</p>
  </body>
</html>

Bu kısa belgede her satırın bir gerekçesi var: doctype standart modu açar, lang ekran okuyucuların doğru telaffuz kullanmasını sağlar, <meta charset> tarayıcının Türkçe karakterleri doğru çözmesini garanti eder, <title> ise sekmede ve yer imlerinde görünen addır. Aşağıda bu parçaları tek tek inceliyoruz.

Doctype: quirks, limited-quirks ve no-quirks modu

Web'in ilk yıllarında sayfalar çoğu zaman Netscape Navigator ve Internet Explorer için ayrı ayrı yazılıyordu. Web standartları ortaya çıktığında tarayıcılar standartlara bir anda geçemezdi; geçselerdi eski sitelerin büyük kısmı bozulurdu. Çözüm olarak tarayıcılar, standartlara uygun yeni sayfaları eski sayfalardan farklı işleyen modlar geliştirdi. MDN bugün üç mod tanımlar:

Tarayıcı, HTML belgelerinde hangi modu kullanacağına belgenin başındaki doctype'a bakarak karar verir. <!doctype html> mümkün olan en basit doctype'tır ve güncel standartların önerdiği biçimdir; MDN'ye göre bugünkü bütün tarayıcılar bu bildirimle no-quirks modunu kullanır. Eski HTML sürümlerinin uzun doctype'larını (DTD adresi içerenleri) kullanmak için geçerli bir neden yoktur; yanlış bir varyant seçerseniz sayfanız limited-quirks ya da quirks moduna düşebilir.

Doctype'ı belgenin en başına, başka hiçbir içerikten önce yazın. MDN, eski standartlarda doctype'ın ek anlamlar taşıdığını ama hiçbir tarayıcının onu mod seçmekten başka bir amaçla kullanmadığını vurgular. Yani doctype bir sürüm beyanı değil, bir mod anahtarıdır; MDN örneklerinin hepsinde kısa ve küçük harfli <!doctype html> biçimi kullanılır.

Sayfanın hangi modda olduğunu nasıl görürsünüz?

JavaScript'te document.compatMode değeri belgenin modunu gösterir: değer "BackCompat" ise sayfa quirks modundadır, değilse "CSS1Compat" döner. Firefox ayrıca sayfa quirks ya da limited-quirks modunda işlendiğinde geliştirici araçlarının konsol sekmesine bir uyarı yazar; uyarı yoksa no-quirks modu kullanılıyordur. Tarayıcı konsoluna şu satırı yazarak kontrol edebilirsiniz:

document.compatMode;

Doctype'lı bir sayfada sonuç "CSS1Compat" olmalıdır. Konsol kullanımı ve JavaScript temelleri için JavaScript öğrenme rehberi yazısına bakabilirsiniz.

XHTML olarak sunulan sayfalar

Sayfanızı Content-Type başlığında application/xhtml+xml MIME türüyle XHTML olarak sunarsanız doctype'a gerek yoktur, çünkü bu belgeler her zaman no-quirks modunda işlenir. Ancak XHTML'e benzeyen içeriği text/html türüyle sunarsanız tarayıcı onu HTML olarak okur ve standart mod için yine doctype gerekir. Sayfanızın hangi türle sunulduğundan emin değilseniz doctype'ı her durumda yazmak en güvenli yoldur.

html öğesi: kök ve sayfa dili

<html> belgenin kök öğesidir; diğer bütün öğeler onun torunu olmak zorundadır ve bir belgede yalnızca bir tane bulunur. İzin verilen içeriği bir <head> ve onu izleyen bir <body> öğesidir. Eskiden kullanılan version özniteliği gereksizdir, çünkü sürüm bilgisi zaten doctype ile tekrarlanıyordu. xmlns ise XML ayrıştırıcısıyla işlenen belgelerde zorunlu, text/html belgelerinde isteğe bağlıdır.

Bu öğenin asıl önemli özniteliği global lang özniteliğidir. MDN'ye göre <html> üzerinde geçerli bir BCP 47 dil etiketi vermek, ekran okuyucuların sayfayı hangi dilde seslendireceğini belirlemesine yardım eder; dil verilmezse ekran okuyucular genellikle işletim sisteminin diline döner ve bu yanlış telaffuza yol açabilir. Dil bildirimi <head> içindeki <title> gibi meta bilgilerin de doğru seslendirilmesini sağlar. Türkçe bir sayfa için değer tr olur. Sayfanın bazı bölümleri başka dildeyse o bölümlere ayrı lang verilir; ayrıntılar HTML lang ve dir özniteliği yazısında.

<html> öğesinin örtük ARIA rolü document olarak tanımlanır ve bu öğeye role özniteliği verilmesine izin verilmez. Aynı kısıt <head> ve <body> için de geçerlidir.

head öğesi: makine için bilgi

<head> belgenin başlığı, betikleri ve stil dosyaları gibi makinece okunacak meta verilerini içerir; bir belgede yalnızca bir tane olabilir. MDN, <head> öğesinin insanlar için değil makine işlemesi için olduğunu, sayfada görünen başlık ve yazar bilgisi için ise <header> öğesinin kullanılacağını hatırlatır. Bu iki öğe adları benzediği için sık karıştırılır; <header> için HTML semantik etiketler yazısına bakın.

İzin verilen içerik kuralı önemlidir: belge bir <iframe> srcdoc belgesi değilse ya da başlık bilgisi daha üst bir protokolden (ör. bir HTML e-postasının konu satırından) gelmiyorsa, <head> bir veya daha fazla metadata öğesi içermeli ve bunlardan tam olarak biri <title> olmalıdır. Metadata içerik kategorisindeki öğeler şunlardır:

Karakter kodlaması için tek satır yeterlidir: <meta charset="utf-8">. MDN'ye göre bu özniteliğin değeri büyük-küçük harf ayrımı olmaksızın utf-8 olmalıdır, çünkü HTML belgeleri için geçerli tek kodlama UTF-8'dir. Kodlamayı bildiren <meta> öğesi belgenin ilk 1024 baytı içinde eksiksiz yer almalıdır; bu yüzden onu <head> içinde ilk sıraya koymak iyi bir alışkanlıktır. Diğer meta etiketleri HTML meta etiketleri, viewport ayarı ise mobil uyumluluk yazısında anlatılıyor.

<title> yalnızca metin içerir; içine yazdığınız HTML etiketleri de düz metin olarak ele alınır. Erişilebilirlik açısından her sayfanın başlığı benzersiz olmalı ve sayfanın amacını önce, site adını sonra vermelidir, çünkü ekran okuyucu kullanıcıları bir sayfaya girdiklerinde ilk olarak başlığı duyar. Başlığın arama sonuçlarındaki rolü için Google başlık ve meta açıklama yazma yazısına bakın.

body öğesi: görünen içerik

<body> belgenin içeriğini temsil eder, belgede bir tane bulunur ve <html> öğesinin ikinci çocuğu olmak zorundadır. İzin verilen içeriği flow içeriktir; yani başlıklar, paragraflar, listeler, formlar, tablolar ve bölümleme öğeleri buraya gelir. JavaScript tarafında document.body ile erişilir ve DOM arayüzü HTMLBodyElement olarak geçer.

<body> üzerinde onload, onhashchange, onbeforeunload gibi pencere olaylarına karşılık gelen olay öznitelikleri tanımlıdır. MDN, bu olayları addEventListener() ile dinlemenin de mümkün olduğunu belirtir. Eski bgcolor, background, text, link, vlink, alink ve kenar boşluğu öznitelikleri ise kullanımdan kalkmıştır; her birinin yerine bir CSS özelliği kullanılır. Bu eski özniteliklerin listesi kullanımdan kalkan etiketler yazısında.

Hangi etiketler yazılmadan bırakılabilir?

MDN'deki teknik özetlerin 'Tag omission' satırı şaşırtıcı bir kural gösterir: <html>, <head> ve <body> öğelerinin başlangıç ve bitiş etiketleri belirli koşullarda yazılmayabilir. Örneğin <html> başlangıç etiketi, içindeki ilk şey bir yorum değilse atlanabilir; <head> başlangıç etiketi, içindeki ilk şey bir öğeyse atlanabilir. Tarayıcı bu öğeleri yine oluşturur. MDN'nin <hgroup> sayfasındaki örnek, bu kısaltılmış yazımın geçerli olduğunu gösterir:

<!doctype html>
<html lang="tr">
<title>Kısa yazılmış belge</title>
<p>Head ve body etiketleri yazılmadı, tarayıcı bunları kendisi oluşturur.</p>

Geçerli olması, önerildiği anlamına gelmez. MDN, <html> etiketlerini yazmanın önemli olduğunu, çünkü sayfa dilini lang ile ancak bu sayede verebileceğinizi vurgular. Bu yüzden <html> başlangıç etiketini her zaman yazın. <head> ve <body> etiketlerini açıkça yazmak da kodu okuyan herkesin işini kolaylaştırır. Yazılmayan etiketlerin kuralı, örneğin <body> için, ilk içeriğin <meta>, <link>, <script> ya da <style> olduğu durumda değişir; bu ayrıntıları akılda tutmak yerine etiketleri yazmak daha güvenlidir.

HTML yorumları

Yorumlar <!-- ile başlar ve --> ile biter. Tarayıcı yorumları işlerken yok sayar; sayfada görünmezler, yalnızca kaynak kodda okunurlar. Yorumlar tek satır ya da çok satır olabilir ve bir kod parçasını geçici olarak devre dışı bırakmak için de kullanılabilir:

<!-- Tek satırlık yorum -->

<!--
  Birden fazla satıra
  yayılan yorum
-->

<!-- Aşağıdaki paragraf geçici olarak kapatıldı -->
<!--
<p>Bu içerik sayfada gösterilmez.</p>
-->

Yorum yazarken MDN'nin belirttiği kurallara dikkat edin:

• Yorum metni > ya da -> ile başlayamaz, içinde --> veya --!> geçemez ve <!- ile bitemez (<! kullanılabilir).
• Yorumlar iç içe yazılamaz: bir <!-- sonrasında gelen ilk --> yorumu kapatır. İçinde yorum bulunan bir bloğu yorum içine alırsanız iç yorumun kapanışı dış yorumu erken bitirir.
• Yorumlar yalnızca içerik olarak kullanılabilir; bir etiketin içine, örneğin iki öznitelik arasına yazılamaz.
• Doctype'tan önce ve sonra, <html> öğesinden önce ve sonra ve çoğu öğenin içinde kullanılabilirler. İçeriği ham metin olarak yorumlayan <script>, <style>, <title> ve <textarea> öğelerinin içinde HTML yorumu çalışmaz.
• Yorumlar < ile başlayıp > ile bitse de birer HTML öğesi değildir.

<script> içinde JavaScript yorumları kullanılmalıdır. Eskiden betik içeriğini HTML yorumuna sarma alışkanlığı vardı; MDN bunu artık JavaScript'in eski bir özelliği olarak tanımlar ve buna güvenmemenizi söyler. CSS'in de kendi yorum sözdizimi vardır.

Sık yapılan hatalar

• Doctype'ı unutmak ya da başa koymamak: doctype'tan önce içerik bulunması veya hiç yazılmaması sayfayı quirks moduna sokabilir.
• Eski uzun doctype'ları kopyalamak: HTML 4.01 ya da XHTML 1.0 dönemine ait bildirimler gereksizdir ve bazıları limited-quirks modunu tetikleyebilir.
• İki title ya da hiç title kullanmamak: <head> içinde tam olarak bir <title> bulunmalıdır.
• charset satırını sona koymak: kodlama bildirimi ilk 1024 bayt içinde yer almazsa geçersiz olur; uzun bir <head> içinde en alta yazılan <meta charset> bu sınırı aşabilir.
• lang özniteliğini atlamak: ekran okuyucular yanlış dilde seslendirme yapabilir.
• head ile header'ı karıştırmak: logo ve site başlığı <head> içine değil, <body> içindeki <header> öğesine konur.

Sık Sorulan Sorular

Eski sitemdeki uzun doctype'ı değiştirmeli miyim?

Evet, değiştirmeniz önerilir. MDN'ye göre daha karmaşık bir doctype kullanmanın geçerli bir nedeni yoktur ve bazı eski varyantlar sayfayı limited-quirks ya da quirks moduna sokabilir. Yerine <!doctype html> yazdıktan sonra sayfanın görünümünü kontrol edin, çünkü quirks moduna göre hazırlanmış eski stiller standart modda farklı sonuç verebilir.

head ve body etiketlerini yazmazsam sayfa bozulur mu?

Hayır, MDN'deki 'Tag omission' kuralları belirli koşullarda bu etiketlerin atlanmasına izin verir ve tarayıcı öğeleri kendisi oluşturur. Yine de lang verebilmek için <html> başlangıç etiketini, okunabilirlik için de <head> ve <body> etiketlerini yazmanızı öneririz.

UTF-8 dışında bir kodlama kullanabilir miyim?

MDN'ye göre <meta charset> değeri yalnızca utf-8 olabilir, çünkü HTML belgeleri için geçerli tek kodlama budur. Bu öznitelik belgenin hangi kodlamayla yazıldığını bildirdiği için dosyanın kendisinin de metin düzenleyicinizde UTF-8 olarak kaydedilmiş olması gerekir.

Quirks modunda olduğumu nereden anlarım?

Tarayıcı konsolunda document.compatMode yazın. "BackCompat" dönüyorsa sayfa quirks modundadır; doctype'ı kontrol edin ve en başa <!doctype html> ekleyin.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML meta etiketleri · lang ve dir özniteliği · HTML semantik etiketler · HTML web sayfası oluşturma