Проверка данных на валидность. Курс верстки — валидация страницы

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

Зачем необходима проверка на валидность сайта

Проще говоря, проверка веб-страницы позволит определить, соответствует ли она стандартам, разработанным Консорциумом Всемирной паутины (W3C). Обычно это делается путем проверки отдельных страниц на валидность с помощью онлайн-сервиса проверки от W3C .

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

На что влияет валидность сайта

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

Некорректная веб-страница может быть прочитана браузерами по-разному. Это приведет к тому, что ваши посетители, возможно, даже не смогут правильно увидеть контент страницы в своих браузерах. Валидация в дальнейшем позволит исправить почти все основные различия и делает вашу веб-страницу доступной для чтения почти всеми веб-браузерами (чаще всего исключением становится Internet Explorer старых версий). Отсюда и появился термин “кроссбраузерная верстка” – т.е. верстка, которая одинаково хороша (совместима) для всех популярных браузеров.

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

Инструменты проверки для вашего сайта

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

Существует множество бесплатных сервисов для проверки сайта, такие как Markup Validation Service W3C , Web Page Analyzer , Browsershots и другие.

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

Валидность кода означает использование языка разметки гипертекста (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 думает о валидности кода сайтов . Официальная позиция поисковика относительно влияния валидности кода на поисковую оптимизацию представлена в этом коротеньком видео.

Всем привет, сегодня заключительный урок курса верстки в HTML/CSS.

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

Что такое валидация страницы

Начнем с того, что же вообще такое валидация страницы. Валидация страницы — это проверка ее HTML и CSS кода на соответствие веб стандартам, а так же выбранному doctype. Стандарты, о которых идет речь, прописаны W3C и все современные браузеры стараются им следовать.

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

Валидная верстка — это обычно «чистый», красивый код, который ко всему прочему «нравится» поисковым системам. Поэтому проверка кода на валидность — обязательный этап при верстке сайтов.

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

Как проверить сайт на валидность? Простейший способ проверить сайт на соблюдение веб-стандартов, — это воспользоваться онлайн валидатором. Проверка валидности html возможна по адресу: http://validator.w3.org/ . Обязательно пользуйтесь данным сервисом, чтобы найти ошибки в своем HTML коде.

Валидация css осуществляется при помощи CSS-валидатора, расположенного по адресу: http://jigsaw.w3.org/css-validator/ .

Более подробно работу с данными сервисами показал на видео, приведенном чуть ниже.

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

Вот сам видео урок:

Проверка веб-кода на валидность - это проверка его на соответствие стандартам и сертификатам 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. Это очень удобно. Достаточно взглянуть на цвет ярлычка программы, чтобы понять, есть или нет проблемы в открытом документе.
В зависимости от результатов проверки, цвет значка может быть зеленый, желтый или красный, что обозначает следующее:
зеленый - «нет ошибок», все «ОК»
желтый - «нет ошибок, но есть предупреждения»
красный - «есть ошибки»

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