XHTML-валидация для чайника

Date February 10th, 2010 Author Vitaly Agapov

"Добродетель опровергается, если спрашивать, «зачем?»…"
— Фридрих Ницше

uncle-samПолезность стандартизации всегда была весьма очевидной, а о её необходимости в Web-девелопменте уже как-то и говорить не приходится. И что уж тут обсуждать —  веб-стандарты вышли из тени и распространяются огромными темпами. Особенно это удивительно, если вспомнить, что в первой половине первого десятилетия о стандартах мало кто думал, и всё кодилось и версталось как бог на душу положит. А бог на душу клал изумительно. Но это камень всё-таки не в сторону web-девелоперов, а в сторону производителей браузеров, потому как всё разношёрстные костыли и прочие ухищрения были направлены в первую очередь на попытки заставить сайты работать адекватно и в IE, и в Netscape и в прочих Мозиллах с Операми.
Сейчас же интернет-сообщество, пинаемое всякими консорциумами, чьи названия всуе произносить не будем, движется в сторону веб-стандартизации. Стандарты, само собой, разные: XHTML1.1, XHTML1.0 Transitional, XHTML1.0 Strict, HTML4.01, HTML5.0 и т.д. В общем, на любой вкус.
Для облегчения участи кодеров и верстальщиков с подачи всё тех же консорциумов появились Валидаторы разметки (Markup Validators) для проверки сайтов на наличие ошибок и соответствие стандартам. Один из них можно найти по адресу http://validator.w3.org.

Посмотрим, какие ошибки у меня на сайтах, заявленных в DTD как XHTML1.1, могут найти валидаторы и как с ними справиться.

Надо осознавать, что ошибки могут сильно разниться в зависимости от версии XHTML, прописанной в DOCTYPE страницы. Так, например, версия XHTML1.1 является более жёсткой относительно версии XHTML1.0 Transitional, и вероятно её валидация выдаст больше ошибок.

Ошибки синтаксиса

Браузеры достаточно снисходительно относятся к синтаксическим ошибкам и часто всё равно нормально отображают страницу даже при их наличии. Но от валидаторского ока не так легко скрыться:

reference not terminated by REFC delimiter

Ну, это легко. Все служебные символы вроде неразрывного пробела   следует завершать символом ";". Fixed.

end tag for "img" omitted, but OMITTAG NO was specified

В нотации XHTML все тэги должны иметь закрывающую пару. В крайнем случае вставляем "/" перед закрывающей угловой скобкой: <br/>, <img … />.

Attribute "onClick" is not a valid attribute. Did you mean "onclick"?

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

CSS и JavaScript в документе

required attribute "type" not specified

Здесь надо запомнить две вещи: указывать параметр type тэгов <script> и <style> и вставлять комментарии CDATA, указывающий парсеру, что внутри находятся символные данные вместо разметки. Например:

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

	<p><style type="text/css">
		//<![CDATA[
		таблица стилей
		//]]>
		</style>

В принципе, CDATA необходим только если внутри попадаются символы <, > или &. Но хуже от его наличия всё равно не будет.

document type does not allow element "style" here

Это ошибка, которая меня лично очень расстраивает. Она обычно возникает, если обнаруживается тэг <style> внутри тэгов <body>. Предполагается, что все стили должны в документе прописываться только в заголовке страницы (в тэгах <head>). А это немного уменьшает гибкость. В целом рецепт прост: не извращаться, и таблицы стилей выносить в css-файлы.

Ошибки атрибутов

Attribute "<название атрибута>" is not a valid attribute

Ошибка возникает при появлении каких-то не предполагаемых в XHTML атрибутов, например, autocomplete или placeholder. Если сильно хочется, то можно добиться валидности этих атрибутов, прописав в DOCTYPE тип документа HTML5, либо расширив DTD:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
	<!ATTLIST input autocomplete CDATA #IMPLIED>
	]>

Есть способ и менее брутфорсный, которым я и пользуюсь. Он заключается в следующем:

	<input name="login"/>
	<script type="text/javascript">
	//<![CDATA[
	$(document).ready(function(){
	$(".noautocomplete").attr("autocomplete","off");
	});
	//]]>
	</script>

Смысл его в том, что во всех инпутах, где надо отключить надоедливое автозаполнение, мы добавляем класс noautocomplete. А потом с помощью JS добавляем всем элементам с этим классом атрибут autocomplete со значением 'off'. Вуаля. Если не использовать jQuery, то эту функциональность можно реализовать методами setProperty или setAttribute (для IE).

Attribute "<название атрибута>" exists, but can not be used for this element.

Это как раз та ошибка, которая не возникнет, если документ в DTD заявлен как XHTML1.0 Transitional. Обычно она касается таких атрибутов, как lang в тэге <html>, language в тэге <script>, атрибутов border, width и height… Всё это решается просто: lang заменяем на xml:lang, language из скрипта убираем (атрибута type будет достаточно), атрибуты размера и расположения выносим в атрибут style или в таблицу стилей.

required attribute "alt" not specified

Стандарт подразумевает обязательное наличие атрибута alt в тэге <img>. Именно это значение выводится в странице, если соответствующее изображение не загрузилось или у пользователя в браузере отключена загрузка картинок. Поправляется легко, но муторно. Ничего не поделаешь.

Прочие непонятки

document type does not allow element "input" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag

Вообще эта ошибка обычно указывает на то, что данный объект не может находиться внутри того объекта, в котором он находится. Так, например, блочные элементы не могут находиться внутри inline элементов. В моём же случае получилось так, что элемент <input> не может находиться прямо в элементе <form> без какой-либо обёртки вроде <div>. И валидной форма является только если в ней все элементы обёрнуты перечисленными тэгами.

А это значит, что код вида

	<form>
	<input name="q"/>
	</form>

Надо приводить к виду:

	<form>
	<div><input name="q"/></div>
	</form>

Заключение

Итак… час работы и заветный баннер XHTML1.1 Valid появляется у меня на экране. Опровергнется ли эта добродетель, если спросить «зачем?»…

Ссылки:

http://validator.w3.org
http://www.w3schools.com

Tags:
Category: Apache, Web-dev | 5 Comments »

Comments

5 комментариев на “XHTML-валидация для чайника”

  1. Programax Team
    17 January 2011 - 13:58

    Спасибо, выручили!

  2. Spx
    20 January 2011 - 2:25

    Баннер смогут оценить только товарищи по цеху, это своеобразное “Смотри какой я крутой!”=)

  3. -=MiF=-
    20 March 2013 - 11:07

    Пункт: Прочие непонятки
    Первое предложение: Вообще эта ошибка обычно Оуказывает

    опечатка в слове указывает

  4. Vitaly Agapov
    20 March 2013 - 13:38

    Благодарю, добрый сэр! Исправил опечатку.

  5. web development company
    26 May 2021 - 20:35

    thanks for sharing this info

Leave a comment

 Comment Form