Dokumentacja HTML z przykładami: Doctype

Q: Czy w doctype ma znaczenie wielkość liter?

Nie. , i znaczą to samo. Najczęstszy styl to wielkie DOCTYPE z małym html.

Q: Jak sprawdzić, czy strona jest w trybie quirks?

Otwórz konsolę przeglądarki i wpisz document.compatMode. "CSS1Compat" oznacza tryb standardów (lub ograniczony tryb quirks), a "BackCompat" tryb quirks.

Czym jest `<!DOCTYPE html>`

<!DOCTYPE html> to deklaracja typu dokumentu: pierwsza linia pliku HTML, przed znacznikiem <html>. Mówi przeglądarce "to jest nowoczesny dokument HTML", a przeglądarka odpowiada renderowaniem strony w trybie standardów, zgodnie z aktualnymi specyfikacjami HTML i CSS.

<!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>

Ta jedna linia to cały doctype HTML5. Nie ma znacznika zamykającego i nic więcej nie trafia do środka.

Zasady składni

Jest na samym początku. Przed nim mogą być tylko białe znaki i komentarze. Jakikolwiek tekst lub znacznik przed doctype sprawia, że przeglądarka go ignoruje.
Wielkość liter nie ma znaczenia. <!DOCTYPE html> i <!doctype html> są identyczne. Wybierz jeden styl i się go trzymaj.
To nie jest element. Nie ma </!DOCTYPE> i nie można mu dodać class ani innych atrybutów.
Słowo po DOCTYPE musi brzmieć html. <!DOCTYPE html5> to nie nowsza wersja; przeglądarka traktuje taką stronę tak, jakby nie miała poprawnego doctype.
Jeden na dokument. Strony budowane z kilku plików (szablony, dołączane fragmenty) i tak zwracają pojedynczy doctype na początku końcowego HTML.

Tryb standardów i tryb quirks

Przeglądarki mają trzy tryby renderowania, a doctype wybiera jeden z nich:

Tryb	Co go włącza	Co się zmienia
Tryb standardów	`<!DOCTYPE html>` i inne nowoczesne doctype'y	Wszystko działa zgodnie z aktualnymi specyfikacjami
Ograniczony tryb quirks	HTML 4.01 Transitional lub Frameset z adresem URL, XHTML 1.0 Transitional lub Frameset	Prawie standardy: różni się tylko jedna reguła wysokości linii, więc obrazek sam w linii (zwykle w komórce tabeli) nie ma pod sobą odstępu
Tryb quirks	Brak doctype, literówka w nim albo niektóre stare, np. HTML 4.01 Transitional bez adresu URL	Naśladuje przeglądarki z lat 90.: wysokości procentowe, rozmiar tekstu w tabelach i wysokości linii działają inaczej

Tryb quirks istnieje po to, żeby strony napisane przed standardami sieciowymi nadal wyglądały tak, jak widzieli je ich autorzy. Nowym stronom tylko szkodzi: height: 100%, które działa na jednej stronie, a na innej nie, albo tabele ignorujące rozmiar czcionki to klasyczne objawy braku doctype.

Podglądy w edytorach na tej stronie zawsze renderują się w trybie standardów, więc usunięcie w nich doctype nie pokaże trybu quirks. Poniższe narzędzie używa DOMParser, który stosuje te same reguły co przeglądarki przy wczytywaniu pliku. Zmień doctype w polu tekstowym, a tryb się zaktualizuje:

<!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>

Spróbuj usunąć linię, wpisać <!DOCTYPE html5> albo dodać jakieś słowo przed doctype: każda z tych zmian przełącza wynik na quirks.

Stare doctype'y: HTML 4.01 i XHTML

Przed HTML5 doctype wskazywał plik DTD z długim identyfikatorem publicznym. Nadal znajdziesz je na początku starszych stron:

<!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">

