Проверка валидации кода. Исправление html и css c помощью валидатора W3C

Все представленные сервисы в этой крайне полезной подборке помогают веб-дизайнеру протестировать свой сайт на предмет соответствия стандартам и общепринятым нормам веб-разработчиков. В частности можно проверить правильность 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 — сервис не работает
Показывает как выглядит сайт при разных разрешениях экрана.

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

Валидность кода означает использование языка разметки гипертекста (HTML) сайта, который в полной мере соответствует всем правилам и стандартам Консорциума Всемирной Паутины (World Wide Web Consortium или сокращенно W3C).

Четкое соблюдение всех этих правил и стандартов дает сайту целый ряд преимуществ, а именно: кроссбраузерность (корректное отображение страниц сайта во всех популярных браузерах), увеличение скорости загрузки веб-страниц, позитивное восприятие ресурса поисковыми системами и другие факторы.

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

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

Для того, чтобы проверить код на предмет его структурированности и чистоты (валидности), следует воспользоваться одним из множества онлайн чекеров (валидаторов). На официальном сайте Консорциума Всемирной Паутины также можно проверить валидность кода сайта :

validator.w3.org на валидность HTML и jigsaw.w3.org/css-validator на валидность CSS.

Сервис validator.w3.org дает возможность проверить валидность языка разметки гипертекста сайта одним из трех предложенных способов:

1. Validate by URI - проверка валидности HTML по адресу веб-страницы;
2. Validate by File Upload - проверка валидности HTML загруженного документа;
3. Validate by Direct Input - проверка валидности фрагмента HTML-кода.

Для того, чтобы выбрать нужный способ проверки валидности кода, нужно всего лишь переключиться на соответствующую вкладку:

Ниже на наглядном примере я продемонстрирую результаты проверки на валидность такого популярнейшего в среде разработчиков и сеошников ресурса, как Хабрахабр. Для этого в соответствующее поле валидатора вставляем URL сайта и жмём на кнопочку CHECK . Вуаля! Всего лишь несколько секунд и валидатор выдает нам результат:

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

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

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

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

Влияет ли валидность кода на поисковое продвижение?

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

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

Несомненно, работать над ошибками в коде нужно, но и ошибки могут быть разные, не все могут привести к плохому ранжированию сайта, если у вас не +100500 и более ошибок, то это не повод для беспокойства! Исправьте те, которые вы (как хозяин своего сайта) считаете наиболее опасными. Это лично моё мнение и оно может не разделять мнение кого либо из читателей.

А вот что Google думает о валидности кода сайтов . Официальная позиция поисковика относительно влияния валидности кода на поисковую оптимизацию представлена в этом коротеньком видео.

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

Если у вас есть свой сайт или блог, то вы наверняка пишите на нем уникальные статьи, продвигаете его в поисковиках и т.д. Но задумывались ли вы о исходном коде своего сайта? Это так же очень важно, ведь поисковики видят именно исходный код страниц и извлекают из него тексты статей и другие элементы ресурса. Если исходный код будет неправильным и не будет соответствовать стандартам, то роботам будет трудно правильно оценить качество текста и, например, навигации по сайту.
Итак, валидность кода — это соответствие исходного кода сайта нормам и правилам, описанным Консоциумом Всемирной Паутины или сокращенно 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 на сайте в целом и его отдельных страницах. Валидность — это соответствие кода определённым стандартам. Над разработкой веб-стандартов работает Консорциум World Wide Web (W3C) — это международное сообщество, в котором состоят организации, штатные сотрудники и общественность.

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

На официальном сайте W3C предоставлены очень полезные онлайн-инструменты для вебмастеров, одним из них является валидатор — это бесплатный сервис, позволяющий проверить приверженность сайта современным веб-стандартам.

К сожалению, сервис полностью на английском языке, но если вы чуточку разбираетесь в разработке и вёрстке, то непременно поймёте его суть и посыл 😉

