Валидатор разметки W3C
Находите и исправляйте ошибки HTML с помощью сервиса проверки разметки W3C
«Валидатор разметки W3C» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что проверяет валидатор
Валидатор разметки W3C (validator.w3.org) разбирает HTML в соответствии с официальной спецификацией и сообщает о каждом нарушении: незакрытых тегах, неправильной вложенности (например, <p> внутри другого <p>), отсутствующих обязательных атрибутах (img без alt), нераспознанных элементах и многом другом.
Зачем нужна проверка
Некорректный HTML может отображаться в любом браузере сегодня, но каждый браузер волен по-разному исправлять ошибки — то, что хорошо выглядит в Chrome, может сломаться в Firefox. Корректный HTML обеспечивает предсказуемое и единообразное отображение и предотвращает неожиданное поведение в программах чтения с экрана, у поисковых роботов и в почтовых клиентах.
Три способа отправить данные
Проверяйте страницу по URL (вставьте URL страницы), загрузив файл или введя данные напрямую (вставьте HTML). URL лучше всего подходит для рабочих страниц, а прямой ввод полезен во время разработки, когда файл ещё нигде не опубликован.
Чтение результатов
Ошибки содержат номер строки, фрагмент проблемной разметки и объяснение. Исправляйте их сверху вниз: многие ошибки являются каскадными последствиями одной более ранней ошибки. После исправления первых нескольких запустите проверку снова, чтобы увидеть, сколько предупреждений действительно осталось.
Предупреждения и ошибки
Ошибки — это нарушения спецификации, которые могут нарушить отображение. Предупреждения указывают на подозрительные конструкции, технически допустимые, но, вероятно, непреднамеренные (например, имена атрибутов с возможными опечатками или подсказки по доступности). Считайте ошибки обязательными к исправлению, а предупреждения — заслуживающими проверки.
Распространённые ошибки
Отсутствует альтернативный текст у изображения. Незакрытый тег без содержимого (<br> вместо устаревшей записи <br/>, которая также допустима). На странице есть дублирующийся идентификатор. У метки формы нет атрибута, соответствующего идентификатору поля ввода. Вложенные интерактивные элементы (кнопка внутри ссылки). На эти пять случаев приходится большинство сообщений валидатора.
Проверка шаблонов
Если ваш HTML создаётся шаблонами, проверяйте итоговый результат (отрендеренную страницу), а не исходный код шаблона. Заполнитель {{ }} не является допустимым HTML — имеет значение только то, что создаёт движок. Запускайте валидатор в CI для отрендеренных страниц из тестовой сборки.
Интерфейс командной строки html-validate
Для интеграции с CI используйте пакет html-validate для npm: npx html-validate "public/**/*.html" проверяет каждую страницу в сборке. Настройте правила в .htmlvalidate.json. Используйте это, чтобы завершать сборки с ошибкой при регрессиях валидации.
Stylelint и проверка исходного кода
Проверка во время написания кода (stylelint для CSS, eslint-plugin-jsx-a11y для React) выявляет многие проблемы до того, как они попадут к валидатору. Сочетайте её с комплексной проверкой в CI для многоуровневой защиты: выявляйте большинство проблем на раннем этапе, а остальные — до развёртывания.
Что валидация NOT выявляет
Валидация проверяет корректность разметки, но не семантику. Страница, на которой каждый заголовок имеет уровень <h6>, содержит допустимый HTML, но плохую семантику. Аудиты доступности Lighthouse и ручная проверка выявляют семантические проблемы, которые валидатор не обнаруживает.
Предупреждение о режиме Quirks Mode
Отсутствие <!doctype html> включает режим Quirks Mode: браузеры используют устаревший слой совместимости, который нарушает работу современного CSS. Валидатор указывает на отсутствие doctype как на первую ошибку; никогда не развёртывайте страницу без объявления doctype.
Непрерывная валидация
Запускайте валидацию для каждого PR через GitHub Actions: устанавливайте html-validate, запускайте его для собранного сайта и завершайте PR с ошибкой при наличии ошибок. Новые ошибки обнаруживаются во время проверки, а не накапливаются месяцами, становясь слишком сложными для последующего исправления.
Проверка знаний
Почему отсутствие объявления <!doctype html> так важно для валидатора W3C?
Итоги
Валидатор разметки W3C разбирает HTML в соответствии со спецификацией и сообщает о недопустимой разметке. Используйте его через веб-интерфейс для разовых проверок и через интерфейс командной строки html-validate в CI для непрерывного контроля. Распространённые проблемы: отсутствующий альтернативный текст, дублирующиеся идентификаторы, отсутствие doctype, вложенные интерактивные элементы. Валидация выявляет ошибки разметки; для проверки семантики и доступности дополнительно используйте Lighthouse и ручную проверку.
Часто задаваемые вопросы
Урок «Валидатор разметки W3C» бесплатный?
Да — полный текст урока «Валидатор разметки W3C» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Валидатор разметки W3C»?
Находите и исправляйте ошибки HTML с помощью сервиса проверки разметки W3C Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Валидатор разметки W3C»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Валидатор разметки W3C
- Проверка HTML в Lighthouse
- Pa11y и axe для тестирования доступности
- Тестирование снимков HTML