Переходим на XHTML 1.1

#форматы

Я недавно ходил в одну контору устраиваться на работу и первый вопрос который я получил это "что такое DOCTYPE" и "расскажи про Strict, Transitional, Quirks". Само собой вопрос не совсем по моей специальности - я не верстальщик, но всё равно я любопытный. В год назад такая же история была со Skype - в итоге я тесно познакомился с Postgre. Так что не долго думая я решил блог по возможности привести к правильному XHTML 1.1, хотя продвигать или уж тем более требовать то же самое от своих коллег я не собираюсь - каждый сам решает уровень своей дисциплинированности.

XHTML приближен по к XML, парсер не должен гадать как то было в Transitional-mode правильно ли автор расставил порядок тэгов. Более того, это передний фронт развития стандарта, следующая фаза будет в версии 2.0. Параллельно с XHTML развивается HTML 5, но почему-то я ему не доверился, наверно интуиция. XHTML советуется объявлять при помощи MIME application/xhtml+xml, но IE как всегда тормозит и не понимает. Приведу некоторые стандартные ошибки, которые я заметил у себя в процессе стандартизации.

Незакрытые тэги, < и &

Я давно уже привык закрывать
, но многие input и img на автомате остались без моего внимания. До этого я часто замечал в чужом коде что внутри ссылок параметры разделяются не просто символом &, а кодом амперсанда &. Как оказалось то же обстоит и с символами тэгов. Все параметры тэгов так-же обязаны быть помещены в кавычки. Очевидно это нужно что-бы ускорить работу парсера. Хотя помоему это чуть излишне.

Всё есть object

Embed это нестандартный тэг часто используемый для вставки видео с youtube (а я советую vimeo), который по всей видимости начал использоватся как совместимость с перекупленным у Netscape движком IE для внедрения объектов внутрь страницы. Он уже отжил своё и его использование в XHTML невозможно. Советы от Elisabeth Castro, Bernie Zimmerman подтверждают это и советуют использовать нечто подобное:

<object type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/7_6B6vwE83U"> <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" /> </object>

Но проблема в том, что даже если использовать версию без embed, то по крайней мере у моей версии tinymce-редактора (а она без wordpress и без плагина) возникает проблема редактирования и повторного открытия - объект начинает играть сразу в редакторе. Благо при переходе на tinymce 3 объект остаётся спрятанным в коде.

Iframe тоже оказывается пережитком прошлого, его как и svg надо использовать через object-тэг.

CDATA в inline script и style

Character Data активно используется в XML что-бы представить символьные данные, на которые не должны накладываться законы формирования документа - знаки обозначения тэгов и амперсандов. В XHTML использовать такая открывающая и закрывающая строка просто необходима для обозначения CSS и Javascript, иначе всякое упоминание & и < будет считаться параметрами или тэгами.

//<![CDATA[ alert "Для javascript добавляются ещё знаки комментирования" //]]>

Обязательные и не существующие элементы

Не существующие тэги и параметры

  • img.border

  • img.align

  • ol.start

  • a.name раньше использовался для навигации по якорям в ссылках (добавляется символ решётки, например #top), теперь заменен на использование параметра id.

  • center

И наоборот, некоторые параметры и вложенные тэги стали строго обязательными

  • ul li - раньше я просто оставлял пустой список, если он заполняется ajax'ом, теперь надо прятать и добавлять пустой li-элемент

  • head title

  • textarea.cols

  • img.alt - приучает развивать фантазию на случай если картинки отключены или грузятся. Глядишь - и print-версию css напишешь.

Для тестирования я использовал как валидатор W3C, так и плагинами для браузеров.