Как проверить сайт на валидность

валидация сайта

Приветствую вас на моем сайте!

В этой статье я расскажу вам как проверить сайт на валидность и нужно ли делать это вообще, а так же более подробно остановлюсь на проверке валидности HTML, покажу как использовать w3c валидатор и исправлять возникающие ошибки.

Что такое валидатор?

Валидаторы HTML и CSS представляют собой онлайн-сервисы, которые проверяют ваш сайт на соответствие его определенным стандартам и правилам.

Данные правила устанавливает консорциум W3С в который входят крупнейшие компании, такие как: Google, Microsoft, Opera, Mozilla, Apple, IBM и многие другие.

участники консорциума

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

Необходимость валидации кода возникла тогда, когда веб-технологии начали развиваться очень быстрыми темпами. В CSS и HTML стало появляться множество возможностей и веб-разработчики, конечно же, их использовали для своих проектов, причем делали это кто как хотел.

Так же, стало появляться множество различных браузеров, которые могли по-разному отображать одни и те же элементы веб-страницы.

Консорциум W3C был создан для того, что бы как-то стандартизировать и прописать определенный свод правил и требований, прежде всего, к HTML и CSS коду.

То есть основная идея всех этих правил заключается в том, что если на вашем сайте нет никаких ошибок валидации, то он должен одинаково отображаться во всех браузерах, то есть быть кроссбраузерным. Но на самом деле это далеко не всегда так!

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

Так же, есть множество примеров, когда кроссбраузерные сайты, которые одинаково отображаются в разных браузерах, содержат в себе множество ошибок и предупреждений при проверке сайта на валидность.

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

Как проверить сайт на валидность?

Давайте посмотрим как выглядит проверка валидности HTML на практике.

Для проверки сайта на валидность кода нам понадобится сервис W3C Markup Validator.

Выглядит он следующим образом:

стартовая страница сервиса W3C Markup Validator

Здесь есть три вкладки:

На первой вкладке «Validate by URI» вы можете сразу же вставить адрес вашего сайта или какой-то его страницы.

проверка по адресу страницы

На вкладке «Validate by file Upload» вы можете загрузить сюда файл HTML-страницы, который находится на вашем компьютере.

проверка загруженного файла

На вкладке Validate by Direct Input вы можете вставить готовый фрагмент кода который вы хотите проверить на ошибки.

проверка кода

Так как мы валидность сайта, то нам нужна будет вкладка «Validate by URI». В поле «Address» вставляем адрес проверяемого сайта и далее мы можем сразу же нажать на кнопку «Check», либо можем нажать на ссылку «More Options» и посмотреть, какие есть еще настройки у W3C валидатора.

расширенные настройки проверки по URI

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

Так же если в теле вашего html-документа не задан атрибут DOCTYPE, то вы можете выбрать его из раскрывающегося списка Document Type. Здесь есть множество различных стандартов и вам нужно выбрать по правилам какого стандарта вы хотите проверять сайт на валидность.

Если вы ничего не понимаете в кодировках и доктайпах лучше здесь вообще ничего не трогать и оставить все по умолчанию.

В следующей строке вы можете настроить вывод результатов проверки валидатора W3C:

настрока выдачи результатов проверки

List Messages Sequentially – выводит все ошибки и предупреждения, возникающие при валидации последовательно.

Group Error Messages by Type – позволяет сгруппировать все ошибки валидации по типу.

дополнительные настройки

Show Source – отображает исходный код страницы

Show Outline – отображение строки в которой валидатор нашёл ошибку.

Clean up Markup with HTML-Tidy – позволяет вывести строку с уже исправленной ошибкой, то есть правильным html-кодом. Это осуществляется при помощи программы HTML-Tidy, и консорциум W3C не дает никаких гарантий, что данный код будет на 100% правильный.

Validate error pages – позволяет проверить на валидность страницу 404, которая выдается в случае если человек вводит не правильный адрес страницы на сайте.

Verbose Output – позволяет вывести подробную информацию.

