Урок 48. Теория: Валидация HTML и CSS

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

⚡ Кратко

Валидация — это автоматическая проверка кода на соответствие правилам HTML и CSS. Браузер прощает многие ошибки и «чинит» их по-своему, но это значит лишь, что страница выглядит нормально у вас, а у другого пользователя — может сломаться.

  • W3C Markup Validator (validator.w3.org) проверяет HTML: незакрытые теги, неверную вложенность, дубли id, отсутствие alt.
  • CSS Validator (jigsaw.w3.org/css-validator) ловит опечатки в свойствах и неверные значения.
  • Линтеры (HTMLHint, Stylelint) и VS Code подсвечивают ошибки прямо в редакторе, до открытия браузера.
  • Зачем: предсказуемость, доступность, SEO, меньше «плавающих» багов.

Главная идея

Валидация — это проверка кода на соответствие официальной спецификации HTML и CSS. Браузер очень «снисходителен»: встретив незакрытый тег или мусорный атрибут, он не падает с ошибкой, а молча достраивает дерево документа по своим внутренним правилам восстановления. Результат вы видите на экране — и часто кажется, что всё в порядке. Но «выглядит нормально» и «корректно» — разные вещи: каждый браузер достраивает сломанную разметку немного по-своему, поэтому одна и та же страница в Chrome, Safari и в скринридере может вести себя по-разному.

Валидатор — это проверка орфографии для кода. Текстовый редактор поймёт фразу с опечатками, и человек её прочитает, но грамотный текст вызывает доверие и не сбивает с толку. Валидатор так же подчёркивает «ошибки правописания» разметки. Другая близкая аналогия — техосмотр перед выездом: машина и так заводится, но без проверки тормозов вы узнаете о проблеме в самый неподходящий момент. Валидация ловит дефекты до того, как их встретит пользователь.

Как работает проверка: код → валидатор → исправление

Цикл валидации всегда один и тот же: вы отдаёте код инструменту, получаете список ошибок с номерами строк, исправляете причину и проверяете снова, пока список не станет пустым.

Ваш код HTML / CSS Валидатор W3C / линтер Список ошибок строка + причина Исправ- ление повторить, пока ошибок не останется
Валидация — это цикл: проверил → увидел причину → исправил → перепроверил.

Что именно ловит валидатор

  • Незакрытые и лишние теги — например, <p> без </p>.
  • Неверную вложенность — блочный элемент внутри строчного, <p> внутри <p>, <div> внутри <span>.
  • Дублирующиеся id — один и тот же id на двух элементах ломает якоря, JS и доступность.
  • Отсутствие обязательных атрибутов — <img> без alt, <label> без связи с полем.
  • Опечатки в CSS — colr вместо color, неверные значения: такое свойство браузер просто игнорирует.

Когда применять

Валидируйте не только главную страницу, но и все шаблоны. Ошибки разбирайте по причине, а не прячьте: каждая ошибка — это потенциальный баг в чужом браузере или у пользователя скринридера. Предупреждение (warning) не всегда блокер, но оно должно быть осознанным. В командном проекте проверку выносят в CI — тогда невалидный код не попадёт в основную ветку.

Частая ошибка восприятия

«Страница открывается — значит, всё хорошо». Это самая распространённая ловушка. Доступность (семантика, alt, связь label↔поле) — часть качества разметки, и валидатор её частично проверяет. Невалидный код может работать у вас и ломаться у других.

Семантика и доступность: валидатор проверяет структуру, но не заменяет осмысленную разметку. Используйте <button> вместо <div onclick>, связывайте <label for> с полем — это валидно и доступно одновременно.
⚠️ Проверить по документации: конкретный набор правил и категории ошибок/предупреждений зависят от версии W3C Validator и от конфигурации линтеров (HTMLHint, Stylelint). Сверяйтесь с актуальной документацией инструментов.

Навигация