DOCTYPE

<!DOCTYPE html> -- объявление типа документа, которое переключает браузер в стандартный режим рендеринга (standards mode).

Зачем нужно

DOCTYPE определяет, в каком режиме браузер будет отображать страницу. Без него браузер может переключиться в quirks mode -- режим обратной совместимости со старыми страницами 1990-х, где CSS box model и другие правила работают иначе.

Где используется

  • Первая строка каждого HTML-документа
  • Генерируется автоматически фреймворками и CMS
  • Шаблоны серверного рендеринга

Предпосылки

DOCTYPE в деталях

Синтаксис HTML5

<!DOCTYPE html>

Это всё, что нужно в HTML5. Регистр не важен -- <!doctype html> и <!DOCTYPE HTML> работают одинаково.

DOCTYPE -- не HTML-тег. Это инструкция для браузера. У неё нет закрывающего тега, нет атрибутов (в HTML5), и она не является частью DOM-дерева.

Старые DOCTYPE (для контекста)

В HTML 4.01 и XHTML 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 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

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

Эти монстроидальные конструкции ссылались на DTD (Document Type Definition) -- формальное описание допустимых элементов и атрибутов. В HTML5 от DTD отказались.

Три режима рендеринга

Режим Когда активируется Поведение
Standards mode <!DOCTYPE html> Современные стандарты CSS и HTML
Almost standards mode Некоторые старые DOCTYPE Почти стандартный, мелкие отличия в таблицах
Quirks mode Нет DOCTYPE или ошибочный Эмуляция поведения IE5 / Netscape 4

Quirks mode -- что ломается

В quirks mode браузер работает иначе:

1. Box model меняется:

/* Standards mode (W3C box model): */
/* width = content width */
/* total = width + padding + border */

/* Quirks mode (IE box model): */
/* width = content + padding + border */
/* total = width */

<!-- Один и тот же CSS даёт РАЗНЫЕ размеры в разных режимах -->
<div style="width: 200px; padding: 20px; border: 5px solid black;">
  <!-- Standards: визуальная ширина = 200 + 40 + 10 = 250px -->
  <!-- Quirks:    визуальная ширина = 200px (padding и border внутри) -->
</div>

2. Вертикальное центрирование таблиц: В quirks mode vertical-align на ячейках работает иначе.

3. Размеры шрифтов: В quirks mode inline-элементы не наследуют font-size от родителя таблицы.

4. Парсинг CSS: Некоторые CSS-хаки и баги IE воспроизводятся в quirks mode.

Как проверить режим

Через JavaScript:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Проверка режима</title>
</head>
<body>
  <script>
    // "CSS1Compat" = standards mode
    // "BackCompat" = quirks mode
    console.log(document.compatMode);

    // Вывод на страницу
    document.body.textContent =
      'Режим: ' + (document.compatMode === 'CSS1Compat'
        ? 'Standards mode'
        : 'Quirks mode');
  </script>
</body>
</html>

Через DevTools:

  1. Открой DevTools (F12)
  2. Вкладка Console
  3. Введи document.compatMode

Что будет без DOCTYPE

<!-- Нет DOCTYPE -- quirks mode! -->
<html>
<head>
  <title>Без DOCTYPE</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid red;
      background: lightblue;
    }
  </style>
</head>
<body>
  <div class="box">
    Визуальная ширина будет 200px (quirks) вместо 250px (standards)
  </div>
</body>
</html>

DOCTYPE и фреймворки

Все современные инструменты генерируют корректный DOCTYPE:

<!-- React (public/index.html или Next.js) -->
<!DOCTYPE html>

<!-- Vue (index.html) -->
<!DOCTYPE html>

<!-- Angular (src/index.html) -->
<!doctype html>

Если ты используешь фреймворк -- DOCTYPE уже есть. Но важно знать, зачем он нужен, чтобы не удалить его случайно.

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

Ошибка Почему плохо Как правильно
Нет DOCTYPE вообще Quirks mode: сломанный box model <!DOCTYPE html> первой строкой
Пробел или BOM перед DOCTYPE Quirks mode в IE DOCTYPE строго первая строка файла
Использование старого DOCTYPE Лишний код, те же грабли <!DOCTYPE html> достаточно
Закрывающий тег </!DOCTYPE> Это не тег, нечего закрывать Просто <!DOCTYPE html>
DOCTYPE после <html> Quirks mode DOCTYPE всегда перед <html>

Практика

  1. Создай HTML-файл без DOCTYPE. Открой консоль и проверь document.compatMode
  2. Добавь <!DOCTYPE html> и проверь снова -- должно стать "CSS1Compat"
  3. Создай <div> с width: 200px; padding: 20px; border: 5px solid и сравни визуальную ширину с и без DOCTYPE
  4. Проверь свой сайт/проект -- убедись, что DOCTYPE на месте

Связанные темы

Ресурсы