Я обычно здесь ничего не ставлю. Просто ввожу адрес сайта и нажимаю на кнопку «Check», а дальше смотрю на список ошибок и предупреждений, который возникают на проверяемом сайте.

После нажатия на кнопку «Check», отображается список ошибок и предупреждений, возникших в процессе проверки валидности HTML.

результаты проверки

На данном сайте есть два предупреждения — они выделяются желтым цветом, и две ошибки – они выделяются красным цветом.

Как исправить ошибки валидации HTML?

Давайте посмотрим на саму структуру вывода предупреждений и ошибок.

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

исправляем ошибки

В данном предупреждении написано, что атрибут role со значением banner не является обязательным для элемента header.

Во второй строке указывается, с какой строки, и с какого столбца по какую строку, и какой столбец был найден фрагмент кода с ошибкой.

строка с указание местоположения ошибки

То есть, наш код начинается со строки 52 столбец 2, и заканчивается в строке 52 столбец 57.

В третей строке отображается, текст самого кода. Он выделенный желтым цветом.

код содержащий ошибку

В данном случае, для того чтобы исправить это предупреждение, нам нужно убрать атрибут role у тега header, потому что он здесь, в принципе, не нужен и вызывает предупреждение при проверке валидности.

Для этого мы можем открыть нашу страницу и найти строку 52 столбец 2. Но это далеко не всегда эффективно, потому что если ваш сайт на каком-то движке, то вся файловая часть сайта разбита на множество различных файлов шаблона и там все выводится при помощи php и найти там данную строку будет очень сложно.

Поэтому, мы берем и копируем строчку с данным кодом и затем находим ее в файлах шаблона темы и уже там исправляем.

Тоже самое касается всех остальных ошибок и предупреждений, найденных валидатором W3C.

Конечно же универсального рецепта по исправлению всех ошибок нет. Здесь нужно смотреть на то, какой у вас сайт, какие у вас используются элементы, в каких фрагментах кода выдаются те или иные ошибки.

Очень часто бывает так, что для организации, к примеру, галереи приходится для изображений этой галереи присваивать атрибуты rel, и потом, когда страница проверяется валидатором, он начинает на них ругаться. Но если эти атрибуты удалить, то галерея перестанет работать. При этом, данная ошибка вообще ни как не повлияет на отображение сайта в браузерах, но тем не менее она у вас будет, и здесь вам нужно будет просто выбирать, чего вы хотите больше: чистого валидного кода, либо красивую галерею на вашем сайте.

Нужно ли проверять сайт на валидность вообще?

Я для себя сделала следующий вывод:

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

Если же ошибки не значительные и их устранение повлечет за собой какие-то негативные последствия, то их можно спокойно оставить и ничего страшного здесь не произойдет, на кроссбраузерность сайта это не повлияет и на поисковой выдаче, с вероятностью 99%, это тоже не отобразится.

Google уже отказался от учета валидности сайта при ранжировании страниц. Яндекс пока еще не отказался, но судя по тому, какие страницы находятся у него в топе, он этот фактор либо учитывает в незначительной степени, либо не учитывает вообще.

Видеоинструкция

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

Надеюсь, что у вас не возникнет проблем с валидатором и проверкой вашего сайта. Если у вас будут возникать какие-то вопросы – вы всегда их можете задать через форму комментариев.

На этом у меня все. Подписывайтесь на мою рассылку и на мой канал на YouTube и до встречи в следующих статьях.

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

2 комментария

  1. Из всяких правил бывают исключения.
    Если посмотреть на валидацию главной страницы яндекса, то там далеко не все хорошо. На вордпресс  в движке сайта есть вещи, которые способствуют развитию ошибок. Например, в сайтбарах все оборачивается в тег li. И если там вставлен какой-то блок див, то естественно это будет не нормально. Например добавление при добавлении виджета произвольного меню. Поэтому, я считаю, что за лучшее в движке заменить данный ли на див, чтобы все оборачивалось в див.

    • Если ошибки не значительные, то их можно спокойно оставить и ничего страшного здесь не произойдет, на кроссбраузерность сайта это не повлияет и на поисковой выдаче, с вероятностью 99%, это тоже не отобразится.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif