Директива <​!DOCTYPE​> в HTML: что это, зачем она нужна и как с ней работать
2026-02-21 09:14 Diff
https://skillbox.ru/media/base/direktiva-doctype-v-html-chto-eto-zachem-ona-nuzhna-i-kak-s-ney-rabotat/

#База знаний

  • 28 апр 2025
  • 0

Рассказываем, что такое <​!DOCTYPE​> и как правильно его использовать.

Иллюстрация: Оля Ежак для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

Первое, что видит браузер при разборе HTML, — это <!DOCTYPE>. От этого элемента зависит, как страница будет рендериться: в современном стандартном режиме или в режиме совместимости. Разбираемся, как работает <!DOCTYPE>, почему без него вёрстка может сломаться и как выбрать правильный вариант.

Содержание

<!DOCTYPE> (document type declaration) — дословно «Тип документа» — это инструкция для веб-браузеров, определяющая, какую версию HTML следует использовать при работе с документом.

Строго говоря, <!DOCTYPE> — это не тег, а директива, которая относится к метаинформации о документе. Она записана в угловых скобках, потому что HTML-страница обрабатывает только то, что внутри < >. А знак ! в начале подчёркивает: это не обычный тег, а специальная инструкция для браузера.

В современных спецификациях HTML5 <!DOCTYPE> записывается в краткой простой форме:

<!DOCTYPE html>

При этом регистр букв внутри DOCTYPE не имеет значения. Можно прописать и так:

  • <!DOCTYPE HTML>;
  • <!doctype html>;
  • <!doctype HTML>.

Если вы воспользуетесь плагином создания разметки Emmet, то он предложит этот вариант:

<!DOCTYPE html>

А вот в предыдущих версиях HTML и XHTML использовались более сложные и длинные записи <!DOCTYPE>. Они указывали на конкретное определение типа документа — DTD (document type definition) — и режима работы. И выглядело это всё как инструкция для принтера:

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

Коротко: да. Если его не указать, браузер включит режим совместимости (quirks mode), и это может привести:

  • к различному поведению браузеров при рендеринге;
  • ошибкам в обработке CSS;
  • непредсказуемому расположению элементов на странице.

При вёрстке <!DOCTYPE> всегда помещают в самое начало HTML-документа, первой строкой. В любом другом месте этот элемент не будет восприниматься браузером, и для страницы включится режим совместимости.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример</title> </head> <body> <h1>Заголовок</h1> </body> </html>

Стоит ошибиться в <!DOCTYPE>, и браузер решит, что вы застряли в 2001-м. Это и есть режим совместимости. Давайте разберёмся, какие ещё режимы отображения бывают и чем они различаются.

Итак, браузер знает три режима отображения документа.

Включается при корректном указании директивы и заставляет браузер следовать современным стандартам.

Как включить:

Используйте правильный <!DOCTYPE> в начале HTML-документа:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Стандартный режим</title> </head> <body> <h1>Пример в стандартном режиме</h1> </body> </html>

Так браузер поймёт, что эта страница создана по актуальному стандарту HTML5, и будет применять к коду именно эту спецификацию, корректно отображая HTML и CSS.

Этот режим имитирует поведение старых браузеров (IE5 и других), в которых не работают некоторые современные решения. Это может привести к неправильному рендерингу CSS, особенно у элементов с блочной моделью (box model).

Это не значит, что страница будет полностью сломана, но результат отображения некоторых элементов будет отличаться от ожидаемого.

Как включить:

  • Не писать. Если нет <!DOCTYPE>, браузер включит режим совместимости.
<html lang="ru"> <head> <meta charset="UTF-8"> <title>Quirks Mode</title> </head> <body> <h1>Пример в режиме совместимости, потому что нет DOCTYPE</h1> </body> </html>
  • Использовать старый или некорректный <!DOCTYPE> — например, старые DTD, не указанные полностью:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  • Добавить что-то перед <!DOCTYPE>. Даже пробел или комментарий перед <!DOCTYPE> могут включить quirks mode:
<!-- Этот комментарий вызовет quirks mode --> <!DOCTYPE html>

Отличается от стандартного режима небольшими отклонениями в рендеринге, но поддерживает устаревшие элементы.

Как включить:

Некоторые варианты <!DOCTYPE> из HTML 4.01 Transitional и XHTML 1.0 Transitional могут активировать этот режим. Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Почти стандартный режим</title> </head> <body> <h1>Пример в почти стандартном режиме</h1> </body> </html>

