Декларация DOCTYPE в HTML

Главная

База знаний

html

Структура документа

26 ноября 2025

Автор

Олег Марков

Введение

Декларация DOCTYPE в HTML — это короткая строка в самом верху HTML-документа, которая задает правила, по которым браузер будет интерпретировать страницу. Без нее один и тот же код может отображаться по-разному в разных браузерах, а часть современных возможностей просто не будет работать так, как вы ожидаете.

Смотрите, я покажу вам, как это обычно выглядит в реальном документе:

<!DOCTYPE html> <!-- Объявляем, что документ написан в HTML5 -->
<html lang="ru">
<head>
    <meta charset="UTF-8"> <!-- Указываем кодировку -->
    <title>Пример документа</title>
</head>
<body>
    <p>Пример страницы с DOCTYPE</p>
</body>
</html>

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

режим рендеринга (режим отображения) в браузере;
поддержку современных спецификаций HTML и CSS;
работу систем валидации и некоторых инструментов разработки;
совместимость с устаревшими браузерами.

Давайте разбираться, почему <DOCTYPE> так важен, какие бывают варианты и как вам правильно использовать его в современных проектах.

Что такое DOCTYPE и зачем он нужен

Основное назначение DOCTYPE

Декларация DOCTYPE (Document Type Declaration) — это инструкция для браузера и других парсеров HTML. Она говорит, по какой спецификации нужно интерпретировать документ.

Исторически DOCTYPE:

Сообщал, какой стандарт HTML или XHTML использован в документе.
Позволял валидаторам проверять документ по соответствующему DTD (Document Type Definition).
Влиял на режим рендеринга браузеров (standards mode, quirks mode и другие варианты).

В современных реалиях (HTML5 и дальше) DOCTYPE:

в первую очередь включает стандартный режим рендеринга в браузере;
указывает, что документ должен интерпретироваться как HTML5;
не является ссылкой на реальный DTD (формально DTD для HTML5 нет, но запись сохраняется для совместимости).

Без DOCTYPE браузер, как правило, переходит в так называемый quirks mode (режим совместимости), что приводит к наследованию старых, часто нелогичных правил рендеринга из эпохи старых версий Internet Explorer и Netscape.

Историческое развитие DOCTYPE

Эволюция от HTML 4 к HTML5

Чтобы вы лучше почувствовали, как развивался DOCTYPE, давайте посмотрим на примеры.

Пример DOCTYPE в HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<!--
- HTML PUBLIC ...     - идентификатор публичного DTD
- strict.dtd          - строгий DTD без устаревших элементов и атрибутов
-->
<html>
<head>
    <title>HTML 4.01 Strict</title>
</head>
<body>
    <p>Страница с DOCTYPE HTML 4.01 Strict</p>
</body>
</html>

Здесь:

указывается тип DTD;
используется публичный идентификатор;
есть ссылка на файл DTD.

Пример DOCTYPE в HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<!-- Transitional - допускает устаревшие теги и атрибуты, например <font> -->
<html>
<head>
    <title>HTML 4.01 Transitional</title>
</head>
<body>
    <font color="red">Старый способ задать цвет текста</font>
</body>
</html>

Здесь Transitional говорит браузеру, что допустимы устаревшие конструкции, используемые для постепенного перехода со старых версий.

Пример DOCTYPE в XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XHTML требует строгого синтаксиса как в XML -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
    <title>Документ XHTML 1.0 Strict</title>
</head>
<body>
    <p>Пример документа XHTML</p>
</body>
</html>

Здесь сочетание:

пространства имен xmlns;
строгого XML-подобного синтаксиса;
длинного DOCTYPE.

Упрощение в HTML5

HTML5 решил избавиться от избыточной сложности и сделал DOCTYPE максимально простым:

<!DOCTYPE html>

Этот DOCTYPE:

не ссылается на реальный DTD;
не содержит версии (нет HTML5, HTML 5.2 и т.д. в самой декларации);
воспринимается как сигнал: «используй современный стандартный режим».

