Статьи / Веб-Дизайн / Валидность HTML

  2008-11-03 17:13

Может я не прав и то, о чем буду говорить, не имеет большого значения, но меня все же удивляет, почему мало кто придерживается стандарта HTML. Прошелся по нескольким очень известным порталам с целью проверки корректности HTML кода: ни один сайт не является валидным. Да, я знаю о том, что все ведущие производители браузеров стремятся добавить чего-то своего, отступая от стандарта, чтобы сделанные под их браузеры документы корректно смотрелись только в их продукте. Но самое интересное, что по большей части сайты не валидные не потому, что они используют какие то особенности браузеров, а просто не соблюдают стандартов. Более того, все делается так, чтобы корректно отображалось везде. Спрашивается: разве сложно в таком случае добиться правильности?

Оказывается, все достаточно просто. Как выяснилось при тестировании сайтов сервисом http://validator.w3.org/, большая часть ошибок это атрибуты тегов, отсутствующих в стандарте, а также не хватка атрибутов тегов. Ситуации, когда есть недостающие теги, тоже присутствуют, но их гораздо меньше. И чаще всего они возникают из-за лени дизайнера, а не потому, что кто-то не знал, что их нужно закрывать (логика лентяя: зачем ставить </p>, если следующий тег <p> закроет предыдущий автоматически). Та же лень заставляет оставлять значения атрибутов без кавычек, хотя по стандарту они должны быть практически везде.
Рассмотрим пример. Нам нужна прямоугольная область высотой 30 точек. Мы по привычке пишем:

<div height="30"> текст </div>

На самом деле это не правильно. У тега div нет атрибута height, хотя как оказалось, все браузеры его поддерживают. Как же быть, если нужна именно такая высота? Нет ничего проще. Нужно указать высоту в стиле:

<div style="height: 30px"> текст </div>

Отсутствие тега чаще всего возникает на тегах img и script. Согласно стандарту, атрибут alt для тега img является обязательным и даже если к изображению не нужна никакая надпись, его все равно нужно указать, как пустую строку. Мне попадался форум, сделанный на форумном движке. Человек просто установил его и изменил пару картинок. Движок был написан грамотно в плане валидности и две неправильные картинки просто "уронили" всю правильность.

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

<font size="2">
<p>параграф 1</p>
<p>параграф 2</p>
</font>

Здесь мы пытаемся блочный тег p, вложить в тег font, который можно применить только к строке. Выход прост. Нужно опять же определить контейнер, внутри которого установлен заданный шрифт:

<div style="font-size: 10pt;">
<p>параграф 1</p>
<p>параграф 2</p>
</div>

Если все же Вы решили сделать свой сайт "правильным", следует учесть, что в сайт могут включаться сторонние куски кода, которые не удовлетворяют стандартам. Чаще всего это всевозможные счетчики. Каждый счетчик желательно проверить, и если он не в стандарте, то попытаться самому откорректировать его. Это не всегда является возможным. По этой причине я, например, отказался от счетчика SpyLog. А вот у top.mail.ru счетчик правильный. В случае с денежкой Яндекса, я просто убрал ссылку, оставив только картинку.

И еще. Обзаведитесь для проверки Оперой. В ней по правой кнопке можно запустить валидатор, не занимаясь нудным копированием и вставкой.