html валидность кода, что такое, зачем и как проверять

html валидность кода Верстка

В данном уроке будем разбираться, что такое валидность html, зачем нужна валидация кода, и как ее проверить онлайн и при помощи плагинов.

Что такое html валидность

Валидность HTML-верстки — это её соответствие стандартам организации W3C. Отсутствие ошибок в вёрстке документа — один из основных показателей её качества.

При этом, соблюдение стандартов не обязательно для того, чтобы сайт отображался в браузерах.

Зачем нужна валидация кода

Правильный, валидный html-код — это код, написанный по спецификации W3C, в которой собраны стандарты и рекомендации по удобству и универсальности Всемирной сети. Даже если ваш сайт отлично отображается в браузере, рекомендую проверить его валидность, как минимум потому что поисковые системы лучше относятся к валидным html страницам и лучше понимают их код.

Онлайн проверка валидности html

Для того чтобы быстро, удобно и в автоматическом режиме проверять свой код, существует помощник — валидатор W3C. Он используется повсеместно (хотя есть и другие), так как придуман и написан консорциумом 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.

HTMLHint

Хинтер работает по определённым правилам, которые довольно схожи с правилами валидатора. Но в идеале стоит проверять верстку как хинтером, так и валидатором, чтобы точно всё исправить.

Со списком правил хинтера можно ознакомиться по ссылке.

Массовая проверка html валидности страниц сайта

Массово проверить страницы сайта на валидность и прочие технические SEO проблемы, можно при помощи бесплатной программы (есть ограничения): WebSite Auditor. Запускаем ее, создаем проект, вбиваем адрес сайта — далее — далее. Ждем пока завершиться проверка всех страниц. Идем в пункт страницы с ошибками в коде и запускаем проверку валидации. всех страниц сайта. Страницы с ошибками в коде

После чего получаем список страниц, где присутствуют ошибки, с возможностью перейти в валидатор.

Список страниц с ошибками валидации

Обычно если сайт на CMS то ошибки кроятся в шаблонах и поправив шаблон мы автоматически их закрываем. А иногда потому что что то не заполнили.

Заключение

Правильный HTML-код крайне важен. Стандарты языка придуманы не просто так. Даже если ошибка кажется несущественной, она может повлиять на логическую сторону кода (например, отсутствие alt — описания изображения).

Всегда проверяйте свой код, обращайте внимание на частые ошибки, чтобы в будущем их не совершать.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru