В данном уроке будем разбираться, что такое валидность html, зачем нужна валидация кода, и как ее проверить онлайн и при помощи плагинов.
Что такое html валидность
Валидность HTML-верстки — это её соответствие стандартам организации W3C. Отсутствие ошибок в вёрстке документа — один из основных показателей её качества.
При этом, соблюдение стандартов не обязательно для того, чтобы сайт отображался в браузерах.
Зачем нужна валидация кода
Правильный, валидный html-код — это код, написанный по спецификации W3C, в которой собраны стандарты и рекомендации по удобству и универсальности Всемирной сети. Даже если ваш сайт отлично отображается в браузере, рекомендую проверить его валидность, как минимум потому что поисковые системы лучше относятся к валидным html страницам и лучше понимают их код.
Онлайн проверка валидности html
Для того чтобы быстро, удобно и в автоматическом режиме проверять свой код, существует помощник — валидатор W3C. Он используется повсеместно (хотя есть и другие), так как придуман и написан консорциумом W3C — теми, кто создал и поддерживает стандарт языка.
Как пользоваться валидатором W3C
Идем на страницу валидатора.
По умолчанию, открыта вкладка «Validate by URI» — валидация документа по его url адресу — сюда достаточно ввеcти URL и нажать на кнопку «Check». Также есть еще 2 вкладки: «Validate by File Upload» — сюда с ПК можно загрузить html файл. И в кладка «Validate by Direct Input», куда можно вставить просто код HTML-фрагмента — давайте разберем на ее примере. Закидываем код и нажимаем кнопку «Check». В результате, если все валидно и хорошо, вы увидите надпись «Document checking completed. No errors or warnings to show.».
В противном случае валидатор выведет ошибки и предупреждения:
Предупреждения — это какие-то незначительные неточности в коде, которые не сломают сайт, но не соответствуют стандартам кода.
Ошибки — более серьёзные проблемы, которые могут повлиять на работу кода в целом. Это могут быть как грубые ошибки — например, неверная вставка тега в тег, неверное закрытие тега и т.д., так и менее значимые — отсутствие атрибута alt, незаполненный тег title.
Рекомендация: просто исправлять всё, что там есть, чтобы осталось лишь заветное зелёное уведомление о том, что всё правильно. Либо как минимум чтобы остались только предупреждения. Правильность кода — залог его корректной и долговечной работы, а также плюс при работе в команде с другими верстальщиками\backend-разработчиками.
Как ещё можно проверять верстку
Помимо классического валидатора есть ещё один тип инструментов — так называемые хинтеры. Как правило, это плагины для редакторов кода, которые при написании кода автоматически подчеркивают ошибки и указывают, что нужно исправить. Один из таких плагинов — HTMLHint для редактора VS Code.
Хинтер работает по определённым правилам, которые довольно схожи с правилами валидатора. Но в идеале стоит проверять верстку как хинтером, так и валидатором, чтобы точно всё исправить.
Со списком правил хинтера можно ознакомиться по ссылке.
Массовая проверка html валидности страниц сайта
Массово проверить страницы сайта на валидность и прочие технические SEO проблемы, можно при помощи бесплатной программы (есть ограничения): WebSite Auditor. Запускаем ее, создаем проект, вбиваем адрес сайта — далее — далее. Ждем пока завершиться проверка всех страниц. Идем в пункт страницы с ошибками в коде и запускаем проверку валидации. всех страниц сайта. 
После чего получаем список страниц, где присутствуют ошибки, с возможностью перейти в валидатор.
Обычно если сайт на CMS то ошибки кроятся в шаблонах и поправив шаблон мы автоматически их закрываем. А иногда потому что что то не заполнили.
Заключение
Правильный HTML-код крайне важен. Стандарты языка придуманы не просто так. Даже если ошибка кажется несущественной, она может повлиять на логическую сторону кода (например, отсутствие alt — описания изображения).
Всегда проверяйте свой код, обращайте внимание на частые ошибки, чтобы в будущем их не совершать.
