DOCTYPE — что это такое во frontend-разработке

Коротко

Первая строка HTML-документа, которая сообщает браузеру, что страницу нужно отображать по современным стандартам, а не в режиме совместимости со старыми сайтами.

Что такое «DOCTYPE»

В конце 1990-х браузеры отображали страницы с множеством отступлений от стандартов, и тысячи сайтов были свёрстаны под эти особенности. Когда браузеры начали следовать спецификациям, старые сайты могли развалиться. Решение нашли компромиссное: если в начале документа есть правильное объявление типа, браузер работает по стандартам, а если нет — эмулирует поведение старых версий. Так doctype превратился из ссылки на описание языка в переключатель режима.

Пример объявления

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Каталог</title>
</head>

В HTML5 объявление сократилось до одной короткой строки, регистр букв значения не имеет. Раньше писали длинные варианты со ссылкой на файл описания языка, например <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Их и сейчас можно встретить в старых шаблонах; часть таких вариантов включает не полный стандартный, а промежуточный режим.

Три режима отображения

Стандартный режим — поведение по спецификациям. Включается строкой <!DOCTYPE html>.
Почти стандартный режим — отличается мелочами, в основном высотой строк вокруг картинок в ячейках таблиц.
Режим совместимости — эмуляция старых браузеров: иначе ведут себя высоты в процентах, таблицы и ряд других правил. Включается, если doctype нет или он из числа совсем старых — например, HTML 3.2 или HTML 4.01 Transitional без ссылки на DTD.

Как проверить режим страницы

Откройте консоль разработчика и выполните document.compatMode. Ответ "CSS1Compat" означает стандартный или почти стандартный режим, "BackCompat" — режим совместимости. Некоторые браузеры также пишут предупреждение о режиме в консоль.

Частая причина неожиданного «BackCompat» на сайтах на PHP — вывод чего-либо до doctype. Предупреждение PHP, отладочный вывод или лишний текст из подключаемого файла попадают в самое начало ответа, и строка с doctype уже не первая. Браузер переключается в режим совместимости, и вёрстка «едет» без изменений в CSS. Поэтому при странных поломках макета стоит посмотреть исходный код страницы: первой строкой должен идти именно doctype.