За счет этого:

легче писать и запоминать;
ниже порог входа для новичков;
меньше риска сделать синтаксическую ошибку в длинной строке.

Влияние DOCTYPE на режимы рендеринга

Основные режимы рендеринга

Браузеры используют три основных режима:

Standards mode (стандартный режим)
Интерпретация HTML и CSS в соответствии с текущими спецификациями. Это то, что вы почти всегда хотите получить.
Quirks mode (режим совместимости)
Браузер имитирует поведение старых браузеров (конца 90-х — начала 2000-х годов), чтобы старые сайты продолжали выглядеть ожидаемо.
Almost standards mode (почти стандартный режим)
Почти полное соответствие стандарту, но с некоторыми особенностями в расчетах высоты таблиц и изображений. Этот режим нужен для совместимости с сайтами начала 2000-х.

Давайте посмотрим, как DOCTYPE влияет на выбор режима.

Как DOCTYPE включает стандартный режим

Современный DOCTYPE HTML5:

<!DOCTYPE html>

почти во всех актуальных браузерах включает standards mode.

Если декларация:

отсутствует;
сильно искажена (например, написана внутри <html>, а не перед ним);
использует очень старый или некорректный вариант,

браузер может перейти в quirks mode.

Примеры, когда включается quirks mode

Покажу вам несколько ситуаций, которые часто встречаются в старых проектах.

Полное отсутствие DOCTYPE

<!-- Нет DOCTYPE вообще -->
<html>
<head>
    <title>Без DOCTYPE</title>
</head>
<body>
    <p>Браузер, скорее всего, включит quirks mode</p>
</body>
</html>

Последствия:

отличия в расчетах ширины блока (например, width вместе с padding и border обрабатываются как в старом IE);
проблемы с позиционированием;
неожиданные отличия в обработке CSS.

Неверный DOCTYPE

<!doctype html5> <!-- Некорректная запись -->
<html>
<head>
    <title>Неверная декларация</title>
</head>
<body>
    <p>Может быть включен quirks mode</p>
</body>
</html>

Здесь проблема в том, что:

добавлено лишнее слово html5;
изменен регистр и структура.

Корректный вариант должен выглядеть именно так:

<!DOCTYPE html>

Старые DOCTYPE, вызывающие almost standards mode

Некоторые DOCTYPE из эпохи HTML 4 и XHTML включают almost standards mode. Например, часто упоминается комбинация HTML 4.01 Transitional + URI, которая в некоторых браузерах приводит к этому режиму.

Вы можете столкнуться с этим, работая со старыми шаблонами или CMS. Но в новых проектах лучше всегда использовать HTML5 DOCTYPE и не полагаться на устаревшие режимы.

Синтаксис современного DOCTYPE в HTML5

Правильная запись

Правильная, рекомендованная всеми спецификациями запись DOCTYPE для HTML5 выглядит так:

<!DOCTYPE html>

Обратите внимание:

восклицательный знак сразу после <;
ключевое слово DOCTYPE обычно пишется в верхнем регистре (так принято и так понятнее);
html можно писать в любом регистре, но по традиции — строчными буквами;
никаких версий, ссылок на DTD, URL и т.д.

Где размещать DOCTYPE

DOCTYPE обязательно должен быть первой строкой в документе, перед тегом <html> и любым другим содержимым, включая комментарии.

Так правильно:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Корректное расположение DOCTYPE</title>
</head>
<body>
    <p>Все на своем месте</p>
</body>
</html>

Так делать не стоит:

<!-- Неверно - комментарий перед DOCTYPE -->
<!-- Комментарий до декларации -->
<!DOCTYPE html>
<html>
<head>
    <title>Некорректный порядок</title>
</head>
<body>
    <p>Есть риск включения quirks mode в некоторых старых браузерах</p>
</body>
</html>

