Проверка страницы на валидность. Стоимость проверки с помощью W3C Validator Suite. Что такое валидаторы кода

Игорь . Обновление:Июнь 9, 2012 .

Здравствуйте, друзья! Сегодня очень важная тема на повестке дня: как произвести проверку сайта на ошибки , которая подразумевает проверку валидности (соответствия стандартам) html кода, c помощью сервиса W3C validator .

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

Валидность, то есть соответствие html кода определенным стандартам, задает Международный Консорциум W3C (World Wide Web Consortium). Все интернет-разработчики в большинстве своем обязательно учитывают эти нормы в своих творениях. Согласитесь, без этого в интернет-пространстве, программировании в частности, воцарит хаос и анархия. Кроме контроля HTML кода очень важно осуществить .

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

W3C validator: проверка валидности html документа

Очень полезный сервис-подсказка всем вебмастерам в деле проверки и поддержания валидности html - это W3C validator. Для начала перейдем на главную страницу W3C :

Как видите, уже есть разделение по регионам и вы можете просмотреть русскоязычный вариант главной страницы, выбрав в выпадающем меню с правом верхнем углу соответствующий регион и нажав кнопку «GO». К сожалению, результаты проверки валидности html пока возможны только на английском языке, поэтому для того чтобы перейти непосредственно к проверке сайта на ошибки, кликайте по ссылке «HTML and markup validator» в правом нижнем углу:

Для проверки валидности html можно поступить тремя способами:

1. Validate by URI - проверка по URL адресу документа
2. Validate by File Upload - проверка валидности html по загружаемому файлу
3. Validate by Direct Input - можно непосредственно вставить html код и осуществить проверку на валидность.

Для того, чтобы проверить правильность html кода страницы сайта или блога на ошибки, выбираем первый вариант. Затем вводим адрес ресурса в соответствующее поле «Address» и нажимаем «Check» . Вполне возможно, вам откроется следующая картина, в моем случае было именно так первый раз, когда я затеял проверку своего блога с помощью W3C validator:

Вердикт W3C validator неутешителен: невозможно осуществить проверку сайта на ошибки html кода, поскольку был обнаружен недопустимый символ на строке 298. Что же, будем искать этот символ, благо подсказка есть. Если вы пользуетесь Google Chrome ( мануал, описывающий этот браузер), то нажимайте правую кнопку мышки и выбирайте «Просмотр кода страницы» из контекстного меню (либо используйте комбинацию клавиш Ctrl+U), в результате чего откроется страница с HTML кодом на соседней вкладке.

В случае других браузеров: если вы пользователь Internet Explorer ( об Эксплорере статья) выбираете «Просмотр HTML кода» , Mozilla Firefox (об подробнее) - «Исходный код страницы» , Opera ( о том, как скачать, установить, настроить и обновить браузер Опера) - «Исходный код» .

Смотрим, что здесь не устраивает W3C validator. Как видно из скриншота, эта строчка соответствует одному из комментариев, моему ответу на один из комментариев. Здесь мною был случайно использован символ амперсанда &, это отрывок из ”последних комментариев” на главной странице:

Отредактировав это место, снова проверяем сайт на ошибки, используя повторно W3C validator (для исправления я зашел в раздел «Комментарии» админ панели WordPress и заменил & на букву н):

Как видно из вышеприведенного скриншота, на этот раз валидатор смог осуществить проверку и выдал 8 ошибок и 2 предупреждения. Это на самом деле очень мало и с этим вполне можно жить. Многие вполне приличные, пользующиеся доверием Яндекс и Гугл сайты имеют на порядок больше ошибок по валидности html.

Внимание! W3C validator осуществляет проверку валидности только той страницы, адрес которой вы вводите, а не всего сайта. Если введен адрес главной страницы, то получите данные только по этому документу.

Даже главная страница Yandex, если для примера вы решитесь ее проверить, содержит несколько десятков ошибок. Но это и понятно, очень трудно постоянно следить за корректировкой кода, поскольку документы (читай: страницы сайта) постоянно обновляются. Например, мы на блоге WordPress постоянно используем плагины для тех или иных целей, которые также вносят хаос в html код.

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

В последующих публикациях я постараюсь вновь поднять эту тему и более подробно рассказать на примерах, какие конкретно действия предпринять для их ликвидации; чтобы не пропустить свежую информацию, подписывайтесь на обновления блога по RSS . Еще раз напоминаю, что слишком большое количество ошибок в html коде может помешать правильному отображению сайта в различных браузерах. Кроме того, что-то мне подсказывает, что вскоре поисковые системы могут внести коррективы в порядок ранжирования ресурсов и учитывать валидность html кода. В дополнение привожу разъяснения некоторых настроек на странице проверки валидации W3C validator:

Show Source - показывает исходный код
Show Outline - отображает строку,содержащую ошибку
Validate error pages - осуществляет проверку валидности html страницы с ошибкой, например,
List Messages Sequently - отображает ошибки и предупреждения обычным списком
Group Error Messages by Type - классифицирует ошибки по определенным признакам
Clean up Markup with HTML TIdy - выводит правильный код, исправленный программой HTML Tidy. В аннотации указано, что эта программа не входит в состав W3C validator, поэтому они не гарантируют корректность ее работы.

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

Желаете получать своевременно свежие актуальные и полезные статьи? Тогда можете подписаться:

Еще статьи по данной теме:

38 отзывов

Анна
У любителей построения тем на вордпресс, даже у профессионалов такое есть, есть такие баги и на бесплатных хостингах, где часто люди строят ГС. Вот брала "коробку"(готовый сайт под ключ от известного писаки и верстальщика) годом или чуть более всё в норме было, после проверки валидации около трёх месяцев назад обнаружены несколько ошибок. Игорь, Спасибо за такую подробную статью "чайнику" 🙂 ! Теперь слегка вникаю в "что? да как?", оказывается как раз хитрое это дело, только не знаю, как это воспринимают роботы, то есть "пауки" поисковых систем. Хотела узнать у Вас: есть ли связь с поисковыми системами и валидацией, или этот тип ошибки только чисто технический момент и находится строго в рамках сайта, в смысле никак не влияет на позиции в google и yandex?

Игорь, ещё раз СПАСИБО.
Василий
Проверял как-то свой сайт на ошибки. Увидел ошибки, а что дальше делать не понятно. Игорь, а почему вы не публикуете свои статьи в соцсетях для вебмастеров. У вас хорошие статьи и это может поднять посещаемость вашего сайта.
Игорь
Анна, по утверждению самих представителей Yandex и Google, количество ошибок абсолютно не влияет на позиции сайта в поисковой выдаче. Но мы же не знаем, как долго это будет продолжаться, ведь алгоритмы поисковых систем постоянно меняются.
Игорь
Василий, если Вы начинающий и не разбираетесь в языках html и css, то первым делом обратите внимание, сколько у Вас ошибок и предупреждений и сравните с наполненностью контентом Вашего сайта. Если у Вас сайт уже содержит несколько десятков страниц и ошибок несколько десятков, то ничего страшного нет, Вы можете вернуться к исправлению ситуации позже. Со временем Вы обязательно приобретете начальные знания по html и css, если будете развивать свой проект и тогда быстро сможете разобраться что к чему. Что касается соцсетей, то Вы правы, это дополнительный трафик.
Анита
Админ, W3C предлагает кнопки социальных сетей от Yandex, далее у меня стоит реклама от обеих представителей как Google, так и от Yandex в них W3C тоже заметил критическую ошибку, на пару секунд убрала три блока Google. Отправляю запрос, кликнув по кнопке перепроверка, я удивилась! Из ранее оставшихся не подкорректированных 92 у меня 83. А просто убрала коды рекламы:). Директ убирать как-то уже без желания стало, т.к. ошибка та же. И хоть убей ну жуть не любит W3C знак & ни как в единичном значении ни как в значении, представляющем право - ©.

Этого мало, смотрю, знаете W3C указывает где и на какой строке, верно, проверяю допустим говорит строка 127 отсутствует в закрывающем парном теге "body" его угловая, то есть ">" ошибки я не обнаружила ни через "FireFox", ни в мониторинге через "Ctrl"+"U" в "Google Chrome", что характерно отсутствие ">" сервис W3C видит больше в тегах "body" и "noindex" и, в скрипте "javascript". Проверив всё и отредактировав, ошибок осталось 42. Не знаю как W3C работает и сканирует на баги, но пробегаясь по другим ресурсам используя Notepad++ c плагином подсветки синтаксиса(нашла на Хабре) ошибки отсутствуют, но у W3C воз и ныне там. А без кнопок соц.сетей мне не интересно, как и без рекламы 🙂 неохота. Спасибо, Вам за уроки.
Игорь
Уважаемая Анита! Если пока не получается ликвидировать все ошибки, ничего страшного, тем более, что Вы уменьшили их число в 2 раза. Пока поисковики не учитывают ошибки валидации при ранжировании сайтов. Но Вы молодец, что решили навести порядок, потому что этот труд точно впустую не пропадет.
Lin-80
Нужная вещь проверить на наличие ошибок свой сайт.
Андрей
спасибо за полезную статью, исправил свои ошибки в коде
Игорь
Рад за Вас, Андрей. Спасибо за комментарий.
Людмила
Не можете подсказать, как здесь исправить, я только начала в этом разбираться, нашла где исправлять, а на что этот красный символ исправить не знаю.
.. TP:/ / txtrk.com/tiz/c1tiz.php? ICS = 7354 & I ср = 3809 & Adul = 1 & bcol = _EFEFEF и zcol = "+" и г...
✉
Как правило, это каскадные ошибки, вызванной неопределенной ссылкой лица или использование незакодированных амперсанд (&) в тексте URL и тела. См. предыдущие сообщения для получения дополнительной информации.
Игорь
Людмила, у Вас ошибка в коде javascript, который выводит блок рекламы от TxTrek, а, значит Вы получили код от них и вставили в сайдбар, не так ли? Значит, тут от Вас ничего не зависит. Конечно, Вы можете к ним обратиться и попросить почистить код, но это лишняя трата времени и сил. Для начала подредактируйте код в тех местах, где это возможно, то есть в файлах Вашей темы, а коды, полученные от рекламных агрегаторов и партнерских программ пока не трогайте, поскольку здесь не все зависит от Вас.
Василий
Игорь, подскажите, то что выделено красным - это ошибочный код или этот знак должен присутствовать, а он отсутствует.
Людмила
Игорь, спасибо большое за ответ.
Людмила
Еще хочу сказать, что Ваш сайт оказался очень полезным для меня, спасибо.
Игорь
Василий, это зависит от природы ошибки.
Игорь
Я очень рад, Людмила. 🙂
Рашида Гарифулина
Игорь
Рашида, то что, появляются ошибки, ничего страшного, ведь проект развивается и обойтись совершенно без них невозможно. Просто надо время от времени проверять, чтобы они не превратились в лавину. Да, в этом отношении Яндекс тоже не безгрешен.
Александр
Добрый день, тоже копаюсь сейчас в своем сайте...были проблемы с плагинов аудио, я его удалил...теперь пишет что Файл не найден: _http://alexandrrychko.ru/wp-content/plugins/wp-audio-player/css/audioplayer.css?ver=3.6: Not Found что делать..?
Игорь
Александр, а чего же Вы ожидали, если удалили плагин? Естественно, в этом случае возникает ошибка 404.
Людмила
Александр
Так и до удаления были ошибки в аудио плеере..поэтому и удалил. Кривые какие то плагины))) А как подчистить? теперь что удалять нужно?
Игорь

Вы наверняка много раз слышали словосочетание «валидность кода» . А знаете ли вы что это такое? Если да, тогда просмотрите эту статью по диагонали, может все таки что-то интересное найдете. А те кто не знает — читайте полностью. Я расскажу о том, как проверял валидность кода своего блога, как исправлял неправильные теги и многое другое.

