Урок 48. Ошибки: Валидация HTML и CSS

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя

⚡ Кратко

«Открывается — значит, всё хорошо» — главная ошибка. Браузер чинит мусор по-своему, поэтому невалидный код ломается у других. Не игнорируйте предупреждения, не закрывайте ошибку «костылём», не путайте «работает» с «корректно».

Частые ошибки

1. «Страница открывается — значит, всё в порядке»

Самая распространённая ловушка. Браузер достраивает сломанную разметку по правилам восстановления, и у вас всё выглядит нормально. У другого пользователя, в другом браузере или в скринридере — нет. «Работает» ≠ «валидно».

2. Незакрытый тег ломает вёрстку дальше по странице

Один пропущенный </div> «съедает» соседние блоки внутрь себя — наследуются фон, отступы, ширина. Дефект проявляется не там, где ошибка.

❌ Как ломается: блок B «провалился» внутрь A

Блок A (рамка не закрыта)
Блок B оказался внутри A и унаследовал его контекст
<div class="a">Блок A
  <!-- забыли закрыть div -->
<div class="b">Блок B</div>
Как правильно: закрывайте теги сразу при открытии и доверяйте автоформатированию редактора — оно подсветит несоответствие отступов.

3. Игнорирование предупреждений валидатора

Warning — не блокер релиза, но он должен быть осознанным. Каждое предупреждение разбирайте по причине: часто за ним скрывается реальный баг доступности или совместимости.

4. «Фикс ради зелёного результата»

Убрать ошибку, сломав смысл, — хуже самой ошибки. Например, заменить <button> на <div>, «чтобы валидатор не ругался на тип» — потеряете доступность с клавиатуры. Любое исправление должно сохранять семантику и доступность.

5. Дубли id и отсутствие alt как «мелочь»

Это не косметика: дубль id ломает JS и якоря, а <img> без alt невидим для скринридера. Валидатор отмечает их именно потому, что это реальные проблемы.

Навигация