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

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

То, насколько чистый и структурированный код сделан разработчиками, позволяет обнаружить проверка сайта на валидность, что осуществляется через специальный чекер на официальном ресурсе от W3C. Здесь в свободном доступе находится валидатор HTML-кода, работающий в режиме онлайн, и находится он по адресу validator.w3.org

С его помощью возможна проверка валидности HTML кода тремя способами:

• Validate by URI — проверка по адресу
• Validate by File Upload - анализ загружаемого файла
• Validate by Direct Input - проверка определенного фрагмента кода.

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

Давайте посмотрим что будет, если проверить на валидность какой-нибудь известный в Рунете сайт, например Хабрахабр. Вставляем в поле для анализа и нажимаем кнопку «Check». Через несколько секунд валидатор W3C выдаст нам следующий результат:

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

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

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

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

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

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

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

Считается, что валидность кода - это единая, универсальная характеристика любого кода.
На самом деле, валидность это соответствие html кода документа определенному своду правил, указанному в доктайпе или подразумеваемому в HTML5 .
То есть, валидность - понятие относительное, поскольку правила бывают разные, и требования у них тоже.
Чтобы было понятнее, приведу пример, который я нашла на сайте css-live.ru :

К строительству жилых домов и атомных электростанций применяются разные СНиПы (строительные нормы и правила), поэтому документ, валидный по одному своду правил, может быть не валидным по другому (хороша была бы АЭС, построенная по нормативам жилого дома!).

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

Валидация - что это?

Простыми словами, валидация - это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).

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

Валидность HTML кода проверяется инструментом, который называется валидатором.
Самый известный валидатор w3c - https://www.w3.org .
Валидатор w3c производит несколько проверок кода.
Главные из них :

1. Проверка на наличие синтаксических ошибок:
   Пример c habrahabr.ru/post/101985 :
   является корректным синтаксисом, несмотря на то, что является недопустимым HTML-тэгом
   Так что проверка синтаксиса является минимально полезной для написания хорошего HTML-кода.
2. Проверка вложенности тэгов :
   В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги.
3. Валидация html согласно DTD :
   Проверка того, насколько код соответствует указанному DTD - Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа).
4. Проверка на наличие посторонних элементов :
   Она обнаружит все, что есть в коде, но отсутствует в доктайпе.
   Например, пользовательские тэги и атрибуты.

Для проверки валидности CSS кода существует валидатор css - http://jigsaw.w3.org/css-validator .
Валидность кода - это результат механической проверки на отсутствие формальных ОВ, согласно указанного свода правил.
Нужно понимать, что валидация - инструмент, а не самоценность.
Верстальщики с опытом обычно знают, где можно нарушить правила валидации HTML или CSS, а где нет, и чем грозит (или не грозит) та или иная ошибка валидации.
Примеры того, когда не валидный код делает сайт:

• более удобным и быстрым - пользовательские атрибуты для Javascrip/AJAX или
• SЕО оптимизированным - разметка ARIA.

Понятно, что в валидности ради валидности нет никакого смысла.
Как правило, опытные верстальщики придерживаются следующих правил:
- В коде не должно быть грубых ошибок.
- Незначительные можно допустить, но только по обоснованным причинам.
В отношении допустимости ошибок валидации html/CSS:

Ошибки валидации (ОВ) можно разделить на группы:

• ОВ в файлах шаблона:
  Их не сложно найти и исправить.
  Если, какие то из мелких ошибок помогают сделать сайт более функциональным или быстрым, их можно оставить.
• ОВ в сторонних скриптах, подключенных на сайте:
  Например, виджет Вконтакте, скрипт Твиттера или видео-файлы с ютуб.
  Исправить их никак не удастся, поскольку эти файлы и скрипты находятся на других сайтах и у нас нет к ним доступа.
• CSS-правила, которые валидатор не понимает:
  Валидатор проверяет соответствие кода сайта определенной версии HTML или CSS.
  Если вы использовали в шаблоне правила CSS версии 3, а валидатор проверяет на соответствие версии 2.1, то все правила CSS3 он будет считать ошибками, хотя они таковыми не являются.
• ОВ, которые поневоле приходится оставлять на сайте, чтобы получить нужный результат. Например:
  • теги noindex. Они не валидны, но очень нужны и с этим приходится мириться.
  • хаки. Чтобы получить корректное отображение сайта в некоторых браузерах, иногда, приходится использовать хаки - код, который понимает только определенный браузер.
• Ошибки самого валидатора.
  Часто он не видит каких то тегов (например, закрывающих) и сообщает об ОВ там, где ее нет.

Получается, что на работающем сайте практически всегда будут какие-то ОВ.
Причем, их может быть очень много.
Например, главные страницы Google , Яндекса и mail.ru содержат по несколько десятков ошибок.
Но, они не ломают отображение сайтов в браузерах и не мешают им работать.
Все написанное выше относится и к моим темам.

