#15. Валидация HTML: как проверить код валидатором

Основные теги разобраны в предыдущих уроках — и, конечно, в коде случаются ошибки: забытый закрывающий тег, пересечённая вложенность.

Хорошая новость: находить их можно не вычитывая код глазами, а автоматической проверкой — валидацией.

Зачем проверять код

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

Валидатор W3C

Официальный валидатор консорциума W3C (организации, развивающей веб-стандарты) — validator.w3.org. Он предлагает три способа проверки:

• Address — проверить страницу по её адресу в интернете;
• File upload — загрузить файл со своего компьютера;
• Text input — вставить код прямо в поле на сайте.

Наши учебные сайты локальные (мы настроили их в уроке #0), поэтому валидатор не увидит их по адресу — пользуйтесь вторым и третьим способом: загружайте сохранённый файл или копируйте в поле исходный код страницы (Ctrl+U).

Типичные ошибки

• незакрытый или пересечённый тег — вспомните правила вложенности из урока #2;
• блочный тег внутри строчного — урок #11;
• у картинки нет alt — урок #8;
• два элемента с одинаковым id — урок #14.

Как читать отчёт

Валидатор перечисляет проблемы с номером строки и описанием на английском.

Стратегия простая: исправляйте ошибки сверху вниз и запускайте проверку заново — первая ошибка часто порождает каскад остальных, и после её исправления половина списка исчезает.
Цель — зелёная плашка «Document checking completed» без списка ошибок.

Практика

Прогоните через валидатор страницу, свёрстанную в уроке #14, и добейтесь отсутствия ошибок. Затем намеренно сломайте код: пересеките вложенность тегов, удалите закрывающий тег — и посмотрите, как валидатор опишет эти проблемы.

Что дальше

Это последний урок раздела «Основы HTML». Теперь вы умеете сверстать страницу с нуля: структура документа, текст, ссылки, картинки, списки, таблицы, семантика.
Дальше — CSS: в следующем уроке мы подключим к нашей странице файл со стилями и сделаем первый простой пример оформления.