Otwierasz nowy plik HTML i widzisz tajemniczy zapis </code> jeszcze przed właściwą treścią strony. Ta jedna linia decyduje o tym, jak przeglądarka interpretuje dokument, dlatego wyjaśniam jej znaczenie, poprawne użycie, wpływ na CSS oraz błędy, które potrafią popsuć układ strony.
Jedna deklaracja ustawia właściwy sposób interpretowania dokumentu
- DOCTYPE informuje przeglądarkę, że dokument jest napisany w HTML.
- Współczesny zapis to </strong>, umieszczony na samym początku pliku.
- Brak deklaracji może włączyć quirks mode, czyli tryb zgodności ze starymi przeglądarkami.
- DOCTYPE nie zastępuje meta charset, atrybutu języka ani poprawnej struktury dokumentu.
- Nie jest znacznikiem HTML i nie ma tagu zamykającego.
Co naprawdę oznacza doctype HTML i gdzie się znajduje
DOCTYPE to skrót od document type declaration, czyli deklaracji typu dokumentu. W praktyce zapis </code> mówi przeglądarce, że ma analizować plik jako dokument HTML według współczesnych reguł. Nie jest to zwykły element strony, dlatego nie dodajemy do niego tagu zamykającego.
</code>Najbezpieczniej umieścić deklarację jako pierwszą linię pliku, przed właściwym kodem HTML. Nie wyświetla się ona użytkownikowi i nie tworzy żadnego widocznego elementu. Jej zadaniem jest ustawienie reguł, według których przeglądarka odczyta pozostałe znaczniki oraz arkusze CSS.
Sam zapis nie mówi przeglądarce, że masz konkretnie HTML 5 w sensie numerowanej wersji. W nowoczesnym HTML używa się po prostu krótkiej deklaracji typu dokumentu. To rozwiązanie jest celowo proste i dobrze działa w aktualnych przeglądarkach.
Dlaczego brak DOCTYPE potrafi zmienić wygląd strony
Najważniejszym skutkiem deklaracji jest wybór trybu renderowania. Przy poprawnym zapisie przeglądarka korzysta z standards mode, czyli trybu zgodnego ze współczesnymi regułami HTML i CSS. Gdy deklaracji brakuje albo jest nieprawidłowa, może uruchomić quirks mode, który emuluje część dawnych zachowań przeglądarek.
Różnica nie jest wyłącznie teoretyczna. W quirks mode inaczej mogą być liczone szerokości elementów, wysokość tabel czy działanie modelu pudełkowego CSS. Efekt bywa frustrujący, bo kod wygląda poprawnie, a mimo to jeden element nie mieści się obok drugiego albo odstępy zachowują się inaczej niż w pozostałych częściach projektu.
W swojej pracy traktuję DOCTYPE jako punkt kontrolny przy każdej diagnozie problemów z układem. Zanim zacznę poprawiać marginesy i szerokości, sprawdzam, czy dokument działa w trybie standardowym. Bardzo często oszczędza to długiego szukania błędu w CSS.
Standards mode i quirks mode w praktyce
| Tryb | Jak działa | Co oznacza dla autora |
|---|---|---|
| Standards mode | Przeglądarka interpretuje HTML i CSS według współczesnych zasad. | To właściwy wybór dla nowych stron i aplikacji. |
| Quirks mode | Przeglądarka zachowuje część historycznych, niestandardowych reguł. | Stary kod może działać, ale nowy układ łatwiej się rozjeżdża. |
| Limited quirks mode | Stosowane są ograniczone wyjątki związane głównie z dawnymi dokumentami. | Może pojawić się przy niektórych historycznych deklaracjach. |
Jak wygląda poprawna deklaracja we współczesnym HTML
W nowych projektach nie ma powodu komplikować zapisu. Wystarczy dokładnie ta forma:
</code>W HTML obsługiwanym jako text/html wielkość liter w tej deklaracji nie ma praktycznego znaczenia, ale zapis wielkimi literami jest najbardziej czytelny i powszechnie przyjęty. Nie dopisuj numeru wersji, adresu definicji dokumentu ani dodatkowych słów.
DOCTYPE powinien pojawić się przed elementami dokumentu. Po nim umieszczasz właściwą strukturę strony, informacje o kodowaniu znaków, tytuł oraz treść. Sama deklaracja nie ustawia języka strony, kodowania ani responsywności.
Przykładowa strona
Treść strony
To ważne rozróżnienie. DOCTYPE wybiera sposób interpretowania dokumentu, a meta charset informuje, jak odczytywać znaki, na przykład polskie litery. Atrybut lang pomaga z kolei czytnikom ekranowym i narzędziom językowym rozpoznać język treści.
Stare deklaracje HTML a dzisiejszy zapis
W starszych projektach można spotkać bardzo długie deklaracje zawierające słowa PUBLIC, SYSTEM oraz odwołania do DTD. Były związane z dawnymi wersjami HTML i XHTML, kiedy deklaracja dokładniej wskazywała formalną definicję dokumentu.
| Rodzaj dokumentu | Typowy zapis | Dzisiejsza ocena |
|---|---|---|
| HTML 5 i współczesny HTML | </code> |
Najlepszy wybór dla nowych stron. |
| HTML 4.01 Strict | Długa deklaracja z identyfikatorem DTD | Spotykana głównie w starszych serwisach. |
| HTML 4.01 Transitional | Długa deklaracja dopuszczająca starsze rozwiązania | Może utrudniać utrzymanie i porządki w kodzie. |
| XHTML 1.0 | Rozbudowana deklaracja zależna od sposobu serwowania dokumentu | Ma znaczenie przede wszystkim przy konserwacji starego systemu. |
Jeśli rozwijasz nową stronę, wybór jest prosty. Użyj krótkiej deklaracji. Przy modernizacji starego serwisu nie zmieniałbym jej bez sprawdzenia całego układu, ponieważ przejście do standards mode może ujawnić problemy, które wcześniej były maskowane przez quirks mode.
To jeden z tych przypadków, w których stary zapis nie musi oznaczać natychmiastowej awarii. Może jednak sygnalizować, że projekt powstał według dawnych założeń i wymaga ostrożniejszego testowania po zmianach.
Najczęstsze błędy związane z DOCTYPE
Użycie zwykłego znacznika zamiast deklaracji
Niepoprawny zapis wygląda tak:
Brakuje w nim wykrzyknika po znaku otwierającym. Poprawna forma to </code>. Różnica jest niewielka wizualnie, ale przeglądarka traktuje te zapisy zupełnie inaczej.
Umieszczenie deklaracji za kodem
DOCTYPE dodany dopiero po pierwszym elemencie może nie przełączyć dokumentu do właściwego trybu. Dlatego nie wkładaj go między znaczniki ani na końcu pliku. Pierwsza linia dokumentu to najlepsza i najprostsza zasada.
Dodawanie zbędnych wariantów
Współczesny zapis nie potrzebuje ukośnika, numeru wersji ani adresu zewnętrznej definicji. Im dłuższa deklaracja w nowym projekcie, tym większa szansa, że ktoś skopiował rozwiązanie z przestarzałego poradnika.
Przeczytaj również: Kod HTML strony: Jak go sprawdzić i co z niego wyczytać?
Oczekiwanie, że DOCTYPE naprawi cały HTML
Deklaracja nie sprawdza poprawności kodu, nie poprawia błędnie zagnieżdżonych elementów i nie rozwiązuje problemów z responsywnością. Może ustawić właściwy tryb pracy, ale reszta zależy od struktury dokumentu, CSS, JavaScriptu i sposobu wyświetlania strony.
Jak sprawdzić, czy dokument działa w dobrym trybie
Najprostszy test możesz wykonać w konsoli narzędzi deweloperskich. Wpisz:
document.compatModeWynik "CSS1Compat" oznacza tryb standardowy albo ograniczony tryb standardowy. Wynik "BackCompat" wskazuje na quirks mode. Ten szybki test nie zastępuje pełnej kontroli kodu, ale bardzo dobrze sprawdza się podczas diagnozowania problemów z układem.
Przy okazji obejrzyj początek pliku i upewnij się, że deklaracja jest zapisana dokładnie jako </code>. Potem przetestuj stronę w kilku przeglądarkach i przy różnych szerokościach ekranu. Jeśli po dodaniu DOCTYPE układ nagle się zmienił, nie oznacza to, że deklaracja zepsuła stronę. Najczęściej ujawniła wcześniejsze zależności od niestandardowego trybu.
W przypadku starego projektu zmiany najlepiej wprowadzać etapami. Najpierw sprawdź podstawowy layout, formularze, tabele i komponenty oparte na precyzyjnych szerokościach. Dopiero później porządkuj CSS, bo sama zmiana deklaracji może zmienić sposób liczenia kilku elementów naraz.
Jedna linia, która oszczędza godziny poprawek w CSS
Jeżeli tworzysz nowy dokument, wpisz </code> jako pierwszą linię i nie komplikuj tego zapisu. Dzięki temu przeglądarka wybierze współczesny sposób interpretowania HTML, a reguły CSS będą działały bardziej przewidywalnie.
Najważniejsze jest jednak właściwe rozumienie tej deklaracji. DOCTYPE nie buduje strony i nie zastępuje poprawnego kodu, ale ustawia fundament, na którym opiera się renderowanie dokumentu. Gdy fundament jest prawidłowy, łatwiej znaleźć prawdziwe źródło problemu zamiast walczyć z objawami.
