1. Объявление документа: HTML4 → HTML5

Раньше doctype был длинной строкой со ссылкой на DTD. В HTML5 он сократился до одной короткой команды — её легко запомнить и невозможно ошибиться. Браузеру обоих хватает, чтобы включить standards mode, но новый писать в разы проще.

📜 Старый HTML4 doctype

Длинная строка с URL — её никто не помнил наизусть, копировали из шаблонов.

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
              

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <!-- ... -->
</html>

✅ Современный HTML5 doctype

Одна строка, регистр не важен, никаких ссылок. Это сегодняшний стандарт.

                <!DOCTYPE html>
              

<!DOCTYPE html>
<html lang="ru">
  <!-- ... -->
</html>

2. Хаотичный файл → аккуратный каркас

Вторая частая «старая» привычка — печатать контент без каркаса. Браузер часто пытается это «починить», достроив недостающие <html>/<head>/<body>, но поддерживать такой файл неудобно, а в quirks mode вёрстка едет.

📜 Старый хаотичный вариант

Нет doctype, нет head, текст разбросан по файлу.

Заголовок страницы

Текст до doctype и без head/body.

Ещё один блок без общей структуры.

⚠️ нет title для вкладки, нет charset, режим непредсказуем

<!-- Неправильно: каркас размыт -->
<h1>Заголовок страницы</h1>
<p>Текст до doctype и без head/body.</p>
<div>
  <p>Ещё один блок без общей структуры.</p>
</div>

❌ Почему так неудобно

Непонятно, где заканчиваются настройки и начинается контент.
Сложнее проверять кодировку, title и подключение стилей.
Новый участник проекта дольше разбирается в таком файле.

✅ Современный аккуратный вариант

Структура видна сразу: сначала технические настройки, затем контент. Это не «формальность», а основа предсказуемого HTML.

Шапка

Основной контент страницы.

Подвал

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Аккуратная страница</title>
</head>
<body>
  <header>Шапка</header>
  <main>
    <p>Основной контент страницы.</p>
  </main>
  <footer>Подвал</footer>
</body>
</html>

Что стало лучше:

Каркас читается с первого взгляда.
Появляется место для метаданных и подключений.
Код проще расширять без поломки страницы.

🕰️ Когда старый вариант встречается

HTML4 doctype и бескаркасные файлы остаются в старых учебных примерах и быстро набросанных черновиках. Для настоящего проекта сразу пишите <!DOCTYPE html> и полный каркас, даже если страница пока очень простая.

⚖️ Хаотичный документ против аккуратного каркаса

⚡ Различия в двух словах