Если у вас есть свой сайт или блог, то вы наверняка пишите на нем уникальные статьи, продвигаете его в поисковиках и т.д. Но задумывались ли вы о исходном коде своего сайта? Это так же очень важно, ведь поисковики видят именно исходный код страниц и извлекают из него тексты статей и другие элементы ресурса. Если исходный код будет неправильным и не будет соответствовать стандартам, то роботам будет трудно правильно оценить качество текста и, например, навигации по сайту.
Итак, валидность кода — это соответствие исходного кода сайта нормам и правилам, описанным Консоциумом Всемирной Паутины или сокращенно W3C. Чтобы проверить свой блог на соответствие этим нормам нужно пройти по ссылке: validator.w3.org . Ввести нужный адрес и посмотреть результаты.

Я столкнулся с ошибками в верстке своей темы а так же с ошибками, которые совершил я сам при установке счетчика от liveinternet. На самом деле я знал о них уже давно, просто не придавал этому значения. И вот совсем недавно мне было нечем заняться и я таки решил добиться валидности кода моего блога. Думаю, это не повредит =)

Для начала скажу, что ошибок было 12 штук, но 10 из них относились к одному и тому же тегу, а именно к

Rel="category tag"

Набрав этот тег в гугле я понял, что на русскоязычные сайты надежды нет, ибо ни одного упоминания об этом теге в рунете нет. Ну что же, не проблема, будем искать на англоязычных, благо ничего сложного в этом нет. Итак, почитав темы на wordpress.org я понял, что не у меня одного страдает от этого тега. На одном из буржуйских сайтов нашел как пофиксить, если кому надо, то вот этот код вставляем в файл functions.php:

Add_filter("the_category", "add_nofollow_cat"); function add_nofollow_cat($text) { $text = str_replace("rel="category tag"", "", $text); return $text; }

После этого сразу 10 ошибок исчезло, но осталось еще две. Первую из них было так же легко исправить. Видите кнопки RSS подписки и Твиттера у меня в шапке блога? Они сделаны картинками, но параметр alt я задать забыл. Я писал о том как важен параметр alt у картинок в теме по внутренней оптимизации, а оказывается он вообще обязателен. Вот и его пофиксил. Осталась одна ошибка.

Когда я устанавливал счетчик на сайт, то поместил его в сайдбар (правая колонка с навигацией), так сказать на скорую руку. Предварительно я заключил его в тег center чтобы выровнять. Но, как оказалось, не по феншую это и валидатор ругался, мол убери этот тег и сделай все красиво — div’ами. ОК, дивами так дивами. Я давно хотел убрать счетчик в подвал для красоты, пусть там тусуется. А тут как раз и повод появился этим заняться. Убрал в футер и выровнял с помощью float: right по правому краю, мне даже самому понравилось, а это главное:)

Вот и все, теперь мой сайт полностью соответствует стандартам! Следующая цель — CSS, проверить ее можно все на том же сервисе, ссылку на который я давал в начале статьи.

Сегодняшнюю статью я хочу посвятить валидации сайта (то есть HTML). Сперва определим что означает этот термин! Валидация сайта — это проверка синтаксических ошибок, проверка вложенности тэгов и другие критерии. Как правило, валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой. Если вы не знали для чего она, теперь будете знать! 🙂 Но для чего, собственно, нужна эта самая валидация и на что она влияет?

«Что такое валидация сайта?»

Как я уже говорил выше, валидация — это соответствие HTML-кода определенным правилам и стандартам. На смену XHTML пришла , которая значительно облегчила жизнь разработчикам. Дело в том, что в версии XHTML синтаксис был очень строгим. Если в HTML5 вы можете писать тэг переноса
как без наклонной черты, так в таком виде
, то в XHTML будет верным только последний вариант. HTML5 не так строг, да и к тому же появилось множество полезных тегов, но не об этом сейчас 🙂 .

«На что влияет валидация сайта?»

А сейчас ответим на второй вопрос.

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

Также я не мог не сказать что валидация влияет на поисковые системы: поисковые системы отдают предпочтение сайтам с валидным HTML-кодом . Имейте это в виду!

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

Способы проверки валидации

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

1 способ. Сервис validator.w3.org

Суть первого способа состоит в использовании сервиса для проверки валидности сайта. Как проверить валидность сайта с помощью сервиса validator.w3.org :

