Почему лучше сначала изучить XHTML?
Уже почти два года на своих курсах я преподаю именно XHTML, причём 1.0 Strict. Почему?
На мой взгляд, нужно начинать обучение с языка разметки, который содержит правила, порой параноидального характера (как, например, disabled=”disabled”). Жёсткие правила вёрстки, как дисциплинируют процесс создания станицы, так и систематизируют сами правила, что способствует более удобному их изучению.
Итак, рассмотрим плюсы и минусы вёрстки XHTML 1.0 и сравним её с вёрсткой в HTML 4.01. Для начала вспомним, чем отличается XHTML от HTML:
- Общий вид XHTML документа должен состоять из:
- декларации типа документа (DOCTYPE);
- тэга <html>, который является корневым и уникальным;
- тэг <html> должен содержать атрибут xmlns с указанием URI адреса описания пространства имён XHTML;
- тэг <html> должен содержать только два элемента — <head> и <body>, причём, <body> пишется после <head>;
- тэг <head> должен содержать элемент <title> с заглавием документа.
Пример правильного XHTML документа:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Заглавие документа</title>
</head>
<body>
</body>
</html>
Примечание:
Иногда XHTML-документ может иметь декларацию XML перед декларацией DOCTYPE.
<?xml version="1.0" encoding="UTF-8"?>
Иногда элемент <html> может иметь атрибуты lang и xml:lang с указанием языка содержимого документа:
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> - Элементы должны быть с правильным вложением.
HTML допускает:
<b><i>Этот текст жирный и наклонный</b></i>
XHTML допускает только:
<b><i>Этот текст жирный и наклонный</i></b> - Элементы должны быть всегда закрыты.
HTML допускает:
<p>Первый абзац
<p>Второй абзац
XHTML допускает только:
<p>Первый абзац</p>
<p>Второй абзац</p> - Пустые элементы тоже должны быть закрыты.
HTML допускает:
Перенос строки<br>
Следующая строка, а после неё — горизонтальная линия<hr>
Ну, и конечно же, картинка <img src="image.gif" alt="Картинка">.
XHTML допускает только:
Перенос строки<br />
Следующая строка, а после неё — горизонтальная линия<hr />
Ну, и конечно же, картинка <img src="image.gif" alt="Картинка" />. - Элементы и атрибуты должны писаться строчными буквами.
HTML допускает:
<BODY>
<P CLASS="my_paragraph">Абзац на блоге seleckis.lv</P>
</BODY>
XHTML допускает только:
<body>
<p class="my_paragraph">Абзац на блоге seleckis.lv</p>
</body> - Значения атрибутов обязательно должны заключаться в кавычки.
HTML допускает:
<table width=100%>
XHTML допускает только:
<table width="100%"> - Атрибуты-флаги (сокращённые атрибуты с одним возможным значением) должны писаться как обыкновенные атрибуты.
HTML допускает:
<option selected>Выбранный элемент в выпадающем списке</option>
XHTML допускает только:
<option selected="selected">Выбранный элемент в выпадающем списке</option> - В элементах <a>, <frame>, <img> и <map> атрибут name заменён на id.
HTML допускает:
<img src="image.gif" alt="Картинка" name="pic1">
XHTML допускает только:
<img src="image.gif" alt="Картинка" id="pic1" /> - Атрибут lang должен дублироваться с префиксом xml:
<div lang="lv" xml:lang="lv">Esat sveicināti!</div>
Плюсы
- Все тэги закрыты. Не будет путаницы с парными и одинарными тэгами.
- Все тэги правильно вложены. Не будет путаницы с вложением — очевидный плюс.
Но он же и минус. В HTML можно было удобно вывернуться:
<b>Жирный текст <i> жирный и наклонный текст</b> только наклонный текст</i>.
В XHTML нужно писать строго, потому и чуть больше:
<b>Жирный текст <i> жирный и наклонный текст</i></b> <i>только наклонный текст</i>. - Отказ от name в пользу id считаю правильным, поскольку
- id короче,
- name имеет своё особое значение в формах
- Логично, что если значение атрибута содержит пробел, то оно должно писаться в кавычках. Но будет проще взять за правило и всегда писать значения атрибутов в кавычках, чтобы опять-таки не было путаницы когда их писать, а когда нет.
- Писать прописными буквами элементы, атрибуты и значения атрибутов, считаю таким же дурным тоном, как писать прописными буквами в чатах, на форумах и письмах, поэтому абсолютно солидарен с W3C по этому поводу.
Минусы
- Неудобный DOCTYPE. Я бы предпочёл параметры документа писать в элементе <html>, а адрес описания namespace объединить с адресом DOCTYPE. Да и адреса бы попроще сделать. Я бы предпочёл писать всё в тэге html и без всяких деклараций:
<html xmlns="http://w3.org/dtd/xhtml" type="text/xhtml-strict" version="1.0" lang="ru"> - Зачем дублировать атрибут lang с префиксом xml: — не понятно.
- Атрибуты checked, readonly, disabled, selected, multiple по сути возвращают значение true или false. Так, почему же так не писать? Например:
<option selected="true">Выбранный элемент выпадающего списка</option>
По-умолчанию, эти атрибуты имеют значение false, поэтому можно их не писать, если не нужно обратное.
Могу предложить другой вариант: придумать для этих значений отдельный атрибут, например — view или flag:
<input type="text" view="disabled" />
Если нужно написать два значения, пишем через пробел (как классы):
<input type="checkbox" view="checked disabled" />
К сожалению к моим «брызгам разума» никто из W3C не прислушается.
А какие плюсы и минусы вы находите в xhtml?
]]>FX Poster]]>Есть еще отличия. Например, в XHTML есть строгий порядок вложенности тегов. Например, в em не может быть p и div. Плюс это или минус мне сказать сложно. Для меня скорее минус, потому что иногда этот порядок вложенности не слишком очевиден.
Неудобный DOCTYPE
Правда, как скоро – вопрос сложный. (я про HTML 5, кто не понял).
Будет. Всё будет.
3-й минус – это уже придирки, ИМХО.
Кстати, Ник… Тут есть просьба написать пост о namespace’ах в XML/XHTML. А то я всё никак не въеду в их реальное предназначение.
»]]>Денис Радченко]]>До HTML5 еще ой как далеко, нужно будет ждать FF4, IE9, Opera … чтобы они все это поддерживали.
»Как-то пробовал верстать в XHTML, но браузеры читают документ все равно как HTML, решил не делать как проще – на HTML.
]]>deni2s]]>Ne vizhu povoda, chtobi ispoljzovatj chtoto drugoje, krome xHTML Strict. Vsjo mozhno vnjem sdelatj, chto nado – nagljadnij primer: http://www.hc.lv/ . Kstati pljus xHTML Strict esho v tom, chto raznije mobiljnije ustroistva (mobili, PDA) jego otobrazhajut bez problem. Nekotorije mobili toljko wap i xHTML Strict (esho i xHTML Mobile) otobrazhajut.
»]]>deni2s]]>Jedinstvennoje, chto mne nehvatajet v xHTML Strict, eto target=”_new” (obichno stavlju na vihodjashuje ssilki. Prihoditsa “obmanivatj” validaciju pri pomoshi javascript.
»]]>Zigzag]]>отвечку кратко своей ссылкой на свою старую заметку на эту тему =) http://webdev.lovata.com/2007/.....everybody/
»]]>Arina]]>Я начинала с простого html и чувствую себя прекрасно. Сколько людей чтолько и мнений, столько и способов
»]]>Никита]]>FX Poster, HTML 4.01 Strict тоже не допускает размещение строчных элементов напрямую в body и размещение блочных элементов в строчные. Есть разница, хранить кошелёк в сумке или сумку в кошельке?
Насчёт третьего минуса, ну согласись, что это глупость сродни тавтологии:
disabled="disabled"О namespace можно написать. Но попозже.
Денис Радченко, а ты переименуй расширение файла в «.xhtml», тогда увидишь как поведут себя браузеры. (IE не в счёт)
deni2s, ссылки на сайты должны открываться в новом окне/табе только по желанию самого пользователя. Не нужно решать за него.
Arina, с более строгого языка на более «демократичный» легче переходить.
Zigzag, читал. Это мнение в более глобальном смысле от лица разработчика. Я же о xhtml с точки зрения преподавания. Спасибо за ссылку. Многим, думаю, будет полезно почитать.
»]]>FX Poster]]>Да я вечно забываю, что в span’ах div’ы нельзя хранить
»]]>zigmat]]>Нахожу xhtml более рациональным решением… Почему? Мне так кажется… Что бы в следующий раз подкрепить своё высказывание доводами пошол к Никите закреплять и познавать.
Приветствую учитель. Хехехе.
»]]>Никита]]>zigmat, привет-привет! Только не пропускать и не опаздывать, тогда будет толк. ))
»]]>Haruka aka Seremel]]>Имхо, для true/false атрибутов это скорее на случай, если появится какое-либо ещё значение. Хотя логично было бы тогда использовать что-нибудь вроде default/none и т.п. В контексте disabled конечно было бы логичнее true/false.
А xml:lang потому что XHTML это всегда XML, а в нём уже есть xml:lang. Видимо, решили выбросить повторящиеся вещи.
»]]>Никита]]>Haruka aka Seremel, почему тогда «xml» не добавляется к другим атрибутам?
»]]>Haruka aka Seremel]]>Подразумевается, что в стандарте XML уже есть атрибут xml:lang. Т.е. дополнительный такой же атрибут в HTML не нужен. А xml: это namespace самого XML’а. Вроде бы он всегда объявлен, если не ошибаюсь, и атрибут принадлежит этому namespace’у.
»]]>Никита]]>> Т.е. дополнительный такой же атрибут в HTML не нужен.
»так зачем же его дублировать?
]]>Haruka aka Seremel]]>Так его и убирают, только не из XML’а, а из HTML’а. В XHTML 1.1 вроде бы и нет lang, только xml:lang. А в 1.0 есть только потому, что XHTML 1.0 это переформулировка HTML в XML. Совместимость…
»]]>Никита]]>Не логичное по-моему решение. Ну да ладно.
»]]>Dmitry Dulepov]]>Я предпочитаю transitional. Почти тоже самое? но болше свободы. Strict для практического использования слишком ограничен на мой взгляд.
»]]>Клевый сеошник]]>Думаю лучше просто html
»]]>Никита]]>Dmitry Dulepov, с помощью Strict можно всё сделать тоже самое что и Transitional, только через CSS. К сожалению большенство RTE создают невалидный код, поэтому никто толком на strict не переходит.
Клевый сеошник, почему?
»]]>Stac]]>Никита, не знал, что у тебя еще и курсы какие-то есть… отстаю от паровоза
Про учебный процесс: на какой стадии ты рассказываешь про менее строгий HTML? и про правила его обработки браузерами (типа игнорирования неизвестных тегов с сохранением их содержимого)?
»]]>Никита]]>Stac, я об этом говорю в общем смысле. Особо не акцентирую. Времени мало на это. Если бы мне дали 64 часа а не 32, то прошёлся бы по всем ньюансам. Но тогда, народ бы перестал думать, а тупо вторить. Это тоже плохо. В основном даю задания для эспериментов. Сами делают выводы.
»]]>турклубы москвы]]>Считаю, что за strict xhtml – будущее, т.к. движки, разбирающие html4 – слишком сложны.
»]]>Али]]>Спасибо за полезную статью,
»а то были непонятны теги типа .
Пишу на HTML.
]]>chosen]]>предпочитаю xHTML (Strict)
»так как с помощью этого можно разделить страницу на информацию (HTML) на оформление (CSS) и на действия (JavaScript)
по поводу target=”_blank” есть очень хорошая замена создать class=”target_blank” после загрузки страницы пройтись по тегам и у кого проставлен этот класс доопределить событие oncliсk
]]>Никита]]>chosen, по поводу target=”_blank” — не решайте за пользователя в каком окне открывать страницу.
»]]>SelenIT]]>Главный минус XHTML на практике — то, что он валидируется по одним правилам (XML), а браузерами (как минимум IE) разбирается по другим (HTML). Так что валидатор радостно пропустит пустой div в сокращенном “самозакрытом” варианте, а для браузеров это будет незакрытый тег, т.е. очевидная ошибка! Поэтому знание XHTML не избавляет от необходимости учить HTML, к сожалению.
Обратное преобразование гораздо проще: взять валидный и аккуратно оформленный HTML4.01, привести к нижнему регистру, закавычить атрибуты, проставить слеши в пустых тегах, добавить xmlns, заменить доктайп — и порядок, “к борьбе за XMLизацию всего веба готов!”
Кстати, перехлест тегов и вложение блоков в строчные эл-ты и P в HTML тоже запрещены, не надо возводить на него откровенную напраслину
.
»