Синтаксис XHTML

При написании кода 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 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>XHTML</title>
 </head>
 <BODY>
   <P>Lorem ipsum dolor sit amet...</P>
 </BODY>
</html>

В данном примере теги <body> и <p> набраны прописными символами, что является ошибкой. В листинге 3.2 показан корректный код.

Листинг 3.2. Правильное написание тегов

<!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>XHTML</title>
 </head>
 <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 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>XHTML</title>
  </head>
  <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 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>XHTML</title>
 </head>
 <body>
  <p>и лезет, крадучись, в самолёт,
  <p>и бомбу в брюхо ему кладёт,
  <p>и прочь неслышно бежит, как кот;
  <p>а дальше - не наше дело.
 </body>
</html>

Обычно разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В листинге 3.5 показано корректное использование списков.

Листинг 3.5. Добавление списка

<!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>XHTML</title>
 </head>
 <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 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>XHTML</title>
 </head>
 <body>
   <p><img src="test.gif" width="873" height="620" alt="тестовая картинка" /></p>
 </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 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>XHTML</title>
 </head>
 <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>
  <p>...</p>
 </body>
</html>

В данном примере вначале приводится тег <html>, внутри которого располагаются теги <head> и <body>. Внутри раздела <head> хранится заголовок документа (<title>) и кодировка страницы (<meta>).

Нельзя использовать сокращенные атрибуты тегов

Сокращенным атрибутом называется параметр без присвоенного значения. В листинге 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 xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</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 и 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 xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <form action="/cgi-bin/handler.cgi" method="post">
   <fieldset>
    <input type="text" value="Совет дня"  readonly="readonly" />
   </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 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>XHTML</title>
 </head>
 <body>
  <p><img src="bgtop.gif" id="pic1" alt="Картинка" /></p>
 </body>
</html>

Следует определять DTD

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

Теги должны быть набраны в нижнем регистре

Значения любых параметров необходимо заключать в кавычки

Требуется закрывать все теги

Должна соблюдаться правильная вложенность тегов

Правильная вложенность тегов

Иерархия тегов

Нельзя использовать сокращенные атрибуты тегов

Вместо параметра name необходимо указывать атрибут id

Следует определять DTD

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Головний розділ

Сторінки, близькі за змістом