HTML с нуля: Тег DOCTYPE в HTML. Урок №23 Overcod.net

HTML с нуля: Тег DOCTYPE в HTML. Урок №23

Когда я только начинал делать сайты на заказ, я думал: «Главное — чтобы дизайн был крутой, а код… ну, браузер как-нибудь разберется». Ох, как же я ошибался. Мой первый серьезный провал случился из-за одной единственной строчки в самом верху файла, которой я пренебрег.

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

Что это вообще такое?

Многие ошибочно называют <!DOCTYPE html> тегом. На самом деле, это декларация. Она не относится к HTML-тегам напрямую, а служит «инструкцией» для браузера.

Представьте, что вы приходите в библиотеку. Если вы просто бросите книгу на стол, библиотекарь потратит время, чтобы понять, куда ее положить. Но если вы сразу скажете: «Это современный детектив на русском», работа пойдет быстрее. DOCTYPE говорит браузеру: «Эй, это документ на современном HTML5, читай его именно так!»

Моя ошибка: «Режим причуд» (Quirks Mode)

На заре карьеры я верстал макет для клиента. В Chrome всё выглядело идеально, а в Safari и старом IE (да, тогда он еще был жив) верстка «поплыла»: отступы стали огромными, шрифты уменьшились, а блоки накладывались друг на друга.

Причина была проста: я забыл прописать DOCTYPE.

Когда браузер не видит эту строчку, он переходит в Quirks Mode (режим причуд). В этом режиме он имитирует баги старых браузеров из 90-х, чтобы «древние» сайты не ломались. Но для современного кода это яд.

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

Раньше (в эпоху HTML4) эта строка выглядела как заклинание из Гарри Поттера: длинная, страшная и с кучей ссылок. К счастью, с приходом HTML5 всё упростилось до предела.

Вот единственный стандарт, который вам нужен в 2026 году:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    </body>
</html>

III причины, почему это важно для вашего бизнеса:

Кроссбраузерность. Сайт будет выглядеть одинаково во всех современных браузерах.
Валидация. Без DOCTYPE автоматические сервисы проверки кода (валидаторы) просто не смогут адекватно оценить качество вашей верстки.
Производительность. Браузер не тратит ресурсы на «угадывание» стандарта и сразу переходит к правильной отрисовке страницы.

Запомните: Эта строчка всегда должна быть ПЕРВОЙ. Перед ней не должно быть ни пробелов, ни пустых строк, ни комментариев.

Резюме

Если вы хотите делать качественные сайты на заказ, не давайте браузеру повода для фантазий. Начинайте каждый свой проект с <!DOCTYPE html>. Это признак профессионализма и страховка от 90% проблем с отображением верстки.

Было полезно? Ставьте лайк и подписывайтесь — в следующем уроке разберем структуру тега <html> и почему атрибут lang критически важен для SEO.