Комментарии, BOM и другие данные до DOCTYPE могут привести к некорректному определению режима рендеринга старыми браузерами.

Отличия DOCTYPE в HTML и XHTML

DOCTYPE в XHTML

XHTML — это попытка описать HTML как подмножество XML. Поэтому для XHTML использовались строгие DTD и длинные DOCTYPE.

Пример XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>XHTML Transitional</title>
</head>
<body>
    <p>Документ XHTML с типом Transitional</p>
</body>
</html>

Здесь:

присутствует PUBLIC идентификатор и URI;
требуется пространство имен xmlns;
теги и атрибуты должны быть в нижнем регистре;
все теги должны быть правильно закрыты, включая одиночные (<br />, <img /> и т.д.).

Почему в современных проектах обычно не используют XHTML DOCTYPE

Сейчас:

спецификация HTML5 и дальше стала основной для веба;
HTML5 допускает «XML-подобное» написание, но не требует полного соответствия XML;
преимущества XHTML (например, более строгая проверка парсинга) редко перевешивают сложности.

Поэтому сейчас, если вы не работаете над очень специфичным XML-ориентированным проектом, лучше всегда использовать HTML5 DOCTYPE:

<!DOCTYPE html>

Практические рекомендации по использованию DOCTYPE

Какой DOCTYPE использовать сегодня

Для любых новых сайтов и веб-приложений, независимо от сложности, используйте один единственный вариант:

<!DOCTYPE html>

Его достаточно:

для обычных сайтов (лендинги, блоги, корпоративные страницы);
для сложных веб-приложений (SPA, PWA и т.п.);
для интеграции с фреймворками и библиотеками (React, Vue, Angular и др.).

Никаких альтернатив в современных проектах фактически не требуется.

Проверка, что DOCTYPE работает правильно

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

Давайте разберемся на примере в Chrome (аналогично в большинстве современных браузеров):

Откройте страницу.
Откройте DevTools (обычно F12 или Ctrl+Shift+I).
Перейдите на вкладку «Elements» (или аналогичную).
Найдите самый верх DOM-дерева — там вы увидите строку вида:
```
<!DOCTYPE html>
```
Часто в консоли DevTools (или в окне «About:blank») можно увидеть информацию о режиме документа. В некоторых браузерах это отображается как document.compatMode.
В консоли можно выполнить:
```
console.log(document.compatMode);
// Ожидаемые значения:
// "CSS1Compat" - стандартный режим
// "BackCompat" - quirks mode
```

Если вы увидели CSS1Compat, значит DOCTYPE работает корректно и стандартный режим включен.

Частые ошибки при использовании DOCTYPE

Ошибка 1. Неправильный регистр или написание

<!doctype HTML> <!-- Поддерживается, но не рекомендуется -->

Хотя большинство современных браузеров поймут это, лучше придерживаться канонической записи:

<!DOCTYPE html>

Так код будет понятнее и вам, и другим разработчикам.

Ошибка 2. Лишние атрибуты или слова

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN"> <!-- Некорректно для HTML5 -->

HTML5 не использует DTD и не требует версий в DOCTYPE. Любые подобные дополнения:

не дают вам реальных преимуществ;
могут ввести в заблуждение валидаторы и разработчиков;
в старых браузерах могут привести к неожиданному выбору режима.

Ошибка 3. DOCTYPE не в самом верху

<!-- Неверно - мета-информация и скрипты до DOCTYPE -->
<script>
// Здесь выполняется код до объявления DOCTYPE
// Некоторые старые браузеры могут перейти в quirks mode
</script>
<!DOCTYPE html>
<html>
<head>
    <title>Плохое расположение DOCTYPE</title>
</head>
<body>
    <p>Риск проблем с режимами рендеринга</p>
</body>
</html>

Правильный порядок:

<!DOCTYPE html> <!-- Сразу первой строкой -->
<html>
<head>
    <title>Хорошее расположение DOCTYPE</title>
