Все
Истории
Дизайн
Код
Геймдев
Бизнес
Маркетинг
Управление
Кино
Музыка
Проектная фотография
Развитие
Здоровье
Деньги
Образование
EdTech
Корп. обучение
Блог Skillbox
Глоссарий
Спецпроекты
Профориентация
Директива <!DOCTYPE> в HTML: что это, зачем она нужна и как с ней работать
Рассказываем, что такое <!DOCTYPE> и как правильно его использовать.
При создании HTML-документов нужно учитывать, как браузер интерпретирует и отображает нашу страницу. Важно, чтобы сайт выглядел так, как он задумывался, работал предсказуемо и отображался корректно.
Первое, что видит браузер при разборе HTML, — это <!DOCTYPE>. От этого элемента зависит, как страница будет рендериться: в современном стандартном режиме или в режиме совместимости. Разбираемся, как работает <!DOCTYPE>, почему без него вёрстка может сломаться и как выбрать правильный вариант.
Содержание
- Что такое <!DOCTYPE>
- Как пишется директива
- Обязательно ли её использовать
- Где <!DOCTYPE> располагается на странице
- Какие бывают режимы отображения документа
- Какие существуют версии в разных стандартах HTML
- Частые ошибки
- Полезные советы и лайфхаки
Что такое <!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">Обязательно ли писать <!DOCTYPE>?
Коротко: да. Если его не указать, браузер включит режим совместимости (quirks mode), и это может привести:
- к различному поведению браузеров при рендеринге;
- ошибкам в обработке CSS;
- непредсказуемому расположению элементов на странице.
Где <!DOCTYPE> располагается на странице
При вёрстке <!DOCTYPE> всегда помещают в самое начало HTML-документа, первой строкой. В любом другом месте этот элемент не будет восприниматься браузером, и для страницы включится режим совместимости.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>Какие бывают режимы отображения документа
Стоит ошибиться в <!DOCTYPE>, и браузер решит, что вы застряли в 2001-м. Это и есть режим совместимости. Давайте разберёмся, какие ещё режимы отображения бывают и чем они различаются.
Итак, браузер знает три режима отображения документа.
1. Standards mode (стандартный режим)
Включается при корректном указании директивы и заставляет браузер следовать современным стандартам.
Как включить:
Используйте правильный <!DOCTYPE> в начале HTML-документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Стандартный режим</title>
</head>
<body>
<h1>Пример в стандартном режиме</h1>
</body>
</html>Так браузер поймёт, что эта страница создана по актуальному стандарту HTML5, и будет применять к коду именно эту спецификацию, корректно отображая HTML и CSS.
2. Quirks mode (режим совместимости)
Этот режим имитирует поведение старых браузеров (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>3. Almost standards mode (почти стандартный режим)
Отличается от стандартного режима небольшими отклонениями в рендеринге, но поддерживает устаревшие элементы.
Как включить:
Некоторые варианты <!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
Стандарт HTML 4.01
В 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 1.0
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
HTML5 не поддерживает устаревшие теги из предыдущих версий и придерживается современной модели вёрстки. Вместо длинных <!DOCTYPE> используется один короткий универсальный вариант, который работает во всех браузерах:
<!DOCTYPE html>Немного практики: пытаемся расшифровать <!DOCTYPE>
Когда веб-разработчики переходили от старых 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 тут не рекомендуется: что-то отобразится правильно, а что-то обязательно будет вести себя как попало.
Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!
