Вернуться к HTML

Тег <!DOCTYPE>

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

🌐 Совместимость с браузерами

Все современные и старые браузеры поддерживают <!DOCTYPE>, но его отсутствие или некорректное указание может вызвать режим совместимости (Quirks Mode), что приводит к разному рендерингу страницы.

🔹 Поддержка в основных браузерах

БраузерПоддержка <!DOCTYPE>Особенности
Chrome✅ (все версии)Корректно обрабатывает все DOCTYPE.
Firefox✅ (все версии)Полная поддержка, включая HTML5.
Safari✅ (все версии)Работает с любым DOCTYPE.
Edge✅ (включая EdgeHTML)Поддержка HTML5 и старых стандартов.
Opera✅ (все версии)Аналогично Chrome.
IE (6-11)✅ (но с нюансами)В IE6-IE9 некорректный DOCTYPE может включать Quirks Mode.

📌 Основные типы <!DOCTYPE> и их поддержка

1️⃣ HTML5 (рекомендуемый стандарт)

<span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>

✅ Поддержка:

  • Все современные браузеры (Chrome, Firefox, Safari, Edge, Opera).
  • Internet Explorer с IE6 (но в IE6-IE9 могут быть ограничения CSS/JS).

2️⃣ HTML 4.01 (устаревший, но работает)

<span class="hljs-meta">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</span>

✅ Поддержка:

  • Все браузеры, включая IE6+.
  • Современные браузеры интерпретируют его как стандартный режим (Standards Mode).

3️⃣ XHTML 1.0 (устаревший, но поддерживается)

<span class="hljs-meta">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span>

✅ Поддержка:

  • Работает во всех браузерах, но требует правильного MIME-типа (application/xhtml+xml).
  • В IE6-IE8 может не поддерживаться в XML-режиме.

⚠️ Что будет, если не указать <!DOCTYPE>?

Браузер переходит в режим совместимости (Quirks Mode), который эмулирует поведение старых версий (IE5.5 и ниже). Это приводит к:

  • Некорректному рендерингу CSS (например, box-sizing работает по-другому).
  • Ошибкам в расчёте размеров (width, height).
  • Проблемам с JavaScript (например, getElementById может вести себя иначе).

Пример:

  • Без <!DOCTYPE> в IE10+ страница может выглядеть как в IE5.
  • В Chrome/Firefox также будут аномалии вёрстки.

💡 Рекомендации

  1. Всегда используйте <!DOCTYPE html> (HTML5) — это самый короткий и современный вариант.
  2. Проверяйте валидность DOCTYPE — некорректный синтаксис может включить Quirks Mode.
  3. Для старых систем (IE6-IE8) можно использовать HTML5 DOCTYPE, но тестировать вёрстку.

🎯 Вывод

  • <!DOCTYPE> поддерживается всеми браузерами, но его отсутствие или ошибка ломают вёрстку.
  • HTML5 (<!DOCTYPE html>) — лучший выбор для любых проектов.
  • Quirks Mode — зло! Всегда проверяйте, что DOCTYPE указан правильно.

Если DOCTYPE указан верно, браузер будет использовать Standards Mode, и страница отобразится корректно. 🚀