Валидация сайта и ее влияние на работоспособность ресурса

Если вы не знали, то между обычным строительством и «возведением» сайтов есть много общего. В процессе создания дома и интернет ресурса нужно соблюдать правильные пропорции между основными частями.

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

Валидация сайта

Валидация в сайтостроении

Теперь все вышесказанное «натянем» на принципы построения современного интернета. Но в виртуальном пространстве, как и в королевстве кривых зеркал все не так однозначно. И значения обоих терминов (валидации и верификации) просто слились воедино:

Валидация в сайтостроении

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

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

W3C

Именно опираясь на его стандарты, чаще всего, определяется валидность ресурса или отдельного кода независимо от языка или технологии, которые использовались для написания.

Установленные консорциумом W3C стандарты являются авторитетными для всех языков программирования и технологий, применяемых для создания сайтов. А также для HTML, XML и CSS.

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

Наиболее авторитетным онлайн-вадидатором является ресурс validator.w3.org:

онлайн-вадидатор

Валидный HTML

Казалось бы, все просто! Для валидации любого сайта нужно лишь пропустить его код через валидатор, исправить ошибки и все. Но не все так просто в виртуальном пространстве. Бывает, что даже самый валидный сайт не будет корректно отображаться в одном из браузеров.

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

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

Но это не является основной причиной того, от чего страдает валидация html:

  • Не закрытый тег – большая часть тегов в html являются парными, то есть состоящими из открывающего и закрывающего элемента. Часто при верстке или написании скрипта веб-мастера забывают дописывать закрывающий тег. А это может привести к неправильному отображению всего сайта;
  • Нарушение вложенности элементов – эта проблема возникает при блочной верстке, когда не соблюдается иерархическая вложенность всех блоков <div>. Или других парных элементов, если часть тега открыта в одном слое, а закрывается в другом. При этом возможно нарушение структуры дизайна сайта;
  • Использование атрибута style – в современном сайтостроении общепринятой нормой является использование для оформления элементов дизайна каскадных таблиц стилей (CSS). Устаревший атрибут style употребляется крайне редко: при его использовании объемы html кода могут увеличиваться в разы. Это не только замедляет скорость загрузки всего сайта, но и затрудняет его понимание и последующее редактирование;
  • Использование вложенного CSS – внедрение каскадных таблиц стилей внутрь html. Это также увеличивает объем кода и затрудняет его отладку. Лучше всего стилевые описания хранить в отдельных файлах:
страдает валидация

Проблема валидности CSS

Большая часть проблем с кроссбраузерностью возникает именно из-за ошибок отображения оформления элементов, заданного с помощью CSS.

Точнее, чтобы решить проблему корректного вывода дизайна сайта во всех браузерах, верстальщику приходиться применять не совсем «валидные» (по мнению W3C) средства:

  • Комментарии – когда в комментариях (чаще всего для IE) прописывается альтернативное значение свойства, не видимое для других браузеров;
  • Хаки – под ними подразумеваются специальные свойства CSS, позволяющие решить проблему некорректного отображения в одном из браузеров:
Проблема валидности CSS
  • С помощью JavaScript – изменение стилевого свойства элемента через объектную модель документа.

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

Валидность CSS не является гарантом работоспособности ресурса.

Валидность XML

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

  • Не забывать о необходимости обязательного наличия корневого элемента;
  • Не забывать закрывать тег;
  • Помнить о том, что XML является зависимым от регистра языком;
  • Помнить о необходимости соблюдать иерархию вложенности элементов;
  • Значение каждого атрибута указывается в закрывающихся кавычках.

Часто встречающиеся ошибки валидации

  • Unknown entity…

Чаще всего такое сообщение валидатор выдает при использовании знака амперсанда (&) в той части адресной строки, через которую передаются переменные и их значения. Для недопущения и исправления данной ошибки вместо & следует использовать &amp. Пример:

<a href="index1.php?pid=1&id=5">...</a> - неправильно.
<a href="index1.php?pid=1&amp =5">...</a> - правильно.
  • Missing tag

Такое сообщение выдается, если нарушена иерархическая вложенность тегов. Пример:

<p><b>Lorem</p></b> - неправильно.
<p><b>Lorem</b></p> - правильно.
  • Missing DOCTYPE

Чаще всего валидатор выдает это сообщение, если содержимое элемента <!DOCTYPE> и сам элемент записаны в нижнем регистре. Необходимо помнить, что данный элемент является зависимым от регистра тегом. Пример:

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" > - неправильно.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > - правильно.
  • There is no such element…

Данная ошибка возникает, если один или несколько тегов записаны в верхнем регистре. Пример:

<P><B>Lorem</B></P> - неправильно.
<p><b>Lorem</b></p> - правильно.
  • Missing closing tag

Эта ошибка валидации возникает, если один из «пустых» тегов в своей закрывающей части не содержит слеш (в XHTML). К пустым относится тег <img>. Пример:

<img src="images/girl.png"  width="189" height="255" alt="lorem"> - неправильно.
<img src="images/girl.png"  width="189" height="255" alt="lorem"/> - правильно.
  • required attribute «alt» not specified

Подобное сообщение выдается валидатором, если тег не содержит в себе атрибут alt, устанавливающий для изображения альтернативный текст. Пример:

<img src="images/girl.png" > - неправильно.
<img src="images/girl.png" alt="lorem"> - правильно.
  • Missing » «

Данная ошибка возникает, если значения одного или нескольких атрибутов записаны не в кавычках. Пример:

<img src=images/girl.png width=189 height=255 alt=lorem> - неправильно.
<img src="images/girl.png"  width="189" height="255" alt="lorem"/> - правильно.

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