</head>
<body>
    <script>
    // Скрипты можно загружать здесь - DOCTYPE уже объявлен
    </script>
    <p>Все в порядке</p>
</body>
</html>

Ошибка 4. Смешивание HTML5 и старых XHTML DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<!-- Некорректная и бессмысленная комбинация для современных браузеров -->
<html>
<head>
    <title>Смешение стандартов</title>
</head>
<body>
    <p>Лучше выбрать один подход</p>
</body>
</html>

Здесь вы видите гибрид, который не соответствует ни одной спецификации. Такие конструкции могут приводить к:

некорректной валидации;
путанице для других разработчиков;
странному поведению в некоторых старых браузерах.

DOCTYPE и валидация HTML

Зачем валидировать HTML

Валидация (проверка документа на соответствие стандарту) помогает:

находить синтаксические ошибки;
обнаруживать устаревшие теги и атрибуты;
улучшать межбраузерную совместимость;
упрощать поддержку кода другими разработчиками.

DOCTYPE в старых спецификациях был ключом, по которому валидатор понимал, к какому DTD нужно сравнивать ваш документ.

Как это работает с HTML5

В HTML5:

нет отдельного DTD;
валидаторы используют описание стандарта HTML Living Standard.

Тем не менее DOCTYPE:

все равно обязателен;
все равно проверяется валидаторами.

Например, если вы проверите документ без DOCTYPE в валидаторе W3C, то получите предупреждение и рекомендации добавить декларацию.

DOCTYPE в шаблонизаторах и фреймворках

Шаблонные движки (PHP, Blade, Twig и другие)

Если вы используете шаблонизаторы, DOCTYPE обычно прописывается в основном лэйауте.

Например, в PHP-шаблоне может быть так:

<!DOCTYPE html> <!-- Декларация DOCTYPE в общем шаблоне -->
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></title>
</head>
<body>
    <?php
    // Здесь подключаем контент страницы
    include $contentTemplate;
    ?>
</body>
</html>

Комментарий в коде подсказывает, что:

DOCTYPE объявляется один раз в базовом шаблоне;
вложенные шаблоны не должны содержать повторного DOCTYPE и тега <html>.

Фреймворки SPA (React, Vue, Angular)

В SPA-фреймворках основная работа происходит внутри одного HTML-документа, а DOCTYPE задается в статическом файле, который генерируется сборщиком или используется как шаблон.

Пример базового файла для React (public/index.html):

<!DOCTYPE html> <!-- Здесь включаем стандартый режим для всего приложения -->
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>React приложение</title>
</head>
<body>
    <div id="root"></div> <!-- В этот контейнер React монтирует компонент -->
    <script src="bundle.js"></script> <!-- Подключаем скомпилированный JS -->
</body>
</html>

Ваш JavaScript-код уже работает в документе с корректным DOCTYPE, и вам не нужно думать о нем в компонентах.

DOCTYPE и старые браузеры

Особенности старых версий Internet Explorer

Старые версии IE (например, IE 6–8) были особенно чувствительны к:

наличию или отсутствию DOCTYPE;
типу DOCTYPE (Strict, Transitional и др.);
наличию URL в DOCTYPE.

Например, некоторые DOCTYPE приводили IE в almost standards mode или даже в quirks mode.

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

обязательно ли клиенту нужна поддержка старых IE;
использует ли проект старые DOCTYPE, заточенные под эти браузеры.

В большинстве случаев проще:

перевести страницу на HTML5 DOCTYPE;
отладить критичные места с версткой (чаще всего проблемы в таблицах и «резиновых» макетах).

Частные случаи и редкие сценарии

Документы без `<html>` и DOCTYPE (фрагменты HTML)

Иногда вы работаете не с полным HTML-документом, а только с фрагментом — например, шаблоном для вставки через JavaScript или в CMS.

Пример такого фрагмента:

<!-- Фрагмент, который будет вставлен в уже существующую страницу -->
<section class="promo">
    <h2>Специальное предложение</h2>
    <p>Скидка 20 процентов на все услуги до конца месяца</p>
