Браузер и неполный HTML

Исходный код демо

<title>IT FROMATOZ</title>
<style>
  body { background-color: #242424; color: white; }
</style>
<h1>Эта страница не содержит тегов html, head, body</h1>
<h2>Кодировку utf-8 тоже убрали.</h2>
<p>Браузер должен перейти в режим quirks mode.</p>

Что происходит в браузере

• Автодостройка структуры. Браузер сам создаёт недостающие <html>, <head> и <body>.
• Перенос элементов. То, что должно лежать в head (meta, title, style, link, script), переезжает туда.
• Остальное в body. Первый же видимый тег открывает body.
• Режим совместимости. Без <!DOCTYPE html> браузер включает quirks mode и имитирует поведение браузеров конца 90-х: по-другому считаются размеры блоков, высота строк, таблицы.

Проверяем через F12

Откройте демо, нажмите F12 и посмотрите вкладку Elements: дерево документа будет полным, хотя в исходнике его нет. Сравните с «Просмотром кода страницы» (Ctrl+U), там исходник как есть.

Чтобы узнать режим, наберите в консоли:

document.compatMode
// "BackCompat" — quirks mode
// "CSS1Compat" — стандартный режим

Почему важна кодировка

Без указания кодировки браузер вынужден угадывать её, и кириллица может превратиться в «кракозябры»: «Привет» → «РџСЂРёРІРµС‚». Строка в head решает проблему:

<meta charset="utf-8">