<!DOCTYPE html>
Deklaracja typu dokumentu w pierwszej linii pliku. Mówi przeglądarce, żeby wyświetliła stronę w trybie standardów, a nie w trybie zgodności.
- Wyświetlanie
- brak (nie jest wyświetlany)
- Dozwolona zawartość
- Brak. To pojedyncza deklaracja bez treści i bez znacznika zamykającego
Przykład
#<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lekcja 1: pierwsza strona | CodeWorlds</title>
</head>
<body>
<h1>Moja pierwsza strona</h1>
</body>
</html>Definicja i zastosowanie
#Zapis <!DOCTYPE html> to deklaracja typu dokumentu, w skrócie doctype. Nie jest elementem ani znacznikiem: nie ma atrybutów ani znacznika zamykającego i niczego nie wyświetla. Ma jedno zadanie: przekazać przeglądarce, że plik to współczesny dokument HTML, który należy wyświetlić według aktualnych standardów.
Przeglądarki mają dwa główne tryby wyświetlania. W trybie standardów (standards mode) stosują obecne reguły HTML i CSS. W trybie zgodności (quirks mode) naśladują błędy przeglądarek sprzed ponad dwudziestu lat, żeby bardzo stare strony wyglądały tak jak dawniej: tabele nie dziedziczą rozmiaru czcionki, wysokości w procentach liczą się inaczej, a CSS przyjmuje nawet długości bez jednostek, takie jak width: 200. Tryb zgodności włącza się właśnie wtedy, gdy deklaracji brakuje.
Deklaracja musi stać na samym początku pliku, przed znacznikiem <html>. Przed nią przeglądarka toleruje tylko białe znaki i komentarze. Jeśli najpierw trafi na jakikolwiek tekst albo znacznik, na przykład na komunikat błędu wypisany przez kod serwera, uzna, że deklaracji nie ma, i przełączy stronę w tryb zgodności. Wielkość liter nie ma znaczenia, więc <!doctype html> działa tak samo.
Starsze wersje HTML i XHTML używały długich deklaracji z identyfikatorem i adresem definicji typu dokumentu (DTD). Przeglądarki nie pobierały tych plików, tylko rozpoznawały napis i na tej podstawie wybierały tryb. Część starych deklaracji włącza tryb prawie standardowy (almost standards), który różni się od trybu standardów tylko sposobem liczenia wysokości linii, co widać głównie przy obrazkach w komórkach tabel. W nowych stronach używaj wyłącznie krótkiego <!DOCTYPE html>.
Składnia
#<!DOCTYPE html>Więcej przykładów
#<p>Ten podgląd działa w trybie: <strong id="current"></strong></p>
<p>Dokument z deklaracją: <strong id="with-doctype"></strong></p>
<p>Dokument bez deklaracji: <strong id="without-doctype"></strong></p>
<script>
const parser = new DOMParser();
const withDoctype = parser.parseFromString('<!DOCTYPE html><p>Cześć</p>', 'text/html');
const withoutDoctype = parser.parseFromString('<p>Cześć</p>', 'text/html');
document.getElementById('current').textContent = document.compatMode;
document.getElementById('with-doctype').textContent = withDoctype.compatMode;
document.getElementById('without-doctype').textContent = withoutDoctype.compatMode;
</script>Właściwość document.compatMode zwraca BackCompat w trybie zgodności, a w pozostałych przypadkach CSS1Compat. DOMParser tworzy w pamięci dwa niewidoczne dokumenty, które różnią się tylko deklaracją, i to wystarcza, żeby działały w różnych trybach.
<!-- HTML 4.01 Strict: tryb standardów -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 Transitional: tryb prawie standardowy -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- HTML5 i nowsze: wystarczy to -->
<!DOCTYPE html>Takie deklaracje spotkasz w starych szablonach i kursach. Nadal działają, ale w nowym kodzie zamień je na krótkie <!DOCTYPE html>.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W VS Code wpisz w pustym pliku
.htmlznak!i naciśnij Tab. Emmet wstawi cały szkielet dokumentu razem z deklaracją. - Jeśli układ zachowuje się dziwnie, np.
height: 100%działa inaczej niż w poradnikach albo tekst w tabelach ma zły rozmiar, wpisz w konsolidocument.compatMode. WynikBackCompatoznacza brakującą lub źle umieszczoną deklarację.
Powiązane hasła
#- <html>Korzeń dokumentu HTML. Wszystkie pozostałe elementy strony znajdują się w jego wnętrzu.
- <head>Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
- <meta>Metadane strony: kodowanie znaków, ustawienia widoku na telefonie, opis dla wyszukiwarek i podgląd linku w serwisach społecznościowych.
- <!-- … -->Komentarz w kodzie HTML: notatka dla ludzi, której przeglądarka nie wyświetla, choć każdy zobaczy ją w źródle strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.