Deklaracja <!DOCTYPE html> to wbrew pozorom bardzo ważny element każdej poprawnej strony internetowej. Informuje przeglądarkę, jaka wersja języka HTML została użyta w dokumencie, a w praktyce – że ma renderować stronę w trybie zgodnym ze współczesnym standardem HTML5. Dzięki temu przeglądarka nie próbuje włączać tzw. „quirks mode”, czyli trybu zgodności ze starymi, historycznymi błędami Internet Explorera, tylko stosuje aktualne zasady specyfikacji. Moim zdaniem to jest jeden z tych drobiazgów, które po prostu trzeba pisać z automatu na górze każdego pliku .html. W starszych wersjach HTML deklaracja DOCTYPE była dużo dłuższa i określała konkretne DTD (Document Type Definition), np. dla HTML 4.01 Transitional czy XHTML 1.0 Strict. W HTML5 uproszczono to do jednej, krótkiej formy: <!DOCTYPE html>. To właśnie ta linijka mówi: „to jest dokument HTML5”. Na tej podstawie silnik przeglądarki dobiera reguły parsowania, walidacji struktury i sposób interpretacji wielu elementów, np. sekcji <header>, <footer>, <section>, a także nowych atrybutów formularzy. W praktyce, gdy tworzysz nową stronę, zawsze zaczynasz od: <!DOCTYPE html> <html lang="pl"> <head>… Jeśli pominiesz DOCTYPE albo wpiszesz go błędnie, możesz mieć kłopot z tym, że strona wygląda inaczej w różnych przeglądarkach, pojawią się problemy z modelu pudełkowym CSS (box model), z obsługą nowych znaczników lub z poprawnym działaniem responsywnego layoutu. Walidatory W3C też zakładają konkretną wersję HTML na podstawie DOCTYPE i pod nią sprawdzają poprawność kodu. Z mojego doświadczenia wynika, że poprawny DOCTYPE to absolutna podstawa profesjonalnego front-endu, nawet jeśli wygląda jak coś „magicznego” na samej górze pliku.
Deklaracja <!DOCTYPE html> bywa często lekceważona, bo wydaje się tylko jakimś tajemniczym napisem na samej górze pliku. Przez to wiele osób przypisuje jej funkcje, których w ogóle nie pełni. Warto to uporządkować, bo zrozumienie roli DOCTYPE ma duże znaczenie przy profesjonalnym tworzeniu stron WWW. Przede wszystkim DOCTYPE nie ma nic wspólnego z tytułem strony. Tytuł ustawia się w elemencie <title> wewnątrz sekcji <head>, np. <title>Moja strona</title>. To właśnie ta wartość jest wyświetlana na karcie przeglądarki i używana przez wyszukiwarki jako tytuł wyniku. Deklaracja <!DOCTYPE html> nie zawiera żadnych informacji tekstowych dla użytkownika ani dla SEO. Częsty błąd to też kojarzenie DOCTYPE z responsywnością i dostosowaniem strony do różnych rozmiarów urządzeń. Za zachowanie na urządzeniach mobilnych odpowiada głównie meta-tag viewport, np. <meta name="viewport" content="width=device-width, initial-scale=1.0">, oraz odpowiednio napisane reguły CSS (media queries, elastyczne siatki, jednostki procentowe, rem, vw itp.). DOCTYPE jedynie włącza nowoczesny tryb renderowania, ale sam z siebie nie sprawia, że strona jest „mobile-friendly”. To już zadanie dla projektanta front-endu. Nie można też wiązać DOCTYPE z indeksowaniem strony przez wyszukiwarki. Roboty Google czy innych wyszukiwarek bazują na treści, strukturze semantycznej, linkach, meta-opisach, szybkości ładowania, danych strukturalnych i wielu innych czynnikach. Obecność poprawnego DOCTYPE jest mile widziana ze względu na standardy i poprawny rendering, ale nie jest to znacznik, który mówi: „indeksuj tę stronę” albo „pozycjonuj ją wyżej”. Takie myślenie to typowy skrót: skoro coś jest na samej górze, to musi być ważne dla SEO – a tutaj to po prostu nie jest prawda. Rzeczywista funkcja deklaracji <!DOCTYPE html> polega na poinformowaniu przeglądarki, jaką specyfikację HTML ma stosować przy interpretacji dokumentu. Współcześnie jest to HTML5. Dzięki temu przeglądarka przechodzi w tzw. standard mode i korzysta z aktualnych reguł parsowania, co wpływa na spójność działania CSS i HTML w różnych silnikach. To jest fundament poprawnego renderowania, ale zupełnie inny obszar niż tytuł strony, responsywność czy pozycjonowanie. Z mojego doświadczenia wynika, że kiedy ktoś myli rolę DOCTYPE, później ma problemy z diagnozowaniem, czemu strona zachowuje się inaczej, niż się spodziewa – bo szuka przyczyn nie tam, gdzie trzeba.