В сложных темах есть:

• WordPress функции (например the_category()) , которые дают невалидный код.
• Вывод видео с видеохостингов, например, с YouTube, а в коде YouTube очень много ОВ, на которые ни вы, ни я не можем влиять.
• Кнопки социальных сетей, которые подключаются при помощи скриптов этих сетей и содержат ОВ.
• Правила CSS3 и HTML5, которые валидаторы старых версий считают ошибками.
  В то же время, валидаторы версий CSS3 и HTML5 считают ошибками старые правила:).
• Иногда, чтобы добиться корректного отображения в браузере Internet Explorer или старых версиях других браузеров приходится использовать, так называемые хаки - код, который понимает только определенный браузер, чтобы написать правила отображения сайта именно для этого браузера.

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

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

Блоги/сайты, которые сделают проверку на валидность кода и с наилучшими успехами доведут ошибки до минимума, будут соответствовать стандартам всемирной паутины, такие сайты будут правильно отображаться во всех браузерах, возрастет загрузка, что в будущем хорошо скажется на поведенческие факторы и на ранжирование в поисковой системе. Код HTML сайта, который имеет много ошибок HTML и CSS считается невалидным.

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

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

Как сделать валидный код html онлайн

Проверить валидность HTML кода сайта можно официальным валидатором стандарта W3C. Идем по ссылке >>> на сервис онлайн. Проверьте разметку (HTML, XHTML, ...) веб-документов. В строку адрес вводим url своего сайта, нажимаем "Проверить ".

Как исправить ошибки валидности html кода

В статье опишу свой метод как я делаю валидный код. Заходим на главную страницу своего блога и сочетанием клавиш Ctrl+U открываем исходный код сайта. Смотрим на какой строке ошибки и предупреждения в валидаторе

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

Ошибка "quickedit"

Найти строку и вставить в HTML редактор онлайн. Ошибка - кнопка быстрого редактирования гаджетов. Шаблон у меня сторонний, но специально для платформы Blogger (Blogspot), подарок от автора шаблона.

Кнопок в реале видно не было, а в шаблоне коды остались. У меня лично было 15 кнопочек.

Решение . Открываем блог, заходим в шаблон, делаем резервное копирование, удаляем все кнопки. Находим код

и удаляем.

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

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

Результат: 15 удалений кода и минус 50 ошибок

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

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

Вторая ошибка и минус 42 ошибки в валидаторе .

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

Решение и исправление ошибки : поиск по блогу у меня от Яндекс, значит код не с . Как найти нужную публикацию?! Задаю в своем поиске запрос «Поиск по блогу » и нахожу статью. В редакторе сообщений удаляю код и снова добавляю.

В валидаторе следующая ошибка

Открываю исходный код блога сочетанием клавиш Ctrl+U и ищу строку 666, которая указывает на ошибку в валидаторе.

Я снова иду своим путем исправления ошибок. Копирую код и вставляю в онлайн редактор HTML.

И что я вижу? Грустно, обидно, досадно, но ладно, из-за принципа эту ошибочку исправлять не буду до лучших времен.

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

Грубые нарушения исправлять желательно, а вот поиск от Яндекс я удалять не буду, да и код я не с пальца взяла, а на официальном сайте и поиск по блогу работает хорошо. Не верите-можете проверить!:-)

Если вы не можете исправить ошибки, а сделать это обязательно нужно советую обратиться к фрилансерам, услуга будет стоить от 100 до 300 руб. На исправление html кода самостоятельно уходит очень много времени.

Проверка валидности HTML кода сайта обязательно входит в мой . Но не нужно переоценивать значимость ошибок валидации на SEO продвижение — она очень мала. По любой тематике в ТОП будут сайты с большим количеством таких ошибок и прекрасно себе живут.

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

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

Проверяется валидация кода сайта с помощью онлайн сервиса W3C HTML Validator . Если есть ошибки, то сервис выдает вам список. Сейчас я разберу самые распространенные типы ошибок, которые я встречал на сайтах.

• Error: Duplicate ID min_value_62222

И за этой ошибкой такое предупреждение.

• Warning: The first occurrence of ID min_value_62222 was here

Это значит, что дублируется стилевой идентификатор ID, который по правилам валидности html должен быть уникальным. Вместо ID для повторяющихся объектов можно использовать CLASS.

Исправлять это желательно, но не очень критично. Если очень много таких ошибок, то лучше исправить.

Аналогично могут быть еще такие варианты:

• Error: Duplicate ID placeWorkTimes
• Error: Duplicate ID callbackCss-css
• Error: Duplicate ID Capa_1

Следующее очень распространенное предупреждение.

