Что такое DOCTYPE и для чего он нужен?
Представьте, что вы даете браузеру инструкцию по сборке сложного конструктора ― вашей веб-страницы. Но конструкторы бывают разные: старые, новые, с разными правилами сборки. Браузеру нужно точно знать, по каким правилам «собирать» вашу страницу, чтобы все элементы выглядели и работали так, как вы задумали.
DOCTYPE (Document Type Declaration — декларация типа документа) и есть та самая инструкция. Она сообщает, какую версию языка разметки вы используете на своей странице. Главная задача DOCTYPE ― переключить браузер в один из двух режимов отображения:
- Standards Mode — браузер пытается отобразить страницу, максимально следуя современным веб-стандартам.
- Quirks Mode ― если DOCTYPE отсутствует или указан некорректно, браузер переходит в этот режим. Он пытается имитировать поведение старых браузеров, чтобы отобразить очень старые сайты, написанные не по стандартам.
История DOCTYPE
Чтобы понять, почему DOCTYPE стал таким, какой он есть, заглянем в прошлое. Изначально в HTML каждый тип документа должен был иметь формальное описание своей структуры – DTD (Document Type Definition). DOCTYPE как раз и ссылался на этот DTD, чтобы браузеры могли проверить правильность разметки документа.
В конце 90-х и начале 2000-х разразилась «война браузеров» между Netscape Navigator и Internet Explorer. Каждый производитель внедрял свои собственные теги и правила отображения CSS. Это привело к тому, что один и тот же сайт мог выглядеть совершенно по-разному в разных браузерах.
Разработчики поняли, что нужно как-то поддерживать и старые сайты, написанные в эпоху хаоса, и новые, стремящиеся к каким-то стандартам. Так и родилась идея режима совместимости для старых сайтов и режима стандартов для новых. А ключом для переключения между ними стал DOCTYPE. Наличие «правильного» DOCTYPE сигнализировало браузеру, что нужно использовать Standards Mode.
С приходом HTML5 все радикально упростилось. DOCTYPE оставили лишь как исторически сложившийся механизм для включения режима стандартов. Поэтому был выбран максимально простой и легко запоминаемый DOCTYPE:
<!DOCTYPE html>Основные типы DOCTYPE и их различия
История знает много DOCTYPE, а современному веб-разработчику зачастую важно владеть в основном одним. Однако полезно иметь представление и о старых, чтобы понимать, что вы видите в чужом старом коде.
HTML5 DOCTYPE (современный стандарт)
<!DOCTYPE html>Включает режим стандартов во всех современных браузерах. Это единственный DOCTYPE, который вам нужно использовать для всех новых веб-страниц.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>Включал режим стандартов для HTML 4.01. Требовал строгого следования правилам, без устаревших элементов и атрибутов оформления (вроде align). Разметка должна была быть отделена от представления CSS.
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd">Также включал режим стандартов, но допускал использование некоторых устаревших тегов и атрибутов для совместимости.
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd">Использовался для страниц, делящих окно браузера на фреймы с помощью тега <frameset>. Предназначен только для структуры фреймов, но они устарели и больше не используются.
XHTML 1.0 Strict / Transitional / Frameset и XHTML 1.1
Существовали аналогичные DOCTYPE для XHTML (HTML, написанный по строгим правилам XML). Они были еще более требовательны к синтаксису, например, все теги должны быть закрыты, а атрибуты — в кавычках).
Пример XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Как правильно использовать DOCTYPE
Использовать его в современном HTML5 ― проще простого, но есть одно золотое правило. DOCTYPE должен быть самой первой строкой в вашем документе. Ничего не должно стоять перед ним — ни пробелов, ни комментариев, ни тем более тега <html>.
Пример правильной структуры документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport» content="width=device-width, initial-scale=1.0">
<title>Моя страница</title>
<link rel="stylesheet» href="style.css">
</head>
<body>
<h1>Всем привет!</h1>
<p>Здесь страница с правильным DOCTYPE.</p>
<script src="script.js"></script>
</body>
</html>Спецификация нечувствительна к регистру в этой строке. <!doctype html>, <!Doctype Html> тоже сработают. Но лучше придерживаться общепринятого варианта для единообразия.
Частые ошибки и как их избежать
Несмотря на простоту <!DOCTYPE html>, новички (да и не только) иногда допускают ошибки. Вот самые распространенные:
Забыть указать DOCTYPE
Браузер переходит в режим совместимости (Quirks Mode), и ваша верстка может «поехать», отображаться по-разному в браузерах и не поддерживать современные CSS-свойства. Всегда начинайте документ с <!DOCTYPE html>. Используйте шаблоны или автозаполнение в редакторе кода.
Поставить что-то перед DOCTYPE
Даже пробел, пустая строка или комментарий перед <!DOCTYPE html> могут привести к тому, что браузер не распознает декларацию и уйдет в Quirks Mode. Строго следите, чтобы <!DOCTYPE html> был абсолютным началом файла.
Опечатки в DOCTYPE
Лишний пробел, опечатка или отсутствие восклицательного знака приведет к тому, что браузер не поймет декларацию. Внимательно проверяйте написание или используйте готовые шаблоны вашего редактора кода.
Использование устаревших DOCTYPE для новых проектов
Хотя старые DOCTYPE могут включить режим стандартов, они могут не поддерживать все возможности. Кроме того, это просто излишне усложняет код и может сбить с толку других разработчиков. Для всех новых проектов используйте только <!DOCTYPE html>.
DOCTYPE — это не просто случайный набор символов, а способ сказать браузеру: «Работай по современным правилам». Это ключ к предсказуемой и кроссбраузерной верстке. Эта простая, но важная строка должна всегда быть на своем месте — в самом начале кода.