1. Переходим по адресу: validator.w3.org . Перед нами откроется страница, на которой есть 3 вкладки. На первой вкладке «Validate by URI» вы можете проверить валидность сайта размещенного в интернет, на второй «Validate by File Upload» — загрузить файл с компьютера, и на третьей «Validate by Direct Input» — вставить содержимое файла непосредственно в форму для ввода. Я буду рассказывать о первом варианте, то есть когда сайт размещен в интернет (думаю и с другими способами у вас проблем не возникнет). Поэтому выбираем первую вкладку как на изображении ниже:

Character Encoding — кодировку вашего сайта. НО! Если она уже есть между тегами (у себя на сайте в браузере нажимаете на сочетание клавиш CTRL+U , и ищете в начале документа примерно такую строку
). Если же в первой строчке присутствует что-то похожее, тогда и здесь оставляйте значение (detect automatically) .

Если у вас что-то из того, что я описал выше нету, тогда вам самостоятельно необходимо будет выставить эти значения. Я здесь ничего не менял и оставил всё как есть.

3. Затем в поле «Address» вводим адрес вашего сайта как сделал я:

После чего нажимаем на кнопку «Check», которая расположена по середине серого блока:

4. Далее идет валидация вашего сайта и через некоторое время появится результат валидации. Будет похожая страница с сообщением «This document was successfully checked as HTML5!» (что значит что ваш сайт успешно прошел проверку на валидность определенному типу документа, то есть в моем случае HTML5):

Если у вас надпись на красном фоне — это значит что у вас присутствуют ошибки в вашем HTML-документе. Их необходимо исправить. Для этого просто выделяете название ошибки (в видео я всё это показываю как делать) и вставляете ее, например, в Google. Далее просто читаете как с этой ошибкой боролись другие веб-мастера и исправляете ее следуя этим советам. Также у вас есть другой выход — поручить это дело знающему человеку, который разбирается в коде, и пусть он это сделает за вас.

2 способ. Плагины для браузеров

1. Плагин для браузера Mozilla Firefox — Перейти

Переходите по ссылке выше, выбираете версию браузера Firefox и нажимаете на кнопку «Download». Затем выбираете необходимую операционную систему и устанавливаете как обычное дополнение. (те, кто не понял, смотрите видео 🙂)

2. Плагин для браузера Google Chrome — Перейти

Здесь вам необходимо нажать на кнопку «Бесплатно» и затем во всплывающем окошке нажать «Добавить».

3. Плагин для браузера Opera — Перейти

Здесь также происходит обычная установка дополнения.

4. Плагин для браузера Safari — Перейти

Проверка веб-кода на валидность - это проверка его на соответствие стандартам и сертификатам W3C.
W3C (Консорциум Всемирной паутины) - это технические законодатели Сети, которые разрабатывают стандарты и правила для написания кода. Сертификаты и стандарты W3C обязательны к исполнению для всех, кто работает в Сети. Единые стандарты в правописании кода нужны для того, чтобы все Сетевые приложения общались в едином языковом пространстве, на стандартных языках, и понимали друг друга во время работы с веб-документами.
W3C не только создает Сетевые стандарты, но и активно способствует в их соблюдении.
W3C имеет онлайн-сервисы для проверки кода HTML/XHTML и CSS на валидность.
Проверить код на соответствие стандартам W3C при помощи валидаторов W3C - лучший выход.

Бесплатные онлайн-сервисы от W3C для проверки кода на валидность.
Валидаторы от W3C имеют интуитивно понятный интерфейс. Работать с ними легко и просто.
Сервисы дают возможность проводить проверку в трех режимах и имеют, соответственно, всего три кнопки:
Проверить URL
(для проверки нужно указать адрес любой страницы сайта, доступного в Сети)
Проверить загруженный файл
(для проверки нужно указать путь к проверяемому файлу)
Проверить набранный текст
(для проверки нужно скопировать и вставить в окно валидатора проверяемый код)

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

