🐛 Типичные ошибки в структуре документа

⚡ Топ-3 ошибки

  • Нет <!DOCTYPE html> → браузер уходит в quirks mode.
  • Нет <meta charset="UTF-8"> → кириллица превращается в «кракозябры».
  • Видимый текст попал в <head> → он не отображается на странице.

❌ Ошибка 1: Нет <!DOCTYPE html>

Без <!DOCTYPE html> браузер переходит в quirks mode (режим совместимости). Это не всегда ломает страницу сразу, но делает поведение менее предсказуемым — например, по-другому считаются размеры блоков.

❌ без doctype
quirks mode: старые правила вёрстки, сюрпризы с размерами
✅ с doctype
standards mode: предсказуемое поведение
<!-- ✅ как правильно: первой строкой -->
<!DOCTYPE html>
<html lang="ru">
  <!-- ... -->
</html>

❌ Ошибка 2: Нет <meta charset>

Кириллица может отображаться как набор нечитаемых символов, если кодировка не указана явно.

❌ без charset
Здравствуй
✅ UTF-8
Здравствуй
<head>
  <meta charset="UTF-8">  <!-- ✅ первой строкой в head -->
  <title>Страница</title>
</head>

❌ Ошибка 3: Видимый текст попал в <head>

Если видимый контент лежит в <head>, браузер его не покажет в обычном потоке — он либо проигнорируется, либо «вытолкнется» в <body>, ломая структуру.

❌ <p> внутри <head>
пусто — текст не на своём месте
✅ <p> внутри <body>
Текст виден пользователю
<head>
  <meta charset="UTF-8">
  <title>Страница</title>
</head>
<body>
  <p>Текст виден пользователю</p>  <!-- ✅ контент только в body -->
</body>