Исправление html и css c помощью валидатора W3C. Использование HTML Validator. способ. Плагины для браузеров

Аннотация: Как лучше всего начать проверку страниц HTML и гарантировать, что эти страницы будут выводиться правильно в различных браузерах, без каких-либо ошибок? Ответом является валидация (проверка на соответствие правилам). О ней и пойдет речь

Введение

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

Ответом является валидация (проверка на соответствие правилам)! Существует много доступных средств на сайте W3C и в других местах, которые позволяют выполнить валидацию кода сайта.

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

  • W3C MarkUp Validator (http://validator.w3.org/): Этот валидатор находит используемый в проверяемом документе doctype (X)HTML , и просматривает затем весь документ, указывая места, где код HTML не соответствует используемому doctype (т.е., где имеются ошибки кода HTML ).
  • W3C Link Checker (http://validator.w3.org/checklink): Этот валидатор просматривает документ, представленный для проверки, и проверяет все ссылки в документе, чтобы гарантировать отсутствие неработающих ссылок (у которых значения href указывают на несуществующие ресурсы).
  • W3C CSS Validator (http://jigsaw.w3.org/css-validator/): Как можно догадаться, этот валидатор просматривает документ CSS (или HTML/CSS ) и проверяет, что CSS соответствует спецификациям CSS .

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

Статья имеет следующую структуру:

  • Ошибки
  • Что такое валидация?
  • Зачем нужна валидация?
  • Различные браузеры интерпретируют неправильный код HTML по разному
    • Quirksmode
  • Как выполнить валидацию страниц
    • Валидатор W3C HTML
  • Заключение
  • Дополнительные инструменты
  • Контрольные вопросы

Ошибки

В программировании компьютеров существует, вообще говоря, два вида проблем кода:

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

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

HTML не является языком программирования. Синтаксические ошибки на Web -странице обычно не ведут к тому, что Web - браузер отказывается открыть страницу (хотя XHTML является более строгим, чем HTML -- по крайней мере, когда обрабатывается как данные application/xhtml+xml или text/xml , как и должно быть - и некоторые doctype запрещают использование определенных типов элементов HTML ). Это является одной из основных причин быстрого принятия и распространения Web .

Первый браузер Web , WorldWideWeb (http://www.w3.org/People/Berners-Lee/WorldWideWeb.html) написанный Тимом Бернерс-Ли, был также редактором, позволявшим людям создавать Web -страницы, не изучая сначала HTML . Этот редактор создавал неверный HTML . Это можно было бы исправить, но был создан важный прецедент , который существует во всех браузерах Web до сегодняшнего дня - суть которого в том, что предоставление людям доступа к контенту важнее, чем сообщение об ошибках людям, которые их не понимают или не могут их исправить.

Что такое валидация?

Хотя браузеры Web будут принимать плохие (недействительные в нашей терминологии) Web -страницы и делать максимум возможного для визуализации кода, делая наилучшие предположения о намерении автора, тем не менее, можно проверить, был ли HTML написан правильно, и на самом деле это нужно делать, как мы увидим ниже. Мы называем этот процесс "валидацией" HTML .

Программа валидации сравнивает код HTML на странице Web с правилами сопровождающего doctype и сообщает, какие правила и где были нарушены.

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

Существует распространенное мнение среди некоторых Web -разработчиков, что если Web -страница выглядит в браузерах хорошо, то не имеет значения, что ее валидация не была выполнена. Они называют валидацию идеальной целью, но не чем-то, что является черно-белой проблемой.

Существует некоторая доля истины в таком подходе, спецификация HTML не является совершенной, и сейчас существенно устарела. Некоторые вещи, которые, возможно, правильны (такие как начало упорядоченного списка в точке, отличной от 1) являются недействительными в HTML . Однако как говорит пословица:

Учите правила, чтобы знать, как нарушать их правильно

Существует две крайне важные причины для валидации кода HTML при его создании.

  • Человек не совершенен, как и создаваемый им код - все делают ошибки, и Web -страницы будут более высокого качества (т.е., работать более согласованно), если выполоть все ошибки.
  • Браузеры изменяются. В будущем браузеры, скорее всего, будут менее снисходительны при синтаксическом анализе недействительного кода.

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

Различные браузеры интерпретируют неправильный код HTML по разному

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

Но что будет, если передать браузеру недействительный (невалидный) код? Что тогда произойдет? Ответ состоит в том, что в браузере начинает работать обработка ошибок, чтобы определить, что делать с кодом. Браузер , как правило, поступает следующим образом: "ладно, этот код недействителен, как можно представить эту страницу конечному пользователю? Давайте заполним недостающее следующим образом!"

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

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

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

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

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

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

  • Можно группировать ошибки по одному типу (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 с человека туда-обратно. Это очень дешево, таких цен не было давно. Если кто-то заинтересовался, думаю, еще можно успеть ухватить такие билеты. Лазать по вулканам и восхищаться дикой нетронутой природой мы будем с турклубом ПИК.

Игорь . Обновление:Июнь 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 отзывов

  1. Анна

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

    Игорь, ещё раз СПАСИБО.

  2. Василий

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

  3. Игорь

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

  4. Игорь

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

  5. Анита

    Админ, 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 воз и ныне там. А без кнопок соц.сетей мне не интересно, как и без рекламы 🙂 неохота. Спасибо, Вам за уроки.

  6. Игорь

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

  7. Lin-80

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

  8. Андрей

    спасибо за полезную статью, исправил свои ошибки в коде

  9. Игорь

    Рад за Вас, Андрей. Спасибо за комментарий.

  10. Людмила

    Не можете подсказать, как здесь исправить, я только начала в этом разбираться, нашла где исправлять, а на что этот красный символ исправить не знаю.
    .. TP:/ / txtrk.com/tiz/c1tiz.php? ICS = 7354 & I ср = 3809 & Adul = 1 & bcol = _EFEFEF и zcol = "+" и г...

    Как правило, это каскадные ошибки, вызванной неопределенной ссылкой лица или использование незакодированных амперсанд (&) в тексте URL и тела. См. предыдущие сообщения для получения дополнительной информации.

  11. Игорь

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

  12. Василий

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

  13. Людмила

    Игорь, спасибо большое за ответ.

  14. Людмила

    Еще хочу сказать, что Ваш сайт оказался очень полезным для меня, спасибо.

  15. Игорь

    Василий, это зависит от природы ошибки.

  16. Игорь

    Я очень рад, Людмила. 🙂

  17. Рашида Гарифулина
  18. Игорь

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

  19. Александр

    Добрый день, тоже копаюсь сейчас в своем сайте...были проблемы с плагинов аудио, я его удалил...теперь пишет что Файл не найден: _http://alexandrrychko.ru/wp-content/plugins/wp-audio-player/css/audioplayer.css?ver=3.6: Not Found что делать..?

  20. Игорь

    Александр, а чего же Вы ожидали, если удалили плагин? Естественно, в этом случае возникает ошибка 404.

  21. Людмила
  22. Александр

    Так и до удаления были ошибки в аудио плеере..поэтому и удалил. Кривые какие то плагины))) А как подчистить? теперь что удалять нужно?

  23. Игорь

Страницы всех сайтов в интернете оформляются специальным кодом, прописанным по стандартизированным правилам HTML.

Что такое валидность?

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

Валидность сайта - это соответствие кода существующим стандартам HTML.

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

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

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

Основные «приметы» валидной верстки

Валидная вёрстка содержит код, полностью соответствующий требованиям W3C (World Wide Web Consortium), занимающейся разработкой технологических стандартов для всего Интернета.

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

Отсутствуют подозрения о несправедливом «понижении» в выдаче и нет страниц, выкинутых из индекса.

Пример. Если, предположим, неправильно стоят теги

..

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

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

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

Некоторые вебмастера целенаправленно исследовали этот вопрос, пытаясь выяснить, зависят ли результаты ранжирования от результатов валидации. Вебмастер Марк Даост отметил, что валидность кода не принципиальна. А Шаун Андерсон, напротив, пришел к выводу, что валидность как бальзам на душу сайту в плане позиций выдачи.

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

Этот вебмастер сделал очень важный вывод:

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

Зачем нужен валидный код

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

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

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

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

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

Для проверки безукоризненности кода чаще всего используют очень полезный сайт валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org , созданный компанией W3C.

HTML

Здесь перед Вами три варианта валидации:

  • ввести URL-адрес страницы;
  • загрузить файл с кодом со своего компьютера;
  • вставить готовый код в форму.

Сервис указывает не только на ошибки html кода и их расположение, но и даёт советы по исправлению. Если код уже имеется в Сети, то можно произвести валидацию путём введения её URL-адреса в форму «Validate by URL» и нажатия кнопки Check. Валидатор HTML включит считывание кода и сообщит об итогах.

Необходимо вводить именно адрес проверяемой URL-страницы. Весь сайт проверяться не будет. Введёте адрес сайта - программой считается только его главная страница. В случае нахождения замечаний выходит уведомление о невалидности программного кода и далее указываются строки с допущенными погрешностями.

В этом видео наглядно объяснён процесс проверки с помощью валидатора:

Проверка локальных файлов

По этому же адресу http://validator.w3.org можно проверить код, выбрав вкладку «Validate by File Upload» и загрузив документ с прописанным код.

Выбираем путь к необходимому файлу и жмём Check. Далее всё происходит аналогично.

Использование формы для ввода кода

Иногда удобней вставить сразу код страницы и проверить его онлайн: выбираем вкладку «Validate by Direct Input» и отправляем весь код на сервер.

CSS

Проверка валидности кода CSS может быть пройдена также онлайн валидатором: https://jigsaw.w3.org/css-validator/

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

Снова можно выбрать - указать URL, загрузить свой файл или вставить код.

Осуществляется проверка сайта на ошибки, как и в случае с HTML, и - получаем ответ от сервера. Настроек проверки не имеется, однако можно изучить предлагаемый сгенерированный валидный код, расположенный после списка недостатков кода.

Изучаем полученный код и приводим исходный к нужному виду.

Расширения для браузеров

Для браузеров существуют всевозможные расширения для проверки валидации. Для Google Chrome есть проверяющий валидность кода плагин HTML Tidy Browser Extension, для Opera - расширение Validator, для Safari - Zappatic, для Firefor - HTML Validator.

Остановимся на последнем более детально. Он осуществляет ту же проверку, что и validator, только оффлайн. Взять его можно здесь http://users.skynet.be/mgueury/mozilla/

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

Подробное видео об установке HTML Validator и его использовании:

При загрузке любого URL расширение автоматически включается и считывает код. Результат виден в правом верхнем углу.

Выглядит результат как небольшая картинка с итогом валидации:

Щёлкнув по результату, можно открыть:
— исходный код;
— ошибки - в левом нижнем блоке (или сообщение о валидности);
— подсказки по исправлению ошибок - в правом нижнем.

Как исправить наиболее частые ошибки

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

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

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

К этим же ошибкам указаны подсказки по их исправлению.
Приведу пару примеров.

1. No space between attributes.
…rel=»shortcut icon» href=»http://arbero.ru/favicon.ico» type=»image/x-icon»

Здесь исправления убираем «точку с запятой».

2. End tag for element «div» which is not open

Закрывающий тег div лишний. Убираем его.

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

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

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

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

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




Top