Przeglądarki nigdy nie pobierały tych plików DTD. Odczytywały tylko identyfikator, żeby wybrać tryb: HTML 4.01 Strict i XHTML 1.0 Strict dają tryb standardów, wersje Transitional dają ograniczony tryb quirks, a HTML 4.01 Transitional bez adresu URL daje pełny tryb quirks. Wklej któryś z nich do narzędzia powyżej, żeby to sprawdzić; zwróć uwagę, że compatMode zgłasza ograniczony tryb quirks jako CSS1Compat, tę samą wartość co tryb standardów, więc jako BackCompat pokazuje się tylko pełny tryb quirks.

Zamiana starego doctype na <!DOCTYPE html> jest bezpieczna dla stron, które już są w trybie standardów. Strona, która była w trybie quirks, może się lekko przesunąć (zwykle wysokości i odstępy pod obrazkami), więc po zmianie ją przejrzyj.

Doctype w DOM

Doctype staje się węzłem DocumentType, osobnym od elementu <html>. Skrypty odczytują go przez document.doctype, a document.compatMode podaje tryb, w którym ostatecznie działa strona:

<!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 to najszybszy sposób na sprawdzenie dowolnej działającej strony: otwórz konsolę przeglądarki i wpisz to. "CSS1Compat" oznacza tryb standardów (lub ograniczony tryb quirks), a "BackCompat" tryb quirks.

Kompletny szablon HTML5

Doctype to jedna część minimalnego dokumentu, od którego powinna zaczynać się każda strona. Każda linia poniżej ma swoje zadanie:

<!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>

Atrybut lang i znacznik meta viewport mają własne strony.

Częste błędy

Coś przed doctype. Przypadkowy znak, debugowe echo ze skryptu serwera albo znacznik HTML nad <!DOCTYPE html> przełącza całą stronę w tryb quirks. Komentarze i puste linie są w porządku.
Wymyślanie wersji. <!DOCTYPE html5> czy <!DOCTYPE HTML 5> nie są poprawne i włączają tryb quirks. Doctype HTML5 to po prostu <!DOCTYPE html>.
Zamykanie go. <!DOCTYPE html></!DOCTYPE> to niepoprawny HTML. Deklaracja nie ma znacznika zamykającego.
Pomijanie go w małych plikach testowych. Błędy układu, które ścigasz w pliku testowym bez doctype, mogą nie istnieć na prawdziwej stronie, i odwrotnie.
Zostawianie starego doctype Transitional. Przełącza stronę w ograniczony tryb quirks bez żadnej korzyści. Przejdź na <!DOCTYPE html>.

Najczęściej zadawane pytania

Co robi <!DOCTYPE html>?

Mówi przeglądarce, że strona to nowoczesny dokument HTML, więc renderuje się w trybie standardów. Bez niego przeglądarki przechodzą w tryb quirks, który naśladuje błędy przeglądarek z końca lat 90. i zmienia sposób obliczania niektórych układów i wysokości.

Czy <!DOCTYPE html> jest wymagany?

Strona wczyta się i bez niego, ale standard HTML go wymaga, a przeglądarki renderują wtedy stronę w trybie quirks. Zawsze umieszczaj <!DOCTYPE html> w pierwszej linii.

Czy w doctype ma znaczenie wielkość liter?

Nie. <!DOCTYPE html>, <!doctype html> i <!DocType HTML> znaczą to samo. Najczęstszy styl to wielkie DOCTYPE z małym html.

Czy DOCTYPE to znacznik HTML?

Nie. To deklaracja, a nie element: nie ma znacznika zamykającego ani atrybutów, które można dodać, i nie pojawia się w document.body. W DOM jest osobnym węzłem DocumentType, dostępnym jako document.doctype.

Jaki jest doctype dla HTML5?

<!DOCTYPE html>. HTML5 zrezygnował z długich identyfikatorów publicznych i adresów URL z HTML 4.01 i XHTML, a krótka forma to jedyny doctype potrzebny na każdej nowej stronie.

Jak sprawdzić, czy strona jest w trybie quirks?

Otwórz konsolę przeglądarki i wpisz document.compatMode. "CSS1Compat" oznacza tryb standardów (lub ograniczony tryb quirks), a "BackCompat" tryb quirks.

Powiązane zagadnienia