Итак, на главной странице расположены три вкладки:

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

Для запуска анализатора нужно переключиться на требуемую вкладку, в качестве примера я буду рассматривать проверку по URL-адресу. Под ссылкой More Options скрываются дополнительные опции, нажмите на нее, чтобы получит доступ к настройкам:

• Character Encoding — кодировка символов. WordPress использует UTF-8, но можно оставить стандартное значение «Detect automatically» для автоматического определения кодировки.
• Document Type — тип документа (HTML, XHTML, SVG и др.). Поставьте флажок Only if missing, если тип документа не задан на странице и его нужно задать вручную для проверки.
• List Messages Sequentially — выводить ошибки и предупреждения последовательным списком;
• Group Error Messages by Type — группировать ошибки и предупреждения по типу;
• Show Source — показать исходный код;
• Show Outline — показать структуру документа;
• Clean up Markup with HTML Tidy — очистка разметки с помощью HTML-Tidy;
• Validate error pages — проверять страницы с ошибками, например, с 404 ошибкой;
• Verbose Output — подробный вывод. Если честно, я не заметил разницы при включении этой опции, если знаете за что она отвечает — поделитесь в комментариях, буду очень признателен.

Когда все настройки выставлены, нажимайте кнопку Check для старта HTML валидатора. Если документ не имеет ошибок, появится надпись:

Document checking completed. No errors or warnings to show.

В переводе на русский язык это означает: «Проверка документа завершена. Ошибки или предупреждения не найдены». Отлично!

В том случае, если документ не пройдёт проверку, увидим простую надпись об её завершении:

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

На скриншоте ниже представлен фрагмент проверки главной страницы Яндекса. Странно это видеть, даже не ожидал, ведь Яндекс сам принимает участие в разработке стандартов W3C… Ну да ладно, соблюдать абсолютно все стандарты действительно сложно, тем более для такого крупного портала.

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

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

Влад Мержевич

Для проверки веб-страниц на наличие ошибок и замечаний существует множество путей и способов. Условно они делятся на онлайновые и локальные. Онлайновые предназначены для проверки страниц с помощью браузера через Интернет, а локальные используются для проверки документов на текущем компьютере. Далее рассмотрим популярные методы валидации документов.

validator.w3.org

Установка расширения

После скачивания файла установить расширение можно несколькими способами.

1. Через менеджер расширений

Запустите Firefox и откройте меню Инструменты > Расширения . Перетащите мышью загруженный файл (он имеет расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.

2. С помощью открытия файла

Выберите в меню Firefox пункт Файл > Открыть файл... и укажите путь к файлу с расширением, дальнейшие действия браузер выполнит сам.

3. Копирование файла в папку extension

Откройте папку на диске, где установлен Firefox (к примеру c:\Program Files\Mozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно.

Все приведенные методы установки требуют перезагрузки браузера после установки расширения. Работа HTML Validator начинается сразу же после повторного запуска Firefox.

Если указанные способы по каким-либо причинам не помогли, вы можете обратиться на сайт поддержки браузера Mozilla Firefox и прочитать обо всех возможных методах установки расширений по адресу
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Использование HTML Validator

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

Рис. 14.6. Виды картинок, отображаемых при проверке документа

Кружок с галочкой (рис. 14.6а) показывает, что документ валидный, желтый треугольник с восклицательным знаком (рис. 14.6б) - по коду имеются замечания, которые могут быть исправлены автоматически. А красный кружок с крестиком (рис. 14.6в) предупреждает, что есть серьезные ошибки.

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

Рис. 14.7. Контекстное меню с пунктом выбора исходного кода

Окно исходного кода веб-страницы разделено на три части (рис. 14.8), где верхний блок содержит собственно HTML-код. В левом нижнем блоке отображается список ошибок и замечаний или информационные сообщения в случае валидного документа. Правый нижний блок предназначен для подробных подсказок о текущих замечаниях.

Рис. 14.8. Результат работы расширения HTML Validator