По матерьялам htmlbook.ru

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

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

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

XHTML (EXtensible HyperText Markup Language, Расширенный язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Вообще,W3C определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит. Так ли это будет обстоять на самом деле, покажет только время.

Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить с программой, которая не будет скомпилирована до тех пор, пока все ошибки не исправлены. Браузер выступает в роли компилятора и не отображает документ, если он не соответствует спецификации. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к «идеальному» коду. Это позволяет делать сайты независимыми от устройства отображения и браузера. Иными словами, сайт будет корректно показываться во всех современных браузерах и платформах вроде компьютеров, смартфонов, наладониках и т.д.

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

По этим причинам XHTML 1.x является всего лишь подобием HTML, но с более строгим синтаксисом, а не тем перспективным языком разметки, на который обязательно стоит переходить из-за его уникальных возможностей.

Любой XHTML-файл состоит из трех разделов — тега &lt;!DOCTYPE&gt;, заголовка (&lt;HEAD&gt;) и тела документа (&lt;BODY&gt;). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника (пример 2.1).
Пример 2.1. Простейший XHTML-документ 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;!-- Этот раздел предназначен для заголовка страницы и технической информации. --&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;!-- А здесь надо размещать все, что хочется увидеть на странице. --&gt;
&lt;/body&gt;
&lt;/html&gt;

Тег &lt;!DOCTYPE&gt; сообщает браузеру о типе текущего документа и как его интерпретировать. Различают несколько версий и типов XHTML-документов, они приведены в табл. 2.1. 
Табл. 2.1. Версии XHTML и допустимые типы документа
Версия XHTML	Тип документа	Описание	
XHTML 1.0	Strict	«Строгое» описание документа, включающее все правила.	
XHTML 1.0	Transitional	«Переходный» тип, более лояльно относящийся к коду документа.	
XHTML 1.0	Frameset	Устанавливается при использовании на странице фреймов.	
XHTML 1.1	XHTML 1.1	Эта версия основана на XHTML 1.0 Strict, но понимается браузерами как XML-приложение. В первую очередь предназначено для работы с различными медиа-данными.	
XHTML 1.0 Strict

Используется в том случае, если в документе идет четкое разделение оформления и содержания. При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили (пример 2.2).
Пример 2.2. Документ со строгой разметкой 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt; ... &lt;/head&gt;
&lt;body&gt; ... &lt;/body&gt;
&lt;/html&gt; 
XHTML 1.0 Transitional

Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере. В этом случае допускается в коде документа использовать теги физического проектирования (например, тег &lt;TT&gt;) и лишь частично стили. В примере 2.3 показан вид тега &lt;!DOCTYPE&gt; для подобных документов.
Пример 2.3. «Переходный» документ 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt; ... &lt;/head&gt;
&lt;body&gt; ... &lt;/body&gt;
&lt;/html&gt; 
XHTML 1.0 Frameset

Применяется, когда окно браузера делится на два или более фрейма (пример 2.4). 
Пример 2.4. Документ с фреймами 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt; ... &lt;/head&gt;
&lt;frameset&gt; ... &lt;/frameset&gt;
&lt;/html&gt; 

Тег &lt;!DOCTYPE&gt; хотя и обязателен, но не является непосредственной частью XHTML-документа, поэтому для него закрывающего тега не требуется.
XHTML 1.1

Является старшей версией «строгого» XHTML (пример 2.5).
Пример 2.5. XHTML 1.1 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt; ... &lt;/head&gt;
&lt;body&gt; ... &lt;/body&gt;
&lt;/html&gt; 
Шаблон документа XHTML Strict 

Тег &lt;HTML&gt; является корневым для остальных элементов веб-страницы и располагается сразу после определения типа документа &lt;!DOCTYPE&gt;. Поскольку тип документа может быть любым, а не только тем, что приведен в табл. 2.1, то необходимо дать понять браузеру, что он имеет дело со спецификой XHTML. Для чего в тег &lt;HTML&gt; добавляется параметр xmlns.
Замечание 

Хотя параметр xmlns в теге &lt;HTML&gt; и считается обязательным, но валидатор не выдает ошибки, если xmlns отсутствует.

Также в контейнере &lt;HEAD&gt; требуется наличие заголовка &lt;TITLE&gt;. Таким образом, минимальный XHTML-документ с метатегом, устанавливающим кодировку веб-страницы, показан в примере 2.6.
Пример 2.6. Шаблон XHTML-документа 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1251&quot; /&gt;
&lt;title&gt;Новый документ&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

В данном примере используется тип XHTML 1.0 Strict и кодировка Windows-1251.

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

Правила XHTML следующие.
Все теги и параметры должны быть набраны в нижнем регистре (строчными символами).
Значения любых параметров необходимо заключать в кавычки.
Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
Должна соблюдаться правильная вложенность тегов.
Нельзя использовать сокращенные атрибуты тегов.
Вместо параметра name необходимо указывать атрибут id.
Следует определять DTD (document type definition, описание типа документа) с помощью тега &lt;!DOCTYPE&gt;.
Теги должны быть набраны в нижнем регистре

Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги &lt;HR&gt; и &lt;hr&gt; различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их параметры в нижнем регистре. В примере 3.1 приводится неверное использование тегов.
Пример 3.1. Ошибочное написание тегов 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;BODY&gt; 
&lt;P&gt;Lorem ipsum dolor sit amet...&lt;/P&gt;
&lt;/BODY&gt;
&lt;/html&gt;

В данном примере теги &lt;body&gt; и &lt;p&gt; набраны прописными символами, что является ошибкой. В примере 3.2 показан корректный код.
Пример 3.2. Правильное написание тегов 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt; 
&lt;body&gt;
&lt;p&gt;lorem ipsum dolor sit amet...&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
Замечание 

В дальнейшем при упоминании какого-либо тега, обычно будем указывать его прописными символами для акцентирования внимания. Но при этом в примерах теги всегда приводятся в нижнем регистре.
Значения любых параметров необходимо заключать в кавычки

Хотя в HTML также требуется заключать аргументы в кавычки, но их отсутствие никак не влияет на корректность кода. Так что можно сказать, что в HTML применение кавычек лишь рекомендация. В XHTML же использование кавычек введено в правило и любые значения параметров требуется указывать только в них (пример 3.3). 
Пример 3.3. Использование кавычек 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;body&gt;
&lt;table width=&quot;200&quot; border=&quot;1&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;Чебурашка&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Шапокляк&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

В данном примере все параметры тега &lt;TABLE&gt;, а также &lt;TH&gt; задаются в кавычках.
Требуется закрывать все теги

В HTML теги делятся на две категории — парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить, поскольку браузер добавляет его автоматически. В XHTML закрывающий тег требуется всегда и везде. В примере 3.4 показан код с ошибкой, из-за того, что отсутствует тег &lt;/p&gt;.
Пример 3.4. Нет закрывающего тега 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;и лезет, крадучись, в самолёт,  
&lt;p&gt;и бомбу в брюхо ему кладёт,     
&lt;p&gt;и прочь неслышно бежит, как кот;
&lt;p&gt;а дальше - не наше дело.        
&lt;/body&gt;
&lt;/html&gt;

Обычно разработчики игнорируют закрывающие теги &lt;/li&gt;, &lt;/p&gt;, &lt;/td&gt;, но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное использование списков.
Пример 3.5. Добавление списка 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;body&gt;
&lt;ul&gt;
 &lt;li&gt;Восток&lt;/li&gt;
 &lt;li&gt;Запад&lt;/li&gt;
 &lt;li&gt;Юг&lt;/li&gt;
 &lt;li&gt;Север&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

В данном примере каждому открывающему тегу соответствует его закрывающий тег.
Замечание 

Тег &lt;!DOCTYPE&gt; не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.

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

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;body&gt;
&lt;img src=&quot;test.gif&quot; width=&quot;873&quot; height=&quot;620&quot; alt=&quot;тестовая картинка&quot; /&gt;
&lt;/body&gt;
&lt;/html&gt;

В данном примере обратите внимание на обязательный пробел, который предшествует конструкции /&gt;.

В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.
Табл 3.1. Сопоставление HTML и XHTML-тегов
HTML-тег	XHTML-тег	
&lt;br&gt;	&lt;br /&gt;	
&lt;hr&gt;	&lt;hr /&gt;	
&lt;input&gt;	&lt;input /&gt;	
&lt;img&gt;	&lt;img /&gt;	
&lt;meta&gt;	&lt;meta /&gt;	
Должна соблюдаться правильная вложенность тегов

XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.
Правильная вложенность тегов

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

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;Lorem &lt;b&gt;&lt;i&gt;ipsum dolor sit&lt;/b&gt;&lt;/i&gt; amet...&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

В данном примере закрывающий тег &lt;/b&gt; предшествует тегу &lt;/i&gt;, хотя должно быть наоборот, что и приводит к ошибке. Стоит поменять теги местами, как код становится корректным.
Замечание 

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

Все теги имеют строгую иерархическую систему в том смысле, что каждый тег должен находиться внутри другого тега и никак иначе. На условной вершине находится корневой элемент &lt;HTML&gt;, а все остальные теги могут содержать внутри себя другие теги, которые называются дочерними. Соответственно дочерние теги располагаются в родительском элементе. 

Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В примере 3.8 показана базовая структура документа.
Пример 3.8. Структура документа 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; 
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1251&quot; /&gt;
&lt;title&gt;Новый документ&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
...
&lt;/body&gt;
&lt;/html&gt;

В данном примере вначале приводится тег &lt;HTML&gt;, внутри которого располагаются теги &lt;HEAD&gt; и &lt;BODY&gt;. Внутри раздела &lt;HEAD&gt; хранится заголовок документа (&lt;TITLE&gt;) и кодировка страницы (&lt;META&gt;).
Замечание 

Параметр xmlns требуется добавлять к тегу &lt;HTML&gt;. Вместе с тем, его отсутствие никак не влияет на выдачу результата валидатора. Это связано с тем, что браузеры вставляют этот параметр автоматически.
Нельзя использовать сокращенные атрибуты тегов

Сокращенным атрибутом называется параметр без присвоенного значения. В примере 3.9 приведена форма с использованием таких атрибутов.
Пример 3.9. Ошибка при использовании параметров 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1251&quot; /&gt;
&lt;title&gt;Форма&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action=&quot;/cgi-bin/handler.cgi&quot; method=&quot;post&quot;&gt;
&lt;fieldset&gt;
&lt;input type=&quot;text&quot; value=&quot;Совет дня&quot; readonly /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

«Пустое значение», как еще называется подобная ошибка, легко исправляется, если присвоить параметру значение 1 или аргумент, совпадающий с названием атрибута. В табл. 3.2 приведены некоторые параметры и как они записываются в HTML и XHTML.
Табл 3.2. Сопоставление параметров в HTML и XHTML
HTML	XHTML	
checked	checked=&quot;checked&quot; 	
compact	compact=&quot;compact&quot; 	
disabled	disabled=&quot;disabled&quot; 	
ismap	ismap=&quot;ismap&quot; 	
multiple	multiple=&quot;multiple&quot; 	
nohref	nohref=&quot;nohref&quot; 	
noresize	noresize=&quot;noresize&quot; 	
noshade	noshade=&quot;noshade&quot; 	
nowrap	nowrap=&quot;nowrap&quot; 	
readonly	readonly=&quot;readonly&quot; 	
selected	selected=&quot;selected&quot; 	

В примере 3.10 показано корректное использование вышеприведенной формы.
Пример 3.10. Правильное использование параметров 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1251&quot; /&gt;
&lt;title&gt;Форма&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action=&quot;/cgi-bin/handler.cgi&quot; method=&quot;post&quot;&gt;
&lt;fieldset&gt;
&lt;input type=&quot;text&quot; value=&quot;Совет дня&quot; readonly=&quot;1&quot; /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Вместо параметра name необходимо указывать атрибут id

Параметр name определяется в HTML для тегов &lt;A&gt;, &lt;FRAME&gt;, &lt;IFRAME&gt;, &lt;IMG&gt; и &lt;MAP&gt; и предназначен для обозначения элемента с целью последующего к нему обращения. В XHTML параметр name вышел из употребления, а вместо него следует использовать id, как показано в примере 3.11.
Пример 3.11. Идентификатор рисунка 

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;body&gt;
&lt;img src=&quot;bgtop.gif&quot; id=&quot;pic1&quot; /&gt;
&lt;/body&gt;
&lt;/html&gt;
Следует определять DTD

Все XHTML-документы обязательно должны содержать тег &lt;!DOCTYPE&gt;, который задает DTD, а также придерживаться иерархической структуры вложения тегов.
 