MegaWeb.su Главная > XHTML > XHTML основы Основное различие между HTML и XHTML

XHTML основы Основное различие между HTML и XHTML

17-02-2011, 16:08. Разместил: Admin

Информация о языке разметки — XHTML, его преимущества, отличия от HTML, версии и валидация XHTML-документов... Или о том, как сделать сайт, который будет правильно отображаться во всех браузерах...

XHTML (англ. Extensible Hypertext Markup Language — расширяемый язык разметки гипертекста) — язык разметки веб-страниц, по возможностям сопоставимый с HTML, однако является подмножеством XML. Как и HTML, XHTML соответствует спецификации SGML(англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки; произносится [эс-джи-эм-эл]) — метаязык, на котором можно определять язык разметки для документов.). Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 31 мая 2001 года.
Преимущества XHTML:

Для XHTML можно применять множество технологий разработанных для XML. Например, XSLT(часть спецификации XSL, задающая язык преобразований XML-документов. Спецификация XSLT является рекомендацией W3C.) и XPath(язык запросов к элементам XML-документа. Разработан для организации доступа к частям документа XML в файлах трансформации XSLT и является стандартом консорциума W3C.).

Анализ XHTML проще и быстрее, чем HTML. Поскольку синтаксис XML строже, чем SGML, обработка XHTML возможна даже на мобильных телефонах с малыми ресурсами.

Отличия XHTML от HTML

Основное различие между HTML и XHTML состоит в том, что в XHTML применяется синтаксис XML, который предназначен для помощи в разработке синтаксически корректных и правильных документов XML. XHTML представляет собой словарь XML, в то время как HTML — это лишь предшествующий XHTML язык разметки.

В связи с тем, что XHTML является приложением XML, некоторые действия. которые совершенно правильны в HTML4 на базе SGML, должны быть изменены. Перечислим правила, которые необходимо соблюдать при переходе от HTML к XHTML:
1. Документы должны быть правильно сформированы.

Это означает, что все элементы обязаны иметь закрывающий тег(например, <p></p>) или быть написаны в специальной форме(например, <br />), а также должна соблюдаться корректная вложенность элементов.

Хотя перекрывание элементов не допускалось и в SGML, некоторые браузеры лояльно к этому относились и в большинстве случаев отображали именно то, что хотел показать автор документа.

ПРАВИЛЬНО: вложенные элементы

<p>выделяем это <em>слово</em></p>

НЕПРАВИЛЬНО: элементы перекрываются

<p>выделяем это <em>слово.</p></em>

2. Имена элементов и атрибутов должны быть в нижнем регистре.

Документы XHTML должны использовать нижний регистр для всех имен элементов и атрибутов HTML. Это необходимо, поскольку XML чувствителен к регистру, например, <ul> и <UL> это различные теги.

3. Правила написания значений атрибутов.

Все значения атрибутов, даже цифровые должны быть заключены в двойные("") или одинарные('') кавычки.

ПРАВИЛЬНО: атрибут в кавычках

НЕПРАВИЛЬНО: атрибут не в кавычках

Если значение атрибута содержит амперсанд("&"), он должен выражаться мнемоникой ("&"). Например, если атрибут href элемента <a> ссылается на скрипт CGI, который принимает параметры,
он (атрибут) должен быть выражен так:
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user

а не так:
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user

Предопределенные значения атрибутов (например атрибут type элемента input) регистрозависимы и должны быть написаны в нижнем регистре. Однако, это не касается значений атрибутов определяемых авторами документов (например значения для атрибутов id, name или class), которые также регистрозависимы, но допускают использование символов в верхнем регистре.

Следует учесть, что ведущие и ведомые пробелы в значениях атрибутов удаляются браузерами, а один или несколько последовательных пробелов между словами (а также переводы строк) преобразуются в одиночный межсловный пробел (символ пробела ASCII в западных языках). XML не поддерживает минимизацию атрибутов. Пары атрибут/значение обязательно должны быть выписаны полностью. Имена атрибутов, такие как compact и checked, не могут появляться в элементах без определенных значений.

ПРАВИЛЬНО: атрибут написан полностью

НЕПРАВИЛЬНО: атрибут минимизирован

4. Для непустых элементов необходимы конечные теги.

В HTML4 на базе SGML, некоторые элементы допускали отсутствие конечного тега при наличии других последующих элементов с закрывающими тегами. Такое отсутствие конечных тегов не допускается в XHTML на базе XML. Все элементы, за исключением тех, которые объявлены в определении типа документа как EMPTY(пустой), должны иметь конечный тег.

ПРАВИЛЬНО: закрытые элементы

<p>Здесь какой-то текст.</p><p>Еще параграф с текстом.</p>

НЕПРАВИЛЬНО: незакрытые элементы

<p>Здесь какой-то текст.<p>Еще параграф с текстом.

5. Пустые элементы

Пустые элементы обязаны иметь конечный тег, или стартовый тег обязан заканчиваться />. Например, <br /> или <br></br>.

Для совместимости с устаревшими браузерами следует писать пробел перед /> в одиночном пустом элементе.
Следует использовать минимизированный синтаксис для тегов пустых элементов, например, <br /> так как альтернативный синтаксис <br></br>, допускаемый XML, дает непредсказуемые результаты во многих существующих браузерах.

При создании пустого объекта элемента, чья модель содержимого не EMPTY(например, пустой заголовок или параграф), не следует использовать минимизированную форму(т.е. нужно использовать <p> </p>, а не <p />).

ПРАВИЛЬНО: пустые теги закрыты

<br /><hr />

НЕПРАВИЛЬНО: пустые теги не закрыты

<br><hr>

6. Элементы <script> и <style>.

В XHTML элементы <script> и <style> объявлены как имеющие содержимое #PCDATA(это резервное имя, описывающее базовые элементы и представляющее тип данных, содержащихся в элементе. Оно означает наличие символьных данных, которые могут быть подвергнуты грамматическому анализу. ). Как результат этого, < и & будут рассматриваться как начало разметки, а мнемоники(Символ-мнемоника — это конструкция SGML, которая ссылается на символ из набора символов документа. В HTML предопределено большое количество спецсимволов. Чтобы вставить определенный символ в разметку, нужно вставить определенную ссылку-мнемонику в HTML структуру.), такие как < и &, будут считаться процессором XML мнемониками символов < и & соответственно. Перенос содержимого элементов <script> или <style> в раздел, помеченный CDATA(это часть содержания элемента, помеченная для парсера, что она содержит только символьные данные, а не разметку.), позволит избежать расшифровки этих мнемоник.

Задача заключается в том, чтобы скрыть от xml-парсера код, заключенный в script или style, так как для него это обычный namespace.

Namespace в переводе означает пространство имен. Используется для логической группировки классов, функций и переменных.
Говоря по другому namespace позволяет разделить глобальное пространство имен на подпространства.
Основная задача пространств имен состоит в том, чтобы избежать коллизий имен в глобальном пространстве имен.

Но в коде script или style мы не можем заменять спец. символы на мнемоники, поэтому вообще отключаем его обработку при помощи CDATA, и делаем так, чтобы javascript не воспринимал CDATA, тоесть заключаем согласно синтаксису яваскрипт в однострочные или многострочные комментарии.

Однострочный комментарий:

<script type="text/javascript">
//<![CDATA[
  ... неэкранированное содержание сценария  ...
//]]>
</script>

Многострочный комментарий:

<script type="text/javascript">
/*<![CDATA[*/
  ... неэкранированное содержание сценария  ...
/*]]>*/
</script>

И для style:

<style type="text/css">
/*<![CDATA[*/
    ... стили ...                                        
/*]]>*/                                            
</style>

Разделы CDATA распознаются процессором XML и являются узлами в объектной модели документа(Document Object Model)

Альтернативой может быть использование внешних документов скриптов и стилей.

7. Исключения SGML.

SGML предоставлял создателям определений типа документа возможность исключать некоторые элементы как содержимое элемента. Такие запрещения (называемые "исключения") невозможны в XML.

Например, Строгое определение типа документа HTML4(Strict DTD) запрещает вложение элемента <a> в другой элемент <a> на любую глубину. Хотя эти запрещения и могут отсутствовать в определении типа документа, определенные элементы не могут вкладываться.

В XHTML:
<a> не может содержать другие элементы <a>.
<pre> не может содержать элементы <img>, <object>, <big>, <small>, <sub> или <sup>.
<button> не может содержать элементы <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> или <isindex>.
<label> не может содержать другие элементы <label>.
<form> не может содержать другие элементы <form>.

8. Элементы с атрибутами "id" и "name"

HTML 4 определил атрибут name для элементов a, applet, form, frame, iframe, img и map, а также ввёл атрибут id. Оба эти атрибута созданы для использования в качестве идентификаторов фрагмента.

В XML идентификаторы фрагмента имеют тип ID, и в элементе может быть только один атрибут типа ID. Таким образом, в XHTML 1.0 атрибут id определён как атрибут типа ID. Чтобы быть уверенным, что документы XHTML 1.0 являются правильно структурированными документами XML, документы XHTML 1.0 обязаны использовать атрибут id для определения идентификаторов фрагмента, и даже в тех элементах, которые исторически имели атрибут name.

Также следует помнить, что значение атрибута id в пределах документа должно быть уникальным.!!!

В XHTML 1.1 для элементов a и map атрибут name удален, вместо него следует использовать атрибут id.

9. Двойные тире в комментариях

В комментариях двойные тире "--" могут обозначать только начало и конец комментария.

НЕПРАВИЛЬНО:

ПРАВИЛЬНО:

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

10. Символы < и & в тексте документа

XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться <
и &
соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.
Символы < и & в тексте документа должны быть заменены соответствующими последовательностями <
и &

Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

Отличия переходного (англ. transitional) XHTML от HTML незначительны и предназначены лишь для приведения его в соответствие с XML. Остальные версии отличаются лишь набором тегов.

В том случае, если MIME-тип — text/html (а это чаще всего и есть значение по умолчанию), все современные браузеры поддерживают XHTML. Он также совместим и со старыми браузерами, т.к. в основе XHTML лежит HTML.

Однако если автор страницы задал MIME-тип(Указание типа файла) как application/xhtml+xml, браузер Internet Explorer 6 не сможет обрабатывать страницу, поскольку у него нет XML-парсера(программа, которой необходимо читать файлы в формате XML). Это одна из причин, замедляющих процесс перехода от HTML к XHTML.

Впрочем, проблема с MIME-типом легко решается при помощи простого PHP-скрипта, меняющего пресловутый MIME-тип в зависимости от пользовательского агента.

Версии XHTML

* XHTML 1.0 Переходный (Transitional) — предназначен для лёгкой миграции из HTML 3.2 и для тех, кто использует инлайн-фрэймы.
* XHTML 1.0 Строгий (Strict) — полностью отделяет содержание документа от оформления (которое теперь задаётся только через CSS), многие атрибуты (такие как, например, bgcolor и align) более не поддерживаются, их поведение можно задавать только через таблицу стилей.
* XHTML 1.0 Фрэймовый (Frameset) — используется, если необходимо разделить окно браузера на несколько фрэймов.
* XHTML 1.1 Модульный (Module-based) — авторы могут импортировать дополнительные свойства в их разметку.
* XHTML Основной (Basic) — специальная облегчённая версия XHTML для устройств, которые не могут использовать полный набор элементов XHTML — в основном используется в миниатюрных устройствах, таких как мобильные телефоны. Подразумевается, что он заменит WML и C-HTML.
* XHTML мобильного профиля (Mobile Profile) — основанный на XHTML Basic, добавляет специфические элементы для мобильных телефонов.
* XHTML 2.0. Пока в разработке. Синтаксис еще больше приближен к синтаксису XML. Также является модульным языком.

Валидация XHTML документов

Валидным (т.е. отвечающим всем правилам) XHTML-документом считается документ, удовлетворяющий технической спецификации. В идеале, все браузеры должны следовать веб-стандартам и, в соответствии с ними, валидные документы должны отображаться во всех браузерах на всех платформах. Валидация XHTML-документа рекомендована даже несмотря на то, что она не гарантирует кросс-браузерности. Документ может быть проверен на соответствие спецификации с помощью онлайновой Службы валидации разметки W3C (ссылка в конце). Валидация обнаружит и разъяснит ошибки в XHTML-разметке.

Валидный документ должен содержать определение типа документа (DTD). DTD должен быть расположен до всех других элементов документа. Вот наиболее распространённые типы DTD для XHTML:

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Самыми распространёнными ошибками в XHTML-разметке являются:

* Незакрытые элементы (XHTML, в отличие от HTML, требует закрытия всех элементов, в том числе не имеющих закрывающего тега, как, например, <br />).
* Отсутствие альтернативных текстов для изображений (достигающийся применением атрибута alt, который помогает сделать документы доступнее для устройств, которые не в состоянии отображать изображения, или предназначенных для слабовидящих людей).
* Присутствие текста непосредственно в теге <body> документа (должен быть объявлен блочный элемент, внутрь которого следует помещать содержимое).
* Вложение блочных элементов внутрь инлайновых (внутристрочных) (например, блочные элементы <div> или <p> не могут быть вложены внутрь инлайновых элементов <a>, <span>, <em> и так далее).
* Пренебрежение заключением значений атрибутов в кавычки (<a href=http://www.ru/> вместо <a href="http://www.ru/">).
* Неправильное вложение элементов (конструкции вида <strong> <em> </strong> </em>).
* Неправильное использование ссылок-мнемоник (например & вместо &)
* Написание тегов и/или атрибутов прописными буквами (<DIV STYLE="…"> вместо <div>).
* Задание в теге <!DOCTYPE …> относительного пути к DTD-файлу, скопированное с сайта www.w3.org ("DTD/xhtml11.dtd" вместо "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd").

Это не полный список, но дающий общее представление о часто допускаемых ошибках при составлении XHTML-документов.

Валидный XHTML-документ можно снабжать специальным баннером W3C, подтверждающим валидность XHTML-разметки.

На сайте Консорциума Всемирной паутины (www.w3.org) также можно найти валидаторы для CSS, HTML-документов и др.

11. Вот образец минимального документа XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Образец минимального документа XHTML</title>
</head>

<body>
<p>Подробности о разметке на сайте W3C: <a href="http://w3c.org/MarkUp/"> http://w3c.org/MarkUp/ </a></p>
</body>
</html>

Корневым элементом документа должен (обязан) быть <html>.

Корневой элемент документа обязан обозначить пространство имён XHTML путём использования атрибута xmlns[XMLNAMES]. Пространство имён XHTML определено в http://www.w3.org/1999/xhtml.

В документе обязано присутствовать объявление DOCTYPE, предшествующее корневому элементу(<html>).
Публичный идентификатор, включённый в объявление DOCTYPE, обязан быть ссылкой на одно из определений типа документа.

Вернуться назад