Объявление HTML <!DOCTYPE>
Узнайте об объявлении HTML <!DOCTYPE>: используйте <!DOCTYPE html> для включения режима стандартов и правильного старта документов.
Объявление <!DOCTYPE> — это самая первая строка HTML-документа. Оно сообщает браузеру, в какой версии HTML написана страница, и — что сегодня важнее всего — что страница должна отображаться в соответствии с веб-стандартами. Это не HTML-тег, а инструкция для браузера.
На этой странице рассматривается единственный тип doctype, который стоит использовать, объясняется, почему он важен (режим стандартов vs. режим совместимости), а также кратко описываются устаревшие doctypes, которые можно встретить в старом коде.
Doctype, который следует использовать
Для каждого нового HTML-документа используйте эту единственную строку в точности как есть:
<!DOCTYPE html>Это полный doctype HTML5. Несколько правил:
- Он должен быть первым в документе, перед тегом
<html>и перед любым другим содержимым (даже перед комментарием или пустой строкой — для надёжности). - Он не чувствителен к регистру —
<!DOCTYPE html>,<!doctype html>и<!Doctype HTML>— всё это допустимые варианты. Строчный<!doctype html>встречается часто, но приведённый выше вариант является наиболее распространённым. - Закрывающего тега нет.
Минимальный полноценный документ выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with a line break.</p>
</body>
</html>Чтобы узнать, что располагается в документе после doctype, смотрите Основные теги HTML, тег <html> и тег <head>.
Почему doctype важен: режим стандартов vs. режим совместимости
Когда браузер разбирает страницу, он выбирает один из двух режимов отображения:
- Режим стандартов — браузер следует современным спецификациям W3C/WHATWG. Именно это вам и нужно. Разметка, блочная модель и CSS ведут себя одинаково во всех браузерах.
- Режим совместимости (Quirks Mode) — браузер имитирует поведение с ошибками, характерное для браузеров конца 1990-х (таких как Internet Explorer 5), чтобы очень старые страницы не ломались. Этот режим включается, когда doctype отсутствует, некорректен или является устаревшим/неизвестным.
Именно корректный <!DOCTYPE html> переключает браузер в режим стандартов. Если опустить его, вы переходите в режим совместимости, где многое меняется неожиданным образом:
- Блочная модель ломается. В режиме совместимости
widthиheightвключают в себя отступы и рамки (старая блочная модель IE), поэтому блок, размер которого задан как200px, может отображаться шире или уже, чем ожидается. line-height,vertical-alignи расстояние между строчными элементами ведут себя иначе, нередко создавая лишние отступы вокруг изображений и ячеек таблицы.- Единицы CSS и проценты могут наследоваться и вычисляться непоследовательно.
Эти ошибки трудно диагностировать, потому что ваш CSS выглядит правильно — неправильным является режим. Добавление doctype решает проблему, именно поэтому каждый современный документ должен начинаться с него.
document.compatMode: значение "CSS1Compat" означает режим стандартов, "BackCompat" — режим совместимости.Примечание об устаревших doctypes
До HTML5 doctype ссылался на Document Type Definition (DTD) — формальную грамматику, описывающую допустимые элементы и атрибуты. Эти объявления были длинными и легко могли содержать ошибки, например HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">HTML 4.01 выпускался в вариантах Strict, Transitional и Frameset, а XHTML 1.0 / 1.1 добавил ещё несколько (например, "-//W3C//DTD XHTML 1.0 Strict//EN"). Их можно встретить в старых кодовых базах.
Главный вывод: HTML5 заменил всё это единственным коротким <!DOCTYPE html>. Это кратчайший допустимый doctype, который надёжно включает режим стандартов, и единственный, который нужно писать сегодня.