</section>

Здесь:

мы не используем DOCTYPE вообще;
этот фрагмент предполагается встраивать в уже существующий документ, где DOCTYPE объявлен.

Важно: если вы пишете фрагменты, DOCTYPE задается в основном документе, а не в каждом фрагменте.

Генерация HTML на сервере и DOCTYPE

Если ваш сервер отдает HTML динамически (например, Go, Node.js, Java, Python), DOCTYPE все равно нужен в той части, которая формирует начало документа.

Покажу вам простой псевдокод на Node.js:

// Здесь мы формируем HTML-ответ на запрос
function renderPage(req, res) {
    res.setHeader('Content-Type', 'text/html; charset=utf-8');

    res.write('<!DOCTYPE html>'); // Объявляем DOCTYPE первым делом
    res.write('<html lang="ru">');
    res.write('<head>');
    res.write('<meta charset="UTF-8">');
    res.write('<title>Динамическая страница</title>');
    res.write('</head>');
    res.write('<body>');
    res.write('<p>Содержимое страницы</p>');
    res.write('</body>');
    res.write('</html>');

    res.end(); // Завершаем ответ
}

Комментарий отмечает ключевой момент: DOCTYPE нужно записать до тега <html> и всего остального.

Заключение

Декларация DOCTYPE в HTML — это простая на вид строка, которая решает важные задачи:

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

В современных проектах вам достаточно помнить один практически универсальный рецепт:

<!DOCTYPE html>

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

Если вы сталкиваетесь со старыми DOCTYPE (HTML 4.01, XHTML 1.0 и другими), воспринимайте их как историческое наследие. В новых проектах держитесь простого и понятного HTML5 DOCTYPE, а в легаси-коде аккуратно оценивайте, не привязан ли старый DOCTYPE к необходимости поддерживать очень старые браузеры.

Частозадаваемые технические вопросы по теме и ответы

1. Как программно определить, в каком режиме работает документ стандартный или quirks

Откройте консоль браузера и выполните:

console.log(document.compatMode);
// "CSS1Compat" - стандартный режим
// "BackCompat" - quirks mode

Если видите BackCompat, значит DOCTYPE отсутствует или некорректен. Исправьте DOCTYPE на <!DOCTYPE html> и перезагрузите страницу.

2. Нужно ли указывать DOCTYPE во встраиваемых виджетах например iframe с частью HTML

Если iframe загружает полноценную HTML-страницу, внутри файла, на который ссылается src, должен быть свой DOCTYPE. Если же вы вставляете HTML-фрагмент в уже существующий DOM через JavaScript, отдельный DOCTYPE не нужен — используется декларация основного документа.

3. Влияет ли DOCTYPE на работу JavaScript-движка

Напрямую почти нет. JavaScript-интерпретатор работает одинаково. Но косвенно влияет, так как меняется DOM и CSS-логика (например, размеры элементов), от которых зависят скрипты. Поэтому для предсказуемого поведения логики рекомендуется всегда использовать стандартный режим с <!DOCTYPE html>.

4. Могу ли я опустить DOCTYPE при генерации HTML через шаблонизатор если клиенты используют только современные браузеры

Не стоит. Даже современные браузеры при отсутствии DOCTYPE включают quirks mode. Это приведет к отличиям в расчетах размеров и другим визуальным проблемам. Всегда добавляйте <!DOCTYPE html> в корневой шаблон.

5. Как проверить корректность DOCTYPE в автоматических тестах

В E2E-тестах можно проверить первую строку ответа сервера. Например, в Playwright или Cypress:

const content = await page.content();
if (!content.startsWith('<!DOCTYPE html>')) {
    throw new Error('Некорректный или отсутствующий DOCTYPE');
}

Так вы гарантируете, что все страницы отдаются с нужной декларацией.

Тег head в HTML - структура настройки и лучшие практики Тег body в HTML - структура страницы и основные возможности

