Код #Статьи

19 августа, 2025

в HTML: что это, зачем нужна директива, как с ней работать / Skillbox Media

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

Содержание:

Бесплатный курс: «Быстрый старт в Python»

Узнать больше

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

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

Содержание

  • Что такое
  • Как пишется директива
  • Обязательно ли её использовать
  • Где располагается на странице
  • Какие бывают режимы отображения документа
  • Какие существуют версии в разных стандартах HTML
  • Частые ошибки
  • Полезные советы и лайфхаки

Что такое

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

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

Как пишется

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

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

  • ;
  • ;
  • .

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

Читайте также:

Ускоряем вёрстку, используя Emmet. Руководство по командам и возможностям

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

Обязательно ли писать ?

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

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

Где располагается на странице

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

Какие бывают режимы отображения документа

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

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

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

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

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

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

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

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

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

  • Не писать. Если нет , браузер включит режим совместимости.
  • Использовать старый или некорректный — например, старые DTD, не указанные полностью:
  • Добавить что-то перед . Даже пробел или комментарий перед могут включить quirks mode:

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

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

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

Какие версии есть в разных стандартах HTML

В HTML 4.01 существует три варианта .

  • Strict (строгий режим) — без поддержки устаревших элементов предыдущих версий:
  • Transitional (промежуточный режим) — поддерживает устаревшие теги, такие как :
  • Frameset (режим фреймов) — поддерживает фреймы:

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

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

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

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

Немного практики: пытаемся расшифровать

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

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

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

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

Решение

  • !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 — разрешает использование устаревших элементов (например, ,
    ,