Проверка HTML
Вставьте HTML-код, ссылку на страницу или список ссылок (по одной в строке). Инструмент найдёт ошибки и объяснит, что они значат.
Проверка HTML: зачем нужна и как наш валидатор помогает не утонуть в ошибках
Если вы хоть раз открывали чужую тему, плагин или доставшийся по наследству сайт, вы знаете это чувство: код работает, но внутри — каша. Незакрытые теги, дублирующиеся id, устаревшие атрибуты, <title> почему-то в <body>, а <meta charset> вообще нет. Браузер всё это «проглатывает» и как-то рендерит, но рано или поздно оно выстрелит — вёрстка поедет, скрипт не найдёт элемент, поисковик не поймёт страницу.
Мы собрали инструмент, который проверяет HTML и объясняет каждую ошибку человеческим языком. Не идеальный, но реально полезный.
Что умеет валидатор
Инструмент работает в трёх режимах: вставить код напрямую, дать одну ссылку или загрузить список ссылок (до 10 за раз). Для каждого адреса — отдельный отчёт с подсветкой строк и сниппетами кода.
Структура документа
Проверяет базовую иерархию: <!DOCTYPE>, <html>, <head>, <body> — кто где стоит, кто открыт дважды, кто закрыт без открытия. Ловит <title> внутри <body>, <meta> после </head>, повторные <html> или </body> посреди кода. Если между </head> и <body> затесался код — скажет.
Синтаксис тегов
Отслеживает стек открытых тегов: незакрытые, лишние закрывающие, нарушение порядка вложенности. </p> без <p> — поймает. </div> раньше </ul> — поймает. Теги с необязательным закрытием (<li>, <td>, <option>) не помечает как ошибку, если они не закрыты — это нормально по стандарту.
Атрибуты
- Дубликаты атрибутов —
rel="preload" rel="preconnect"на одном теге. - Несуществующие атрибуты —
aling="middle"вместоalign. Валидатор не просто ругается, а предлагает ближайший правильный вариант: «Возможно, опечатка — имелся в виду align». - Недопустимые значения —
rel="prefetch"у<link>,http-equiv="cache-control"у<meta>. - Проблемы с кавычками — сдвоенные
"значение"", незакрытые кавычки, вложенные кавычки без экранирования.
Вложенность
Проверяет, какие элементы могут быть дочерними по отношению к каким:
- Блочный элемент (
<div>,<ul>,<table>) внутри строчного (<span>,<b>,<em>) — ошибка, браузер разорвёт строчный тег. <a>внутри<button>или<a>внутри<a>— два интерактивных элемента не вкладываются друг в друга.- Блочные теги внутри
<p>— абзац не может содержать блочные элементы.
Доступность и SEO
- Картинки без
alt— скринридеры не смогут описать изображение. - Поля ввода без
<label>— форма недоступна. - Отсутствие
langу<html>,<meta name="viewport">,<title>. - Несколько
<h1>на странице. - Дублирующиеся
id— скрипты и якоря найдут только первый.
Ссылки и медиа
href="tel:+7 (495) 126-41-31"— пробелы и скобки в tel-ссылке ломают набор номера.- Пустой
hrefу<link rel="canonical">. <img>безsrcиsrcset(с подсказкой, если естьdata-src— lazy loading).href="javascript:..."— устаревший паттерн.
Кодировка и спецсимволы
- Управляющие символы C1 (
€–Ÿ) — не отображаются, ломают вёрстку. - Много числовых ссылок подряд — признак проблемы с кодировкой.
Infinity,NaN,undefinedвstyle— JavaScript протек в CSS.
Честно об ограничениях
Этот валидатор — не браузерный движок и не W3C-сертифицированный парсер. Он написан на PHP с использованием DOMDocument и регулярных выражений, и у него есть пределы.
Где он может ошибаться:
- Шаблонизаторы и фреймворки. React, Vue, Nuxt, Next генерируют HTML на лету. В исходном коде может быть
<div class="{{ active }}">— валидатор увидит это буквально, а не как шаблон. - Серверный рендеринг. Nuxt-сайты отдают один HTML сервером, а потом JavaScript перестраивает DOM. Валидатор проверяет только то, что пришло с сервера.
- Динамические атрибуты. Tailwind, UnoCSS и подобные генерируют классы вроде
px-[16px]— это валидный HTML, но валидатор не знает всех возможных значений. - SVG и MathML. Мы вырезаем их перед проверкой, чтобы не ловить ложные теги. Но если SVG встроен хитро — например, через
<use>с внешней ссылкой — валидатор его не увидит. - Теги с необязательным закрытием. HTML разрешает не закрывать
<p>,<li>,<td>и ещё десяток тегов. Валидатор это учитывает, но в редких случаях может ошибиться, когда тег не закрыт намеренно, а следующий сбивает с толку. - Блокировки. Крупные сайты (Dzen, VK, Авито) могут отдавать ботам заглушку вместо реальной страницы. Мы маскируем запрос под браузер, но это не гарантия.
Чего он не делает:
- Не проверяет CSS (кроме значений в
style). - Не проверяет JavaScript.
- Не запускает страницу в браузере и не делает скриншоты.
- Не проверяет доступность на уровне WCAG (только базовые вещи:
alt,label,lang). - Не сравнивает с полным списком HTML-атрибутов W3C — список содержит ~250 атрибутов, но стандарт больше.
Зачем пользоваться, если он не идеальный
Идеальных валидаторов не бывает. Даже W3C Validator иногда выдаёт десятки предупреждений на страницах, которые отлично работают во всех браузерах. Профессиональные инструменты вроде Lighthouse тоже не гарантируют полноту.
Наш валидатор решает конкретную задачу: быстро найти явные ошибки в HTML и объяснить их. Не «Tag header invalid» без контекста, а «Тег <title> находится внутри <body>, а должен быть в <head>». Не «Ошибка парсинга, строка 42», а «В tel-ссылке есть пробелы — уберите их, иначе номер не наберётся».
Для разработчика, который правит чужую тему, для верстальщика, который проверяет свою работу перед сдачей, для владельца сайта, который хочет понять, почему «вроде работает, но что-то не так» — этого достаточно. А если валидатор что-то пропустил — вы всегда можете открыть Chrome DevTools и проверить вручную.
Как пользоваться
- Откройте страницу с валидатором.
- Выберите режим: код, ссылка или список ссылок.
- Нажмите «Проверить».
- Читайте отчёт — ошибки отсортированы по важности: красные (ошибки), жёлтые (предупреждения), синие (заметки).
- Для каждого пункта есть объяснение, номер строки и фрагмент кода.
Если нашли ложное срабатывание — не спешите ругаться. Откройте код, посмотрите на строку, которую указал валидатор. Возможно, он нашёл реальную проблему, просто сформулировал не совсем точно. А если действительно ложно — напишите нам, поправим.