Исполняемые доки HTML: Doctype

Q: Важен ли регистр в doctype?

Нет. , и означают одно и то же. Чаще всего пишут DOCTYPE заглавными буквами, а html строчными.

Q: Как проверить, что страница в режиме совместимости?

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

Что такое `<!DOCTYPE html>`

<!DOCTYPE html> это объявление типа документа: первая строка HTML-файла, перед тегом <html>. Оно говорит браузеру «это современный HTML-документ», и браузер отображает страницу в стандартном режиме, по действующим спецификациям HTML и CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

Эта одна строка и есть весь doctype HTML5. У него нет закрывающего тега, и внутрь ничего не пишут.

Правила синтаксиса

Он стоит первым. Перед ним допустимы только пробелы и комментарии. Любой текст или тег перед doctype заставит браузер его проигнорировать.
Регистр не важен. <!DOCTYPE html> и <!doctype html> одинаковы. Выберите один стиль и придерживайтесь его.
Это не элемент. Не бывает </!DOCTYPE>, и к нему нельзя добавить class или другие атрибуты.
После DOCTYPE должно идти слово html. <!DOCTYPE html5> не является более новой версией: браузер считает, что у такой страницы нет корректного doctype.
Один на документ. Страницы, собранные из нескольких файлов (шаблоны, include), все равно выводят один doctype в начале итогового HTML.

Стандартный режим и режим совместимости

У браузеров три режима отображения, и doctype выбирает один из них:

Режим	Что его включает	Что меняется
Стандартный режим (standards mode)	`<!DOCTYPE html>` и другие современные doctype	Все работает по действующим спецификациям
Почти стандартный режим (limited quirks mode)	HTML 4.01 Transitional или Frameset с URL, XHTML 1.0 Transitional или Frameset	Почти стандартный: отличается только одно правило высоты строки, поэтому у картинки, стоящей в строке одна (обычно в ячейке таблицы), нет зазора снизу
Режим совместимости (quirks mode)	Нет doctype, doctype с опечаткой или некоторые старые, например HTML 4.01 Transitional без URL	Имитирует браузеры 1990-х: по-другому ведут себя высоты в процентах, размер текста в таблицах и высота строк

Режим совместимости нужен, чтобы страницы, написанные до появления веб-стандартов, выглядели так, как их видели авторы. Для новых страниц он приносит только проблемы: height: 100%, который работает на одной странице и не работает на другой, или таблицы, игнорирующие ваш размер шрифта, это классические признаки отсутствующего doctype.

Превью редактора на этой странице всегда работает в стандартном режиме, поэтому если удалить там doctype, режим совместимости вы не увидите. Проверка ниже использует DOMParser, который применяет те же правила, что и браузер при загрузке файла. Измените doctype в текстовом поле, и режим обновится:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Попробуйте удалить строку, написать <!DOCTYPE html5> или поставить слово перед doctype: в каждом случае результат переключится на quirks.

Старые doctype: HTML 4.01 и XHTML

До HTML5 doctype указывал на DTD-файл с длинным публичным идентификатором. Такие строки до сих пор встречаются в начале старых сайтов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Браузеры никогда не скачивали эти DTD-файлы. Они только читали идентификатор, чтобы выбрать режим: HTML 4.01 Strict и XHTML 1.0 Strict дают стандартный режим, версии Transitional дают почти стандартный режим, а HTML 4.01 Transitional без URL дает полный режим совместимости. Вставьте любой из них в проверку выше; учтите, что compatMode сообщает почти стандартный режим как CSS1Compat, то есть то же значение, что и у стандартного, поэтому как BackCompat отображается только полный режим совместимости.

Заменить старый doctype на <!DOCTYPE html> безопасно для страниц, которые уже работают в стандартном режиме. Страница, которая была в режиме совместимости, может немного сдвинуться (обычно высоты и зазоры под картинками), поэтому просмотрите ее после замены.

Doctype в DOM

Doctype превращается в узел DocumentType, отдельный от элемента <html>. Скрипты читают его через document.doctype, а document.compatMode сообщает, в каком режиме оказалась страница:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode это самый быстрый способ проверить любой живой сайт: откройте консоль браузера и введите его. "CSS1Compat" означает стандартный (или почти стандартный) режим, "BackCompat" означает режим совместимости.

Полный шаблон HTML5

Doctype это часть минимального документа, с которого стоит начинать каждую страницу. У каждой строки ниже своя задача:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

У атрибута lang и тега meta viewport есть отдельные страницы.

Частые ошибки

Что-то стоит перед doctype. Случайный символ, отладочный echo из серверного скрипта или HTML-тег над <!DOCTYPE html> переводят всю страницу в режим совместимости. Комментарии и пустые строки допустимы.
Выдуманная версия. <!DOCTYPE html5> или <!DOCTYPE HTML 5> некорректны и включают режим совместимости. Doctype HTML5 это просто <!DOCTYPE html>.
Попытка его закрыть. <!DOCTYPE html></!DOCTYPE> не является корректным HTML. У объявления нет закрывающего тега.
Doctype забыт в маленьких тестовых файлах. Ошибки верстки, которые вы ловите в черновом файле без doctype, могут не существовать на настоящей странице, и наоборот.
Оставлен старый Transitional doctype. Он без всякой пользы переводит страницу в почти стандартный режим. Замените его на <!DOCTYPE html>.

Часто задаваемые вопросы

Что делает <!DOCTYPE html>?

Он сообщает браузеру, что страница является современным HTML-документом, и она отображается в стандартном режиме. Без него браузер переходит в режим совместимости (quirks mode), который имитирует ошибки браузеров конца 1990-х и меняет расчет некоторых раскладок и высот.

Обязателен ли <!DOCTYPE html>?

Страница загрузится и без него, но стандарт HTML его требует, а браузер отобразит страницу в режиме совместимости. Всегда ставьте <!DOCTYPE html> в первую строку.

Важен ли регистр в doctype?

Нет. <!DOCTYPE html>, <!doctype html> и <!DocType HTML> означают одно и то же. Чаще всего пишут DOCTYPE заглавными буквами, а html строчными.

DOCTYPE это HTML-тег?

Нет. Это объявление, а не элемент: у него нет закрывающего тега, к нему нельзя добавить атрибуты, и его нет в document.body. В DOM это отдельный узел DocumentType, доступный как document.doctype.

Какой doctype у HTML5?

<!DOCTYPE html>. В HTML5 убрали длинные публичные идентификаторы и URL из HTML 4.01 и XHTML, и короткой формы достаточно для любой новой страницы.

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

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

Связанные концепции