Как пользоваться онлайн-валидаторами от W3C .
обращаемся к валидатору, по адресу:
(http://validator.w3.org/ - для проверки HTML или XHTML
http://jigsaw.w3.org/css-validator/ - для проверки CSS)
в открывшемся окне валидатора выбираем один из трех способов проверки
(url-адрес страницы сайта, локальный файл или набранный текст)
переходим на соответствующую вкладку
указываем объект проверки
(вводим url-адрес проверяемой веб-страницы,
либо путь к файлу на локальном компьютере,
либо вставляем проверяемый код, соответственно)
жмем кнопку «Проверить» и смотрим на результат проверки

Сервисы от W3C проверяют код на валидность и сразу указывают на ошибки, буде таковы имеются. Каждая ошибка будет прокомментирована. Комментарии, к сожалению, на инглиш. Так что, Google-переводчик - в помощь.Остается только, при необходимости, исправить код и снова проверить его на соответствие.
Валидаторы от W3C полностью бесплатны и автоматизированы. Поэтому, долбить их своей работой над ошибками можно долго и безнаказанно. Для этого, эти сервисы и созданы.

Нормальная альтернатива валидаторам W3C.
Кроме онлайновых серваков W3C по проверке веб-кода, очень хороший результат дает расширение HTML Validator для браузера Mozilla Firefox. Наличие такого дополнения в браузере облегчает работу веб-мастера и лишний раз доказывает, что Mozilla Firefox - «рульный» браузер.
Скачать расширение для мазилки можно здесь: http://users.skynet.be/mgueury/mozilla/

Установить расширение можно так:
- Запускаем Firefox.
Дальше: Меню - Инструменты - Дополнения - Расширения.
И, просто перетаскиваем мышью загруженный файл (расширение xpi) в открывшееся окно.
После этого, расширение установится автоматически.

или (второй способ):
- Запускаем Firefox.
Дальше: Меню - Файл - Открыть файл - указать путь к скачанному файлу.
После этого, расширение, опять-таки, установится автоматически.

После завершения установки - нужно будет перезапустить браузер.
При перезапуске - появится окно с выбором способа проверки веб-страниц:
"HTML Tidy", или "SGML Parser", или "Serial"
Выбираем способ "SGML Parser", как наиболее удобный и приемлемый вариант. Жмем соответствующую кнопочку.Теперь, в окне браузера, будет отображаться ярлык-значок дополнения, а рядом с ним - кнопка меню настройки дополнения.
У меня - вверху и справа:

HTML Validator для браузера Mozilla Firefox работает полностью в автоматическом режиме. Ему не нужно показывать, что проверять. Он проверяет все документы, которые будут открыты в Mozilla Firefox. Это очень удобно. Достаточно взглянуть на цвет ярлычка программы, чтобы понять, есть или нет проблемы в открытом документе.
В зависимости от результатов проверки, цвет значка может быть зеленый, желтый или красный, что обозначает следующее:
зеленый - «нет ошибок», все «ОК»
желтый - «нет ошибок, но есть предупреждения»
красный - «есть ошибки»

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

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

1. Checklink
Проверяет сайт или страницу на предмет наличия битых ссылок

2. URL checker
Проверяет доступность сайта в разных точках земного шара.

3. Mobile checker
Проверяет насколько сайт доступен для мобильных устройств и выдает список ошибок и замечаний.

4. Unicorn
Несколько тестов для сайта, в частности HTML 1.0 и Feed валидация.

5. CSS validator
Проверка каскадных таблиц стилей (CSS) и документов (X)HTML.

6. RSS Feed Validator
Проверка синтаксиса RSS каналов.

7. Accessibility with style
Тестирует сайт на соответствие стандартам WCAG 1.0.

8. Color contrast
Проверяет цветовой контраст между передними и задними элементами сайта.

9. WDG HTML Validator
HTML валидатор веб-страницы.

10. Dr. Watson’s site validation check
Комплексная проверка сайта по нескольким направлениям: HTML, ссылки, ссылки картинок, скорость загрузки, СЕО.

11. Robots checker
Сервис для проверки файла robots.txt.

12. Firebug Firefox Extension
Расширение для Firefox с набором инструментов для тестирования.

13. Load Impact
Тестирование сайта в экстремальных условиях повышенной нагрузки на сайт.

14. Accessibility-Checker
Еще один сервис для тестирования сайта на соответствие стандартам.

15. Viewlike.us — сервис не работает
Показывает как выглядит сайт при разных разрешениях экрана.