Çalıştırılabilir HTML Dokümanları: Doctype

Q: Doctype büyük küçük harfe duyarlı mı?

Hayır. , ve aynı anlama gelir. En yaygın yazım büyük harfle DOCTYPE, küçük harfle html şeklindedir.

Q: Bir sayfanın quirks modunda olup olmadığını nasıl anlarım?

Tarayıcı konsolunu aç ve document.compatMode yaz. "CSS1Compat" standart mod (ya da sınırlı quirks modu), "BackCompat" quirks modu demektir.

`<!DOCTYPE html>` nedir

<!DOCTYPE html> doctype bildirimidir: bir HTML dosyasının <html> etiketinden önce gelen ilk satırı. Tarayıcıya "bu modern bir HTML belgesi" der, tarayıcı da sayfayı güncel HTML ve CSS spesifikasyonlarına uyarak standart modda gösterir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

HTML5 doctype'ın tamamı bu tek satırdır. Kapanış etiketi yoktur ve içine başka bir şey yazılmaz.

Sözdizimi kuralları

En başta gelir. Ondan önce yalnızca boşluk ve yorum olabilir. Doctype'tan önce gelen herhangi bir metin ya da etiket, tarayıcının onu yok saymasına yol açar.
Büyük küçük harfe duyarlı değildir. <!DOCTYPE html> ile <!doctype html> aynıdır. Bir yazım seç ve ona bağlı kal.
Bir element değildir. </!DOCTYPE> diye bir şey yoktur ve ona class ya da başka bir özellik ekleyemezsin.
DOCTYPE'tan sonraki kelime html olmalı. <!DOCTYPE html5> daha yeni bir sürüm değildir; tarayıcı o sayfayı geçerli bir doctype'ı yokmuş gibi ele alır.
Belge başına bir tane. Birkaç dosyadan (şablonlar, include'lar) oluşturulan sayfalar da son HTML'in en üstünde tek bir doctype üretir.

Standart mod ve quirks modu

Tarayıcıların üç görüntüleme modu vardır ve doctype bunlardan birini seçer:

Mod	Neyle tetiklenir	Ne değişir
Standart mod	`<!DOCTYPE html>` ve diğer modern doctype'lar	Her şey güncel spesifikasyonlara uyar
Sınırlı quirks modu	URL'li HTML 4.01 Transitional ya da Frameset, XHTML 1.0 Transitional ya da Frameset	Neredeyse standart: yalnızca bir satır yüksekliği kuralı farklıdır, bu yüzden bir satırda tek başına duran bir resmin (genellikle bir tablo hücresinde) altında boşluk kalmaz
Quirks modu	Doctype yok, yanlış yazılmış ya da URL'siz HTML 4.01 Transitional gibi bazı eski doctype'lar	1990'ların tarayıcılarını taklit eder: yüzde yükseklikler, tablo yazı boyutu ve satır yükseklikleri farklı davranır

Quirks modu, web standartlarından önce yazılmış sayfaların yazarlarının gördüğü gibi görünmeye devam etmesi için vardır. Yeni sayfalarda ise yalnızca sorun çıkarır: bir sayfada çalışıp diğerinde çalışmayan bir height: 100% ya da yazı boyutunu yok sayan tablolar, eksik doctype'ın klasik belirtileridir.

Bu sayfadaki editör önizlemeleri her zaman standart modda çalışır, bu yüzden oradaki doctype'ı silmek sana quirks modunu göstermez. Aşağıdaki denetleyici DOMParser kullanır; bu da tarayıcıların bir dosyayı yüklerken uyguladığı kuralların aynısını uygular. Metin kutusundaki doctype'ı düzenle, mod anında güncellenir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Satırı silmeyi, <!DOCTYPE html5> yazmayı ya da doctype'ın önüne bir kelime koymayı dene: her biri sonucu quirks moduna çevirir.

Eski doctype'lar: HTML 4.01 ve XHTML

HTML5'ten önce doctype, uzun bir public identifier ile bir DTD dosyasını belirtirdi. Eski sitelerin en üstünde bunlara hâlâ rastlarsın:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Tarayıcılar bu DTD dosyalarını hiçbir zaman indirmedi. Identifier'ı yalnızca bir mod seçmek için okudular: HTML 4.01 Strict ve XHTML 1.0 Strict standart mod verir, Transitional sürümler sınırlı quirks modu verir, URL'siz HTML 4.01 Transitional ise tam quirks modu verir. Denemek için birini yukarıdaki denetleyiciye yapıştır. compatMode sınırlı quirks modunu standart modla aynı değer olan CSS1Compat olarak bildirir, bu yüzden BackCompat olarak yalnızca tam quirks modu görünür.

Standart modda olan sayfalarda eski bir doctype'ı <!DOCTYPE html> ile değiştirmek güvenlidir. Quirks modunda olan bir sayfa biraz kayabilir (genellikle yükseklikler ve resimlerin altındaki boşluklar), bu yüzden değişiklikten sonra sayfayı gözden geçir.

DOM'da doctype

Doctype, <html> elementinden ayrı bir DocumentType düğümü olur. Script'ler ona document.doctype ile ulaşır, document.compatMode ise sayfanın hangi moda düştüğünü bildirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode, yayındaki herhangi bir siteyi kontrol etmenin en hızlı yoludur: tarayıcı konsolunu aç ve yaz. "CSS1Compat" standart (ya da sınırlı quirks) mod, "BackCompat" quirks modu demektir.

Eksiksiz bir HTML5 başlangıç şablonu

Doctype, her sayfanın başlaması gereken en küçük belgenin bir parçasıdır. Aşağıdaki her satırın bir görevi var:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

lang özelliği ve meta viewport etiketi için ayrı sayfalar var.

Sık yapılan hatalar

Doctype'tan önce bir şey olması. Başıboş bir karakter, bir sunucu script'inden kalan hata ayıklama echo çıktısı ya da <!DOCTYPE html> satırının üstündeki bir HTML etiketi, bütün sayfayı quirks moduna sokar. Yorumlar ve boş satırlar sorun değildir.
Sürüm uydurmak. <!DOCTYPE html5> ya da <!DOCTYPE HTML 5> geçerli değildir ve quirks modunu tetikler. HTML5 doctype'ı sadece <!DOCTYPE html> şeklindedir.
Onu kapatmak. <!DOCTYPE html></!DOCTYPE> geçerli HTML değildir. Bildirimin kapanış etiketi yoktur.
Küçük test dosyalarında unutmak. Doctype'sız bir deneme dosyasında peşine düştüğün yerleşim hataları gerçek sayfada olmayabilir, tersi de geçerli.
Eski bir Transitional doctype'ı tutmak. Sayfayı hiçbir fayda sağlamadan sınırlı quirks moduna sokar. <!DOCTYPE html> kullan.

Sıkça Sorulan Sorular

<!DOCTYPE html> ne işe yarar?

Tarayıcıya sayfanın modern bir HTML belgesi olduğunu söyler, böylece sayfa standart modda gösterilir. Doctype yoksa tarayıcılar quirks moduna geçer. Bu mod 1990'ların sonundaki tarayıcıların hatalarını taklit eder ve bazı yerleşimlerin ve yüksekliklerin nasıl hesaplandığını değiştirir.

<!DOCTYPE html> yazmak zorunlu mu?

Sayfa onsuz da açılır, ama HTML standardı onu şart koşar ve tarayıcılar sayfayı quirks modunda gösterir. <!DOCTYPE html> satırını her zaman ilk satıra yaz.

Doctype büyük küçük harfe duyarlı mı?

Hayır. <!DOCTYPE html>, <!doctype html> ve <!DocType HTML> aynı anlama gelir. En yaygın yazım büyük harfle DOCTYPE, küçük harfle html şeklindedir.

DOCTYPE bir HTML etiketi mi?

Hayır. Bir element değil, bir bildirimdir: kapanış etiketi yoktur, ekleyebileceğin bir özelliği yoktur ve document.body içinde görünmez. DOM'da document.doctype ile erişilen ayrı bir DocumentType düğümüdür.

HTML5 için doctype nedir?

<!DOCTYPE html>. HTML5, HTML 4.01 ve XHTML'deki uzun public identifier ve URL'leri kaldırdı. Yeni bir sayfa için ihtiyacın olan tek doctype bu kısa hâlidir.

Bir sayfanın quirks modunda olup olmadığını nasıl anlarım?

Tarayıcı konsolunu aç ve document.compatMode yaz. "CSS1Compat" standart mod (ya da sınırlı quirks modu), "BackCompat" quirks modu demektir.

İlgili kavramlar