Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, <noindex>, CSS
Я являюсь сторонником веб-стандартов, но, к сожалению, по тем или иным причинам не всегда их соблюдаю (кстати сказать, когда я верстал таблицами, то о стандартах и понятия не имел :). Как вы наверняка уже знаете, в настоящее время в Рунете проходит конкурс сайтов WebHiTech, целью которого является распространение современных веб-стандартов в русскоязычном сегменте сети.
В общем-то, у меня было желание подать заявку, но по определенным требованиям блог не подходит для участия. Тем не менее, само существование данного конкурса явилось очень хорошим стимулом для того, чтобы я, наконец, привел код моего блога в соответствие со стандартом xHTML. И я этому, безусловно, очень рад.
Хочется отметить, что, как правило, имеет место следующая ситуация. Если “чистая” верстка (аля PSD → HTML) проходит xHTML-валидацию без вопросов, то после “натяжки” на движок (для примера, тот же WordPress), появляется множество различных недочетов, которые делаю страницы сайта невалидными.
А “портят” наши страницы в основном следующие 4 вещи:
- JavaScript.
- Глобальные CSS, размещаемые в заголовке документа.
- Flash.
- Несуществующий по стандартам тег <noindex>, придуманный Яндексом.
Отказаться от каждого из этих пунктов часто не представляется возможным, но, благо, существуют обходные пути, которые позволяют привести эти 4 элемента к виду, соответствующему стандартам.
Об этом и хочу поведать ниже.
JavaScript
Во-первых, тег, обозначающий JavaScript, часто имеет следующий вид:
1 2 3 | <script> код скрипта </script> |
А должно быть так:
1 2 3 | <script type="text/javascript"> код скрипта </script> |
Во-вторых, чтобы скрипт окончательно прошел валидацию, необходимо использовать следующие специальные комментарии:
1 2 3 4 5 | <script type="text/javascript"> <!--//<![CDATA[ код скрипта //]]>--> </script> |
Глобальные CSS
Здесь все по аналогии с предыдущим пунктом:
1 2 3 4 5 | <style type="text/css"> /* <![CDATA[ */ .style {margin: 0; padding: 0} /* ]]> */ </style> |
Flash
Решение для флеша я нашел у Максима Покровского, за что говорю ему: “Спасибо!”.
1 2 3 4 5 | <object type="application/x-shockwave-flash" data="flash.swf" width="468" height="60"> <param name="flashvars" value="link=http://site.com/" /> <param name="movie" value="flash.swf" /> <param name="quality" value="high" /> </object> |
Данный код не позволяет автоматически устанавливать флеш-плейер, но ведь нам важнее валидность, не правда ли?
Тег <noindex>
За решение этой задачи “Большое спасибо!” отправляется к NickSpring.
Оформить этот тег необходимо следующим образом:
1 2 3 | <del class="hide"><![CDATA[<noindex>]]></del> то, что необходимо запретить индексировать Яндексу <del class="hide"><![CDATA[</noindex>]]></del> |
А в файл стилей добавить:
1 | .hide {display: none} |
P.S. В результате применения вышеизложенного материала я избавился от 300 с лишним ошибок валидации и теперь мой блога соответствует стандарту xHTML 1.0 Transitional. Не исключено, что некоторые страницы блога все-таки не пройдут валидацию, но это уже результат действия какого-либо из плагинов.
а 451 ошибка на этой странице и одинадцать предупреждений - это как?
Посмотрите, когда была написана эта статья, и какое сегодня число. За это время много чего изменилось.
согласна.. )
спасибо за блог, радует. а у вас есть подписка в твиттере, не люблю в rss читать
Есть - http://twitter.com/Dimox_ru
отлично, подписываюсь )