В последнее время я получила несколько вопросов от пользователей, касающихся валидности моих тем и валидации вообще. В этом посте хочу ответить на них.
Что такое валидность?
Считается, что валидность кода — это единая, универсальная характеристика любого кода.
На самом деле, валидность это соответствие html кода документа определенному своду правил, указанному в доктайпе или подразумеваемому в HTML5.
То есть, валидность — понятие относительное, поскольку правила бывают разные, и требования у них тоже.
Чтобы было понятнее, приведу пример, который я нашла на сайте css-live.ru:
К строительству жилых домов и атомных электростанций применяются разные СНиПы (строительные нормы и правила), поэтому документ, валидный по одному своду правил, может быть не валидным по другому (хороша была бы АЭС, построенная по нормативам жилого дома!).
Доктайп обычно указывает на документ, по которому планируется валидация html, но может быть выбран из прагматических соображений для выбора оптимального режима браузеров.
XHTML5 может вообще не иметь доктайпа, но быть валидным.
Валидация - что это?
Простыми словами, валидация - это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).
Как проверяется валидность?
Валидность HTML кода проверяется инструментом, который называется валидатором.
Самый известный валидатор w3c - https://www.w3.org.
Валидатор w3c производит несколько проверок кода.
Главные из них:
- Проверка на наличие синтаксических ошибок:
Пример c habrahabr.ru/post/101985:
<foo bar="baz"> является корректным синтаксисом, несмотря на то, что <foo> является недопустимым HTML-тэгом
Так что проверка синтаксиса является минимально полезной для написания хорошего HTML-кода. - Проверка вложенности тэгов:
В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги. - Валидация html согласно DTD:
Проверка того, насколько код соответствует указанному DTD - Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа). - Проверка на наличие посторонних элементов:
Она обнаружит все, что есть в коде, но отсутствует в доктайпе.
Например, пользовательские тэги и атрибуты.
Для проверки валидности 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, как к истине в последней инстанции ошибочно. В обязательном порядке нужно исправлять только те ОВ, которые:
- мешают браузеру корректно отобразить страницу (незакрытые и неправильно вложенные теги).
- замедляют загрузку страницы (неправильно подключенные скрипты).
- можно исправить, не нарушая работоспособность темы.
Надеюсь, я ответила на все вопросы о валидации.
10 советов по оптимизации кода вашей Wordpress-темы для лучшей индексации сайта
Как ускорить работу сайта: влияние кода шаблона на скорость загрузки страниц
Пока будет разнообразие браузеров и их руководства к управлению валидностью, всегда будут проблемы с валидацией, это понятно.
Да уж под всех не подстроишься.
Если машина отлично едет, не стоит лезть в мотор 🙂
Так же и с сайтом, если все работает и отображается без сбоев, то и не стоит копья ломать, а уж если проблема, тогда надо искать по всем "фронтам"!
Я не согласен на счет машины, сегодня деактивировал плагин WP-PageNavi, так мне аж 65 ошибок выскочила, почему?
Ошибки есть и с ними нужно бороться...
Сегодня проверила свой сайт на валидность и нашлось много ошибок и предупреждений. Еще не знаю, что со всем этим делать. Вы немного приоткрыли эту завесу неизвестности.
Проверил свой блог на WordPress на валидность, и ужасно 106 ошибок и 50 замечаний. И что с этим делать. Зачем в этом копаться, если сайт работает корректно?
Влияет ли это на индексацию страниц?
Зависит от того, какие именно ошибки.
Здравствуйте, Ксана.
Классный сайт. Я тоже стараюсь писать так-же - детально, просто и доступно.
У меня к Вам предложение, как к специалисту. У меня на сайте есть ошибки кода.
Сам влезать боюсь. Могли-бы Вы взяться за исправление, и если да, то сколько это будет стоить.
С уважением
Валентин
К сожалению я не работаю с чужими темами.
По поводу невозможности правки скриптов, подгружаемых с сторонних сайтов:
Скрипты спокойно скачиваются с адреса, по которому его подключаете в своем документе. Далее просто его размещаете в каталоге js например, и в строке подключения скрипта указываете уже путь к себе на сайт. Я к примеру всегда скачиваю скрипты на сайт, мало ли чего, завтра может там этого скрипта не будет уже, и дизайн вашего сайта посыпется к чертям.
Скрипты, которые загружаются с других сайтов, как правило, добавляют на сайт виджеты, кнопки социальных сетей или рекламу.
Они периодически обновляются разработчиком.
И, если вы будет держать такой скрипт на своем хостинге, вам придется все время следить за его работоспособностью и периодически повторять, описанную вами процедуру, т.е. скачивать и исправлять кривой код в нем.
Иначе, ваши кнопки, виджеты или реклама перестанет работать.
А это лишний гемор и поэтому смысла в этом нет.
Здравствуйте!
В первый раз попала на Ваш сайт. Рассматриваю вопрос о замене темы на моём кулинарном сайте: Kuxarocka.ru. Но не хочется чтобы новая тема сильно много, отличалась от настоящей. Хотелось бы чтобы Вы покритиковали тему сайта, и жду от Вас предложений по вопросу темы и замены.
Спасибо!
Напишите мне через форму для контактов.
Не смотря на то, что статья написана давно, очень актуальна и по сей день. Спасибочки огромное, а то вылезают ошибки валидации, а при половине исправлений,что-то нарушается,что-то слетает.Теперь буду знать,что не на все надо обращать внимание. Прямо 5+ за статью!
Здравствуйте, помогите пожалуйста разобраться с валидацией. Делаю дочернюю тему Twenty Twelve WordPress, но она по мнению WC3 валидатора не валидная из-за HTML 5 Doktype
Да и почти все свежие темы невалидные. Как можно исправить?
Взять и исправить :).
Точнее, к сожалению, подсказать не могу - я же не знаю, что именно в вашей теме не валидно.
Здравствуйте!
Ни как не могу найти файлы с ошибками валидации. Система Амиро.
Помогите, пожалуйста!
Игорь.
Я не работаю с чужими шаблонами, извините.
мне нужна помощь в исправлении ошибки Валидаторы html
сайт http://www.gruz-rm.ru кто может помочь?
Я могу помочь.
Напишите мне через форму для контактов.
Недавно создал сайт, установил тему PopularFX Conceptial (вот на неё ссылка https://demos.popularfx.com/Conceptial/), это одна из часто рекомендуемых тем и вроде как SEOfriendly, но проверка на валидаторе выявила более 600 ошибок и предупреждений, кроме того, отсутствуют теги h1 ... h6. В браузере всё отображается корректно, но как к этому отнесутся поисковики???