Главная CSS-верстка

Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, <noindex>, CSS

Я являюсь сторонником веб-стандартов, но, к сожалению, по тем или иным причинам не всегда их соблюдаю (кстати сказать, когда я верстал таблицами, то о стандартах и понятия не имел :). Как вы наверняка уже знаете, в настоящее время в Рунете проходит конкурс сайтов WebHiTech, целью которого является распространение современных веб-стандартов в русскоязычном сегменте сети.

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

Хочется отметить, что, как правило, имеет место следующая ситуация. Если «чистая» верстка (аля PSD → HTML) проходит xHTML-валидацию без вопросов, то после «натяжки» на движок (для примера, тот же WordPress), появляется множество различных недочетов, которые делаю страницы сайта невалидными.

А «портят» наши страницы в основном следующие 4 вещи:

  1. JavaScript.
  2. Глобальные CSS, размещаемые в заголовке документа.
  3. Flash.
  4. Несуществующий по стандартам тег <noindex>, придуманный Яндексом.

Отказаться от каждого из этих пунктов часто не представляется возможным, но, благо, существуют обходные пути, которые позволяют привести эти 4 элемента к виду, соответствующему стандартам.

Об этом и хочу поведать ниже.

JavaScript

Во-первых, тег, обозначающий JavaScript, часто имеет следующий вид:

<script>
код скрипта
</script>

А должно быть так:

<script type="text/javascript">
код скрипта
</script>

Во-вторых, чтобы скрипт окончательно прошел валидацию, необходимо использовать следующие специальные комментарии:

<script type="text/javascript">
<!--//<![CDATA[
код скрипта
//]]>-->
</script>

Глобальные CSS

Здесь все по аналогии с предыдущим пунктом:

<style type="text/css">
/* <![CDATA[ */
.style {margin: 0; padding: 0}
/* ]]> */
</style>

Flash

Решение для флеша я нашел у Максима Покровского, за что говорю ему: «Спасибо!».

<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.

Оформить этот тег необходимо следующим образом:

<del class="hide"><![CDATA[<noindex>]]></del>
то, что необходимо запретить индексировать Яндексу
<del class="hide"><![CDATA[</noindex>]]></del>

А в файл стилей добавить:

.hide {display: none}

P.S. В результате применения вышеизложенного материала я избавился от 300 с лишним ошибок валидации и теперь мой блога соответствует стандарту xHTML 1.0 Transitional. Не исключено, что некоторые страницы блога все-таки не пройдут валидацию, но это уже результат действия какого-либо из плагинов.

Комментарии (33)

  1. Хотя и не пользуюсь noindex, но за подсказку спасибо.

  2. спасибо, теперь буду знать как проавильно оформить свой код

  3. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="x" height="x">
    	<param name="movie" value="file.swf" />
    	<!--[if !IE]>-->
    	<object type="application/x-shockwave-flash" data="file.swf" width="x" height="x">
    	<!--<![endif]-->
    		alt content
    	<!--[if !IE]>-->
    	</object>
    	<!--<![endif]-->
    </object>
    

    для флэша валидно и кросбраузерно

  4. Да — согласен, сначала проверяешь пустой сайт = есть валидация.
    Потом стоит добавить счетчик или банер = сразу проблемы появляются.

  5. Поразительно! Неужели у кого-то бывают проблемы с валидацией из-за стилей в head? Мне приходит в голову только один возможный случай: если применяются expressions. Зато валидатор ругается на скрипт, в котором применяется нечто вроде document. write ('…'). Поэтому для вставки элементов скриптом я предпочитаю createElement.

  6. Мега респект. Люди! Я даже о таком не слышал. Спасибо! Полез у себя в блоге исправлять такие ошибки.

  7. Спасибо за статейку.
    Меня тоже мучает вопрос насчёт, и статейку NickSpring тоже читал, но вроде, там в комментариях было выяснено, что после этих манипуляций появляются проблемы с работой.

  8. Решение по noindex кривое. Валидация невалидными средствами. М.б. лучше посмотреть в сторону расширения XHTML за счет dtd?

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

    а 451 ошибка на этой странице и одинадцать предупреждений — это как?