Валидация сайта. Что нужно знать?

Привет всем. Я снова вернулась в Петербург после 3х недель пребывания за Полярным кругом. А здесь все так же серо и мрачно:(

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

Содержание

• Знакомство с W3C
• Нужно ли проводить проверку валидации сайта?
• Валидаторы W3C для CSS и HTML-кода

Как появился Консорциум Всемирной Паутины?

Валидность в общем смысле этого слова — соответствие нормам. В случае с Интернетом нормы и стандарты для верстки страниц и создания кода задает Всемирный консорциум W3C. Создатели этой организации стояли у истоков разработки первых версий HTML (Hyper Text Markup Language, или язык гипертекстовой разметки) и стали первооткрывателями всемирной паутины, которая постепенно обрела огромную популярность. Это открытие принадлежит сэру Тимоти Джону Бернерс-Ли совместно с Робертом Кайо. Бернес-Ли до сегодняшнего дня является главой W3C (World Wide Web Consortium, Консорциум Всемирной Паутины) и законодателем в этой сфере.

С помощью html-разметки стало возможным создавать web-страницы, а для их распознавания в привычный для пользователей вид, были созданы браузеры. W3C ввели ряд стандартов, которым должны соответствовать документы в сети, чтобы все браузеры их могли корректно распознавать. В течение всего времени развития интернета между создателями самых популярных браузеров велись войны за первенство. Некоторые из них даже пытались вводить свои новые стандарты, однако W3C благодаря своим разработкам смогли удержать роль законодателя в правилах создания кода. В версии Html 3 уже была включена поддержка CSS (Cascading Style Sheets, или каскадные таблицы стилей). Изначально стили, цвета и формы задавались непосредственно в коде html, но создание CSS значительно упростило эту задачу, разгрузило исходный код, а соответственно и время загрузки страниц. Последняя версия – это Html 5, которая все больше становится актуальна. Долгое время ее место занимал Html 4.01 (с 1999 года).

Эта историческая справка приведена для того, чтоб у вас было более целостное понимание темы сегодняшнего обзора – валидации сайтов. Если вы зайдете на официальный сайт W3C в раздел «Standards», вы увидите целый перечень подразделов со стандартами. Вот, к примеру, можно увидеть актуальный статус по Html:

По каждому из подпунктов приведены длинные списки норм, определяющих тот или иной атрибут, элемент текущей версии кода. Вот, например, неполное содержание по Html 5:

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

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

Должен ли сайт быть валидным?

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

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

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

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

Валидаторы кода HTML и CSS  

Лучше с самого начала следить за соблюдением правил. На самом первом этапе выбора темы WordPress для своего блога уделите время тому, чтобы проверить валидность его html-врестки и css-кода. Желательно, чтоб изначально валидатор html-кода и css выдавал такой результат:

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

Для проверки валидации страницы существуют разные онлайн сервисы. Наиболее достоверные и полные из них, это валидаторы W3C.

Ссылки на них вы можете найти на главной странице официального сайта — www.w3.org

Unicorn – это совмещенный валидатор на русском языке (в нем есть функция переключения языков), который дает информацию сразу по всем параметрам сайта.

Вводите url сайта и жмете «Проверить».

Справа показано количество ошибок (красный крестик) и предупреждений (желтый восклицательный знак).

Увидеть подробную информацию по ошибкам можно в раскрывающемся списке под каждой из опций.

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

Более подробную информацию по ошибкам с подсказками можно получить при проверке валидации css и html кода в отдельных программах.

Вот так выглядит описание ошибок и их причин в html-валидаторе:

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

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

В данном валидаторе есть возможность включения дополнительных опций:

• Можно группировать ошибки по одному типу (Group Error Messages by Type);
• показать весь исходный код, который сервис использовал при анализе (Show Source);
• проверять страницы, которые выдают Error (Validate error pages).

Кроме того, включенная функция «Clean up Markup with Html-Tidy» позволяет увидеть ваш код с исправленными ошибками по версии программы Html-Tidy. Правда, W3C предупреждает, что данная программа не является их разработкой, а, стало быть, гарантий, что код будет верным, они не дают. Однако данный код может вам послужить подсказкой при исправлении ошибок.

Подобную опцию исправления ошибок предоставляет и валидатор W3C CSS кода. Включать ее не нужно, она работает по умолчанию.

Кроме онлайн валидаторов сайтов, также есть возможность установить расширение для FireFox, которое будет проверять наличие ошибок в исходном коде страницы прямо в браузере. Называется оно «Html Validator».

Напомню также, что кроме html и css, есть также валидаторы микроразметки. Ее наличие немаловажно для поисковой оптимизации.

Сегодняшняя тема достаточно непростая. Когда вы приступите к исправлению ошибок, наверняка возникнет много вопросов. Желательно исправлять то, в чем вы уверенны, чтобы не поломать сайт. Не забывайте делать бэкап блога перед внесением изменений. Пока!

P.S. На днях мы взяли билеты на Камчатку в сентябре по чудо-цене 16600 с человека туда-обратно. Это очень дешево, таких цен не было давно. Если кто-то заинтересовался, думаю, еще можно успеть ухватить такие билеты. Лазать по вулканам и восхищаться дикой нетронутой природой мы будем с турклубом ПИК.