Постройте личный план изучения Html до уровня Middle — бесплатно!

Html — часть карты развития Frontend

100+ шагов развития
30 бесплатных лекций
300 бонусных рублей на счет

Все гайды по Html

Форматирование текста

Тег strong в HTML - полное руководство по семантическому выделению важного текста Тег параграфа p в HTML Тег mark в HTML Тег ins в HTML Тег горизонтальной линии HTML hr - разбор возможностей и примеры использования Тег em в HTML - полное руководство по семантическому выделению текста Теги заголовков HTML полное руководство по структуре страницы Тег del в HTML - подробное руководство по использованию Тег переноса строки HTML br

Таблицы

Строка таблицы HTML tr - полное руководство для верстальщиков и разработчиков Функция append в Go Golang Заголовок таблицы HTML th - полное руководство Подвал таблицы HTML tfoot Ячейка таблицы HTML td - полное руководство по верстке таблиц Тело таблицы HTML tbody - как правильно использовать и управлять табличными данными HTML тег table - как создавать и оформлять таблицы на практике Группа колонок HTML colgroup

Семантические элементы

Тег section в HTML - семантическая разметка структуры страницы Тег nav в HTML - полное руководство по семантической навигации Тег main в HTML - подробное руководство по использованию Тег header в HTML - полное практическое руководство Тег footer в HTML - назначение семантика и практические примеры Тег figure в HTML - как правильно оформлять иллюстрации и подписи Тег figcaption в HTML - подробное руководство с примерами Тег aside в HTML - назначение правильная семантика и примеры

Скрипты

HTML шаблоны template - от базовой разметки до динамических интерфейсов Слоты компонентов в HTML slot - полное руководство Тег script в HTML - как правильно подключать и исполнять JavaScript Тег noscript в HTML - как и когда его использовать

Мета-информация

Атрибут viewport в HTML - полный разбор для разработчиков Ключевые слова в HTML - keywords - подробный разбор Тег meta в HTML - полное практическое руководство Мета описание description в HTML - полное руководство Атрибут charset в HTML - полное руководство для разработчиков

Медиа

Функция append в Go (Golang)Функция append в Go Golang Атрибут в HTML и объектно ориентированном программировании Функция append в Go (Golang)Тег изображения img в HTML - полный разбор для практической верстки Тег audio в HTML Атрибут в программировании - что это такое и как с ним работать

Списки

Маркированный список HTML ul - основы синтаксиса стилизация и лучшие практики Нумерованный список HTML ol Элемент списка HTML li - как правильно создавать и оформлять элементы списка Список определений HTML dl - dl dt dd практическое руководство Термин определения HTML dt Тег dd в HTML - полное описание и примеры использования

Ссылки

Атрибут target в HTML - использование и подводные камни Атрибут href в HTML - подробное руководство для начинающих и практикующих разработчиков Атрибут rel в HTML - полное практическое руководство Атрибут download в HTML Тег ссылки HTML a - полное руководство для начинающих и практикующих разработчиков

Интерактивные элементы

Заголовок details в HTML - summary Контекстное меню в HTML - menu Диалоговое окно в HTML dialog Раскрывающийся блок в HTML - details

Формы

Текстовая область HTML textarea - практическое руководство Выпадающий список HTML select - полное руководство для разработчиков Опция списка HTML option - как работает и как правильно использовать Атрибут method в HTML - как правильно отправлять данные формы Заголовок группы HTML legend - как правильно использовать и оформлять Тег input в HTML - типы атрибуты валидация и примеры Тег формы form в HTML Группа полей HTML fieldset Атрибут action в HTML - как правильно задавать адрес отправки формы

Элементы форм

Текстовое поле input text в HTML - полное руководство Кнопка отправки в HTML - input submit Кнопка сброса в HTML input-reset - полное руководство Радиокнопка в HTML - input radio Поле пароля в HTML - input-password Чекбокс в HTML - input-checkbox для начинающих и не только

