При написании кода XHTML придерживаются того же синтаксиса, который характерен для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных правил. Правила XHTML следующие.
Все теги и параметры должны быть набраны в нижнем регистре (строчными символами).
Значения любых параметров необходимо заключать в кавычки.
Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
Должна соблюдаться правильная вложенность тегов.
Нельзя использовать сокращенные атрибуты тегов.
Вместо параметра name необходимо указывать атрибут id.
Следует определять DTD (document type definition, описание типа документа) с помощью тега <!DOCTYPE>.
Теги должны быть набраны в нижнем регистре
Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги <HR> и <hr> различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их параметры в нижнем регистре. В примере 3.1 приводится неверное использование тегов.
Пример 3.1. Ошибочное написание тегов
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<BODY>
<P>Lorem ipsum dolor sit amet...</P>
</BODY>
</html>
В данном примере теги <body> и <p> набраны прописными символами, что является ошибкой. В примере 3.2 показан корректный код.
Пример 3.2. Правильное написание тегов
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>lorem ipsum dolor sit amet...</p>
</body>
</html>
Замечание
В дальнейшем при упоминании какого-либо тега, обычно будем указывать его прописными символами для акцентирования внимания. Но при этом в примерах теги всегда приводятся в нижнем регистре.
Значения любых параметров необходимо заключать в кавычки
Хотя в HTML также требуется заключать аргументы в кавычки, но их отсутствие никак не влияет на корректность кода. Так что можно сказать, что в HTML применение кавычек лишь рекомендация. В XHTML же использование кавычек введено в правило и любые значения параметров требуется указывать только в них (пример 3.3).
Пример 3.3. Использование кавычек
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table width="200" border="1" cellpadding="5" cellspacing="0">
<tr>
<th scope="col">Чебурашка</th>
<th scope="col">Шапокляк</th>
</tr>
<tr>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>13</td>
</tr>
</table>
</body>
</html>
В данном примере все параметры тега <TABLE>, а также <TH> задаются в кавычках.
Требуется закрывать все теги
В HTML теги делятся на две категории — парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить, поскольку браузер добавляет его автоматически. В XHTML закрывающий тег требуется всегда и везде. В примере 3.4 показан код с ошибкой, из-за того, что отсутствует тег </p>.
Пример 3.4. Нет закрывающего тега
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>и лезет, крадучись, в самолёт,
<p>и бомбу в брюхо ему кладёт,
<p>и прочь неслышно бежит, как кот;
<p>а дальше - не наше дело.
</body>
</html>
Обычно разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное использование списков.
Пример 3.5. Добавление списка
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<ul>
<li>Восток</li>
<li>Запад</li>
<li>Юг</li>
<li>Север</li>
</ul>
</body>
</html>
В данном примере каждому открывающему тегу соответствует его закрывающий тег.
Замечание
Тег <!DOCTYPE> не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.
Что касается одинарных тегов, то они должны завершаться слэшем перед закрывающей угловой скобкой, как показано в примере 3.6.
Пример 3.6. Добавление изображения
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img src="test.gif" width="873" height="620" alt="тестовая картинка" />
</body>
</html>
В данном примере обратите внимание на обязательный пробел, который предшествует конструкции />.
В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.
Табл 3.1. Сопоставление HTML и XHTML-теговHTML-тег XHTML-тег
Code
<br> <br />
<hr> <hr />
<input> <input />
<img> <img />
<meta> <meta />
Должна соблюдаться правильная вложенность тегов
XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.
Правильная вложенность тегов
Каждый тег должен располагаться внутри другого тега, при этом недопустимо их «пересечение», как это показано в примере 3.7.
Пример 3.7. Ошибка с положением тегов
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>Lorem <b><i>ipsum dolor sit</b></i> amet...</p>
</body>
</html>
В данном примере закрывающий тег </b> предшествует тегу </i>, хотя должно быть наоборот, что и приводит к ошибке. Стоит поменять теги местами, как код становится корректным.
Замечание
Хотя валидатор кода и выдает ошибку в случае неправильного положения тегов, браузеры при этом правильно отображают веб-страницу.
Иерархия тегов
Все теги имеют строгую иерархическую систему в том смысле, что каждый тег должен находиться внутри другого тега и никак иначе. На условной вершине находится корневой элемент <HTML>, а все остальные теги могут содержать внутри себя другие теги, которые называются дочерними. Соответственно дочерние теги располагаются в родительском элементе.
Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В примере 3.8 показана базовая структура документа.
Пример 3.8. Структура документа
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Новый документ</title>
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере вначале приводится тег <HTML>, внутри которого располагаются теги <HEAD> и <BODY>. Внутри раздела <HEAD> хранится заголовок документа (<TITLE>) и кодировка страницы (<META>).
Нельзя использовать сокращенные атрибуты тегов
Сокращенным атрибутом называется параметр без присвоенного значения. В примере 3.9 приведена форма с использованием таких атрибутов.
Пример 3.9. Ошибка при использовании параметров
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Форма</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi" method="post">
<fieldset>
<input type="text" value="Совет дня" readonly />
</fieldset>
</form>
</body>
</html>
«Пустое значение», как еще называется подобная ошибка, легко исправляется, если присвоить параметру значение, совпадающий с названием параметра. В табл. 3.2 приведены некоторые параметры и как они записываются в HTML и XHTML.
Табл 3.2. Сопоставление параметров в HTML и XHTMLHTML XHTML
Code
checked checked="checked"
compact compact="compact"
disabled disabled="disabled"
ismap ismap="ismap"
multiple multiple="multiple"
nohref nohref="nohref"
noresize noresize="noresize"
noshade noshade="noshade"
nowrap nowrap="nowrap"
readonly readonly="readonly"
selected selected="selected"
В примере 3.10 показано корректное использование вышеприведенной формы.
Пример 3.10. Правильное использование параметров
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Форма</title>
</head>
<body>
<form action="handler.php" method="post">
<fieldset>
<input type="text" value="Совет дня" readonly="1" />
</fieldset>
</form>
</body>
</html>
Вместо параметра name необходимо указывать атрибут id Параметр name определяется в HTML для тегов <A>, <FRAME>, <IFRAME>, <IMG> и <MAP> и предназначен для обозначения элемента с целью последующего к нему обращения. В XHTML параметр name вышел из употребления, а вместо него следует использовать id, как показано в примере 3.11.
Пример 3.11. Идентификатор рисунка
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p><img src="bgtop.gif" id="pic1" /></p>
</body>
</html>
Следует определять DTD Все XHTML-документы обязательно должны содержать элемент <!DOCTYPE>, который задает DTD, а также придерживаться иерархической структуры вложения тегов.
