Проверка HTML: ошибки, валидность и структура
Вставьте код, адрес страницы или файл — проверим HTML на ошибки: валидность по W3C, линтинг разметки, семантику, доступность и порядок заголовков. Бонусом вы получите отчёт в PDF.
Как проверить HTML-код на ошибки
Вставьте разметку в поле, дайте ссылку на страницу или загрузите файл, и проверка запустится сама, нажимать ничего не нужно. Инструмент разбирает код и показывает найденные ошибки с номерами строк, а рядом ставит оценку от 0 до 100 по каждой категории, чтобы было видно, за что браться в первую очередь. На сервер обращаемся только в двух случаях: когда нужно скачать страницу по ссылке и когда запускаем официальный валидатор W3C.
Что именно проверяется
Проверка идёт сразу по нескольким направлениям, и каждое отвечает за свой тип проблем.
- Валидность по W3C. Тот же движок, что и на validator.w3.org (Nu HTML Checker), находит формальные нарушения спецификации HTML: недопустимые атрибуты, устаревшие теги, неверные значения.
- Линтинг разметки. Ошибки в самом коде, до которых валидатор добирается не всегда: незакрытые и неправильно вложенные теги, дублирующиеся
id, неэкранированные<и&, пустойsrc, картинки безalt. Каждое замечание идёт с номером строки и колонки. - Семантика. Есть ли
main,header,footer,article, или страница целиком держится наdiv. - Доступность. Подписи у изображений и полей формы,
langу страницы, уникальностьid. Без этого страницей тяжело пользоваться со скринридером. - Заголовки. Один ли
H1на странице и не перепрыгивает ли иерархия с него сразу наH3. Тут же строится дерево заголовков.
Всё это собирается в единый отчёт с оценкой, который можно скачать в PDF. А если разметку нужно не только проверить, но и привести в порядок (отступы, экранирование < и &, подсчёт тегов), для этого есть отдельный форматировщик HTML.
Частые ошибки и как их исправить
Большая часть находок в проверке сводится к нескольким повторяющимся проблемам:
| Ошибка | Исправление |
|---|---|
| Незакрытый тег | Добавить закрывающий тег или сделать его самозакрывающимся (<img />, <br />) |
Дублирующийся id | Оставить один уникальный id на странице, для остальных использовать class |
Изображение без alt | Добавить атрибут alt с описанием картинки (пустой alt="", если изображение декоративное) |
| Блочный элемент внутри строчного | Например, div внутри span — поменять местами или заменить строчный элемент на блочный |
Неэкранированные < и & | Заменить на сущности < и & |
Отсутствует lang у страницы | Указать язык в теге html, например <html lang="ru"> |
Дерево разметки и дерево браузера различаются
Здесь вы видите дерево своего HTML: теги ровно там, где вы их написали. Браузер же строит из этой разметки DOM-дерево и по дороге её чинит. Достраивает tbody, закрывает забытые теги, выносит лишнее из таблиц наружу. Из-за этого молча не работает селектор table > tr. Где именно расходятся два дерева, разобрано в статье HTML-дерево и DOM-дерево.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Вставьте разметку в поле, укажите адрес страницы или загрузите файл — анализ запустится автоматически. Инструмент прогонит код через официальный валидатор W3C, линтинг разметки и собственные проверки семантики и доступности, покажет список ошибок с номерами строк и оценку от 0 до 100 по каждой категории.
Валидность по W3C здесь тоже есть — используется тот же движок (Nu HTML Checker). Но кроме формальной валидности инструмент проверяет то, чего W3C не смотрит: семантику (есть ли main, header, footer, не злоупотребляете ли div), доступность (alt у картинок, lang, подписи полей, дубли id) и порядок заголовков. И собирает всё в единый отчёт с оценкой.
Линтинг ловит ошибки в самом коде, которые валидатор W3C не всегда отмечает: незакрытые и неправильно вложенные теги, дублирующиеся id, неэкранированные символы < и &, пустой src, картинки без alt, теги и атрибуты в верхнем регистре. Каждое замечание выводится с номером строки и колонки, чтобы сразу найти место в разметке. Проверка идёт прямо в браузере, код никуда не отправляется.
Да. На вкладке «По адресу» введите URL — мы загрузим HTML страницы и проверим его. Загрузка идёт через наш сервер (из браузера чужую страницу не забрать из-за ограничений безопасности), но дальше весь анализ выполняется у вас в браузере.
Наглядную вложенность тегов вашего исходного HTML: как вложены элементы, где ломается иерархия заголовков. Это то, от чего браузер будет отталкиваться, строя DOM, — и оно может расходиться с тем, что вы видите в DevTools, потому что браузер достраивает пропущенные теги и переставляет то, что лежит не там.
Разбор кода, семантики и доступности идёт в вашем браузере — вставленный HTML никуда не отправляется. На сервер обращаемся только в двух случаях: когда вы проверяете страницу по ссылке (нужно её скачать) и когда запускаете валидацию W3C (её выполняет сервис validator.w3.org).