Встраиваемый контент

Тег object в HTML - как встраивать сторонний контент и управлять им Встроенный фрейм HTML iframe - полное практическое руководство Тег embed в HTML - как встраивать внешние ресурсы на страницу

Структура документа

Тег title в HTML - назначение правила оформления и лучшие практики Тег html в HTML5 - полное практическое руководство Тег head в HTML - структура настройки и лучшие практики Декларация DOCTYPE в HTML Тег body в HTML - структура страницы и основные возможности Тег base в HTML - полный разбор и практические примеры

Доступность

Всплывающая подсказка в HTML title ARIA роль - полное руководство для разработчиков ARIA label в HTML - подробное руководство по доступным интерфейсам Атрибут aria-hidden - как управлять видимостью элементов для скринридеров Альтернативный текст в HTML - как правильно использовать атрибут alt

Открыть базу знаний

Лучшие курсы по теме

HTML и CSS

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.9

3 999 ₽ 6 990 ₽

Подробнее

TypeScript с нуля

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.8

3 999 ₽ 6 990 ₽

Подробнее

Next.js - с нуля

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.7

3 999 ₽ 6 990 ₽

Подробнее

Отправить комментарий

Скидка 15% по промокоду

Декларация DOCTYPE в HTML

Введение

Что такое DOCTYPE и зачем он нужен

Основное назначение DOCTYPE

Историческое развитие DOCTYPE

Эволюция от HTML 4 к HTML5

Пример DOCTYPE в HTML 4.01 Strict

Пример DOCTYPE в HTML 4.01 Transitional

Пример DOCTYPE в XHTML 1.0 Strict

Упрощение в HTML5

Влияние DOCTYPE на режимы рендеринга

Основные режимы рендеринга

Как DOCTYPE включает стандартный режим

Примеры, когда включается quirks mode

Полное отсутствие DOCTYPE

Неверный DOCTYPE

Старые DOCTYPE, вызывающие almost standards mode

Синтаксис современного DOCTYPE в HTML5

Правильная запись

Где размещать DOCTYPE

Отличия DOCTYPE в HTML и XHTML

DOCTYPE в XHTML

Почему в современных проектах обычно не используют XHTML DOCTYPE

Практические рекомендации по использованию DOCTYPE

Какой DOCTYPE использовать сегодня

Проверка, что DOCTYPE работает правильно

Частые ошибки при использовании DOCTYPE

Ошибка 1. Неправильный регистр или написание

Ошибка 2. Лишние атрибуты или слова

Ошибка 3. DOCTYPE не в самом верху

Ошибка 4. Смешивание HTML5 и старых XHTML DOCTYPE

DOCTYPE и валидация HTML

Зачем валидировать HTML

Как это работает с HTML5

DOCTYPE в шаблонизаторах и фреймворках

Шаблонные движки (PHP, Blade, Twig и другие)

Фреймворки SPA (React, Vue, Angular)

DOCTYPE и старые браузеры

Особенности старых версий Internet Explorer

Частные случаи и редкие сценарии

Документы без <html> и DOCTYPE (фрагменты HTML)

Генерация HTML на сервере и DOCTYPE

Заключение

Частозадаваемые технические вопросы по теме и ответы

1. Как программно определить, в каком режиме работает документ стандартный или quirks

2. Нужно ли указывать DOCTYPE во встраиваемых виджетах например iframe с частью HTML

3. Влияет ли DOCTYPE на работу JavaScript-движка

4. Могу ли я опустить DOCTYPE при генерации HTML через шаблонизатор если клиенты используют только современные браузеры

5. Как проверить корректность DOCTYPE в автоматических тестах

Постройте личный план изучения Html до уровня Middle — бесплатно!

Все гайды по Html

Лучшие курсы по теме

HTML и CSS

TypeScript с нуля

Next.js - с нуля

Документы без `<html>` и DOCTYPE (фрагменты HTML)