Синтаксис 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 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, а также придерживаться иерархической структуры вложения тегов.
|