В HTML 4.01 существует три варианта <!DOCTYPE>.

  • Strict (строгий режим) — без поддержки устаревших элементов предыдущих версий:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional (промежуточный режим) — поддерживает устаревшие теги, такие как <font>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset (режим фреймов) — поддерживает фреймы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML требовал строгого соблюдения синтаксиса XML и имел три аналогичных варианта <!DOCTYPE>:

  • Strict (строгий режим);
  • Transitional (промежуточный режим);
  • Frameset (режим фреймов).

Запись <!DOCTYPE> в XHTML 1.0 выглядела так:

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

HTML5 не поддерживает устаревшие теги из предыдущих версий и придерживается современной модели вёрстки. Вместо длинных <!DOCTYPE> используется один короткий универсальный вариант, который работает во всех браузерах:

<!DOCTYPE html>

Когда веб-разработчики переходили от старых HTML-версий к более структурированным стандартам, но ещё нуждались в обратной совместимости, они включали почти стандартный режим, который позволял:

  • использовать как современные, так и устаревшие HTML-элементы при соблюдении корректной структуры;
  • стилизовать страницу с использованием встроенных в разметку стилей (style="").

И сейчас можно поддерживать страницу, содержащую устаревший код, с помощью стандарта HTML 4.01.

Чтобы правильно указать директиву, надо разобраться, из чего она вообще состоит. Для этого давайте попробуем расшифровать <!DOCTYPE> почти стандартного режима отображения.

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

Решение

  • !DOCTYPE HTML PUBLIC — объявление типа документа, указывающее, что используется публичный DTD.
  • -//W3C//DTD HTML 4.01 Transitional//EN — описание стандарта:
  • -//W3C// — спецификация разработана W3C (World Wide Web Consortium).
  • DTD HTML 4.01 — версия стандарта (HTML 4.01).
  • Transitional — разрешает использование устаревших элементов (например, <font>, <center>, <iframe>).
  • //EN — язык документа (английский).
  • "http://www.w3.org/TR/html4/loose.dtd" — ссылка на официальный документ DTD.

Есть две основных ошибки при использовании <!DOCTYPE>:

1. Страница должна использовать только HTML5, но директива <!DOCTYPE> отсутствует или указана неправильно.

Проблема: на странице используется только современный код, но при этом:

  • директива <!DOCTYPE> не указана вовсе;
  • содержит синтаксические ошибки;
  • расположена не в самом начале документа.

Из-за этого браузер может переключиться в режим совместимости и отобразить страницу некорректно, игнорируя особенности HTML5.

Решение:

  • Сделайте директиву самым первым элементом страницы.
  • Используйте правильную для HTML5 запись <!DOCTYPE html>.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Страница для HTML5</title> </head> <body> <h1>На странице поддерживается только современный код HTML5</h1> </body> </html>

2. Страница использует и современный, и устаревший код, но не задан подходящий режим совместимости.

Проблема: в коде страницы присутствуют как современные, так и устаревшие элементы (например, теги и атрибуты из HTML4), но директива <!DOCTYPE> не соответствует нужному стандарту (например, используется HTML5 вместо Transitional). В результате браузер может отрисовать страницу в режиме «почти-совместимости».

Решение:

  • Убедитесь, что <!DOCTYPE> стоит первой строкой.
  • Убедитесь, что параметры директивы прописаны полно и верно, выбрана корректная версия стандарта и присутствует параметр Transitional.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Страница для почти стандартного режима</title> </head> <body> <h1>На странице поддерживается устаревший и современный код</h1> </body> </html>
  • Используйте Emmet, чтобы быстро создать первоначальную структуру: это позволит не ошибиться в разметке. Emmet создаёт страницу HTML5 и прописывает <!DOCTYPE> актуального формата.
    В редакторах вроде VS Code можно набрать ! и нажать Tab — вы получите готовый шаблон HTML-документа. Он сразу включает <!DOCTYPE>, <html lang="...">, <meta charset="UTF-8"> и всё, что часто забывают ввести вручную. Это сэкономит время и позволит не ошибиться при выборе директивы.
  • Если вы работаете с современным сайтом, но в коде остались устаревшие элементы, разумно включить почти стандартный режим. Но если такого кода немного, то лучше переписать его по стандарту HTML5. А вот quirks mode тут не рекомендуется: что-то отобразится правильно, а что-то обязательно будет вести себя как попало.
Бесплатный курс по Python ➞
Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу