При написании кода XHTML придерживаются того же синтаксиса, который характерен
для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных
правил.
Правила XHTML следующие.
- Все теги и параметры должны быть набраны в нижнем регистре (строчными символами).
- Значения любых параметров необходимо заключать в кавычки.
- Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий
тег.
- Должна соблюдаться правильная вложенность тегов.
- Нельзя использовать сокращенные атрибуты тегов.
- Вместо параметра name необходимо указывать атрибут id.
- Следует определять DTD (document type definition, описание типа документа)
с помощью тега <!DOCTYPE>.
Теги должны быть набраны в нижнем регистре
Это правило возникло из-за того, что XHTML чувствителен к регистру символов,
поэтому для него теги <HR> и <hr> различаются. Чтобы не возникало
путаницы, синтаксис принудительно заставляет указывать все теги, а также их
параметры в нижнем регистре. В примере 3.1 приводится неверное использование
тегов.
Пример 3.1. Ошибочное написание тегов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<BODY>
<P>Lorem ipsum dolor sit amet...</P>
</BODY>
</html>
В данном примере теги <body> и <p> набраны прописными символами,
что является ошибкой. В примере 3.2 показан корректный код.
Пример 3.2. Правильное написание тегов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<p>lorem ipsum dolor sit amet...</p>
</body>
</html>
Замечание
В дальнейшем при упоминании какого-либо тега, обычно будем указывать
его прописными символами для акцентирования внимания. Но при этом в примерах
теги всегда приводятся в нижнем регистре.
Значения любых параметров необходимо заключать в кавычки
Хотя в HTML также требуется заключать аргументы в кавычки, но их отсутствие
никак не влияет на корректность кода. Так что можно сказать, что в HTML применение
кавычек лишь рекомендация. В XHTML же использование кавычек введено в правило
и любые значения параметров требуется указывать только в них (пример 3.3).
Пример 3.3. Использование кавычек
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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. Нет закрывающего тега
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<p>и лезет, крадучись, в самолёт,
<p>и бомбу в брюхо ему кладёт,
<p>и прочь неслышно бежит, как кот;
<p>а дальше - не наше дело.
</body>
</html>
Обычно разработчики игнорируют закрывающие теги </li>, </p>, </td>,
но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное
использование списков.
Пример 3.5. Добавление списка
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<ul>
<li>Восток</li>
<li>Запад</li>
<li>Юг</li>
<li>Север</li>
</ul>
</body>
</html>
В данном примере каждому открывающему тегу соответствует его закрывающий тег.
Замечание
Тег <!DOCTYPE> не является частью XHTML-документа, поэтому для него
закрывающего тега не требуется.
Что касается одинарных тегов, то они должны завершаться слэшем перед закрывающей
угловой скобкой, как показано в примере 3.6.
Пример 3.6. Добавление изображения
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img src="test.gif" width="873" height="620" alt="тестовая
картинка" />
</body>
</html>
В данном примере обратите внимание на обязательный пробел, который предшествует
конструкции />.
В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.
Табл 3.1. Сопоставление HTML и XHTML-тегов
| HTML-тег |
XHTML-тег |
| <br> |
<br /> |
| <hr> |
<hr /> |
| <input> |
<input /> |
| <img> |
<img /> |
| <meta> |
<meta /> |
Должна соблюдаться правильная вложенность тегов
XHTML критично относится к ошибкам следующего типа: некорректная вложенность
одного тега в другой и расположение тега в несоответствующем контейнере.
Правильная вложенность тегов
Каждый тег должен располагаться внутри другого тега, при этом недопустимо
их «пересечение», как это показано в примере 3.7.
Пример 3.7. Ошибка с положением тегов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<p>Lorem <b><i>ipsum dolor sit</b></i> amet...</p>
</body>
</html>
В данном примере закрывающий тег </b> предшествует тегу </i>,
хотя должно быть наоборот, что и приводит к ошибке. Стоит поменять теги местами,
как код становится корректным.
Замечание
Хотя валидатор кода и выдает ошибку в случае неправильного положения тегов,
браузеры при этом правильно отображают веб-страницу.
Иерархия тегов
Все теги имеют строгую иерархическую систему в том смысле, что каждый тег
должен находиться внутри другого тега и никак иначе. На условной вершине находится
корневой элемент <HTML>, а все остальные теги могут содержать внутри
себя другие теги, которые называются дочерними. Соответственно дочерние теги
располагаются в родительском элементе.
Необходимо знать систему подчиненности тегов и следовать ей при написании
кода XHTML. В примере 3.8 показана базовая структура документа.
Пример 3.8. Структура документа
<!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>
...
</body>
</html>
В данном примере вначале приводится тег <HTML>, внутри которого располагаются
теги <HEAD> и <BODY>. Внутри раздела <HEAD> хранится заголовок
документа (<TITLE>) и кодировка страницы (<META>).
Замечание
Параметр xmlns требуется добавлять к тегу <HTML>. Вместе с тем, его
отсутствие никак не влияет на выдачу результата валидатора. Это связано с тем,
что браузеры вставляют этот параметр автоматически.
Нельзя использовать сокращенные атрибуты тегов
Сокращенным атрибутом называется параметр без присвоенного значения. В примере 3.9
приведена форма с использованием таких атрибутов.
Пример 3.9. Ошибка при использовании параметров
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<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>
«Пустое значение», как еще называется подобная ошибка, легко исправляется,
если присвоить параметру значение 1 или аргумент, совпадающий с названием атрибута.
В табл. 3.2 приведены некоторые параметры и как они записываются в HTML
и XHTML.
Табл 3.2. Сопоставление параметров в HTML и XHTML
| HTML |
XHTML |
| 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. Правильное использование параметров
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<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="1" />
</fieldset>
</form>
</body>
</html>
Вместо параметра name необходимо указывать атрибут id
Параметр name определяется в HTML для тегов <A>, <FRAME>, <IFRAME>, <IMG> и <MAP> и
предназначен для обозначения элемента с целью последующего к нему обращения.
В XHTML параметр name вышел из употребления, а вместо него следует использовать
id, как показано в примере 3.11.
Пример 3.11. Идентификатор рисунка
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img src="bgtop.gif" id="pic1" />
</body>
</html>
Следует определять DTD
Все XHTML-документы обязательно должны содержать тег <!DOCTYPE>,
который задает DTD, а также придерживаться иерархической структуры вложения
тегов.
Источник: http://www.htmlbook.ru | 