• Warning: The type attribute is unnecessary for JavaScript resources

Это очень частая ошибка при проверке валидации сайта. По правилам HTML5 атрибут type для тега script не нужен, это устаревший элемент.

Аналогично такое предупреждение для стилей:

• Warning: The type attribute for the style element is not needed and should be omitted

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

• Warning: Consider avoiding viewport values that prevent users from resizing documents

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

Я считаю это предупреждение очень нежелательным, для пользователя неудобно, это минус к поведенческим. Устраняется удалением этих элементов — maximum-scale=1.0 и user-scalable=no.

• Error: The itemprop attribute was specified, but the element is not a property of any item

Это микроразметка, атрибут itemprop должен находиться внутри элемента с itemscope. Я считаю эту ошибку не критичной и можно оставлять как есть.

• Warning: Documents should not use about:legacy-compat, except if generated by legacy systems that can’t output the standard doctype

Строка about:legacy-compat нужна только для html-генераторов. Здесь нужно просто сделать но ошибка совсем не критичная.

• Error: Stray end tag source

Если посмотреть в коде самого сайта и найти этот элемент, видно, что одиночный тег прописан как парный — это не верно.

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

• Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images

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

• Error: Element ol not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Здесь не верно прописана вложенность тегов. В

должны быть только
• . В данном примере эти элементы вообще не нужны.

  

  Аналогично могут быть еще такие ошибки:

  • Element h2 not allowed as child of element ul in this context.
  • Element a not allowed as child of element ul in this context.
  • Element noindex not allowed as child of element li in this context.
  • Element div not allowed as child of element ul in this context.

  Это все нужно исправлять.

  • Error: Attribute http-equiv not allowed on element meta at this point

  

  Атрибут http-equiv не предназначен для элемента meta, нужно убрать его или заменить.

  Аналогичные ошибки:

  • Error: Attribute n2-lightbox not allowed on element a at this point.
  • Error: Attribute asyncsrc not allowed on element script at this point.
  • Error: Attribute price not allowed on element option at this point.
  • Error: Attribute hashstring not allowed on element span at this point.

  Здесь также нужно или убрать атрибуты n2-lightbox, asyncsrc, price, hashstring или заменить их на другие варианты.

  • Error: Bad start tag in img in head

  Или вот так:

  • Error: Bad start tag in div in head

  

  Тегов img и div не должно быть в . Эту ошибку нужно исправлять.

  • Error: CSS: Parse Error

  

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

  Ну такая ошибка, мелочь, но не приятно) Смотрите сами, нужно убирать это или нет, на продвижение сайта никакой совершенно роли не окажет.

  • Warning: The charset attribute on the script element is obsolete

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

  • Error: Element script must not have attribute charset unless attribute src is also specified

  В этой ошибке нужно убрать из скрипта атрибут charset=»uft-8″, так как он показывает кодировку вне скрипта. Я считаю, эту ошибку нужно исправлять.

  • Warning: Empty heading

  

  Здесь пустой заголовок h1. Нужно удалить теги

  или поместить между ними заголовок. Ошибка критичная.
  • Error: End tag br

  

  Тег br одиночный, а сделан как будто закрывающий парный. Нужно убрать / из тега.

  • Error: Named character reference was not terminated by a semicolon. (Or & should have been escaped as &.)

  

  Это спецсимволы HTML, правильно нужно писать или ©. Лучше эту ошибку исправить.

  • Fatal Error: Cannot recover after last error. Any further errors will be ignored

  Это серьезная ошибка:

  

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

  • Error: CSS: right: only 0 can be a unit. You must put a unit after your number

  Нужно значение в px написать:

  

  Вот аналогичная ошибка:

  • Error: CSS: margin-top: only 0 can be a unit. You must put a unit after your number
  • Error: Unclosed element a

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

  На что влияет валидация

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

  2. Валидация также можно повлиять и на траст сайта для поисковых систем, а значит и на позиции сайта тоже. Однако говорить про то, что валидный html код является серьезным фактором ранжирования нельзя. Корректная верстка лишь один из многочисленных факторов, который рассматривается лишь в спорных моментах.

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

  ..

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

  Пример из жизни

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

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

  Спустя некоторое время, когда я проводил анализ трафика через Яндекс Метрику, я заметил, что среднее время посещения в браузере Internet Explorer сильно меньше. Открыв сайт через этот браузер, я понял в чем дело. Весь сайт был перекошен, читать контент было просто невозможно. И это создает сразу две проблемы. Первая проблема - я терял весь трафик из IE, а вторая - я портил поведенческие факторы .

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

  1. Онлайн валидатор html

  В интернете есть бесплатный сервис http://validator.w3.org/ . Через него проверяют валидность html кода. Рассмотрим работу этого сервиса более подробно