Правила разметки XHTML
Безошибочная разметка XHTML повышает вероятность корректного отображения вашей страницы в большинстве браузеров и других пользовательских агентах в ближайшие несколько лет. Четкость, простота в написании и гибкость XHTML позволяют создавать компактный быстро загружающийся код, понятный при его редактировании в будущем, и подготовить содержимое для просмотра в различных пользовательских агентах.
Определить, соответствует ли сайт Web-стандартам очень легко: если вы используете только допустимый код XHTML и правила CSS, - сайт совместим со стандартами.
Допустимый XHTML означает, что вы используете только XHTML, без бессмысленных, незакрытых или устаревших тегов HTML. Вы можете проверить код с помощью валидатора - Web-программы проверки кода (http://validator.w3.org), в которой необходимо ввести адрес вашей страницы. Если все в порядке, вы увидите сообщение This page Is Valid XHTML!. CSS можно проверить по адресу http://jigsaw.w3.org/css-validator тем же образом.
Ниже приведен полный список всех требований к коду для совместимости с XHTML.
1. Указывайте DOCTYPE. В самом начале кода, перед открывающимся тегом html, следует указать DOCTYPE, сообщающий браузеру, использует ли эта страница HTML, XHTML или и то, и другое, и указывающий ему, как интерпретировать данную страницу. Есть три основных типа DOCTYPE:
• Strict - код полностью совместим с XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://wvw.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
• Transitional - это переходный вариант, сочетающий в себе как XHTML, так и HTML. Он используется на многих сайтах, так как обеспечивает одновременно работу и имеющегося HTML, и добавляемого XHTML.
<!!DOCTYPE HTML PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" "http: //www.w3.org/TR/html4/loose.dtd">
• Frameset - то же самое, что и переходный вариант, но в этом случае разрешается использовать фреймы:
<!!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Очень важно, не забывать указывать DOCTYPE. Если браузер не обнаружит его, он предположит, что страница была разработана для браузеров, созданных задолго до появления Web-стандартов.
Без DOCTYPE многие браузеры переходят в Традиционный режим (Quirks), обеспечивающий обратную совместимость и поддерживаемый такими браузерами, как Mozilla, IE6 для Windows и IE5 для Macintosh. В традиционном режиме браузер ведет себя так, будто он не имеет ни малейшего понятия о Web-стандартах и DOM.
Обратите внимание, что по какой-то странной причине тег DOCTYPE всегда указывается заглавными буквами и не нуждается в закрывающем теге с косой чертой. Это полностью противоречит пунктам 4 и 7 правил XHTML, приведенным ниже. Попробуй, разберись!
2. Указывайте пространство имен XML. Сделать это следует сразу после объявления DOCTYPE, например, так:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Когда браузер обрабатывает XHTML-страницу и хочет знать, что содержится в DTD, указывающем допустимые теги XHTML, с помощью этой ссылки он может найти нужную информацию, в данном случае расположенную в глубинах серверов W3C. Иными словами, DOCTYPE и пространство имен гарантируют, что браузер верно обработает созданный вами XHTML-код.
3. Укажите тип содержимого. Объявление типа содержимого располагается в начале документа, вместе с другими мета-тегами:
<meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
Этот тег просто указывает кодировку (в данном случае это кириллица). Если вы хотите создать страницу, содержащую символы других языковых групп, вам понадобится указать другое значение charset.
Совет: при копировании объявления DOCTYPE или пространства имен с другого сайта убедитесь, что все пути в нем абсолютны, то есть начинаются с http://, после чего следует полный путь к документу. Дело в том, что некоторые сайты используют собственные файлы DOCTYPE и пространств имен, и указывают относительные пути к ним. Скопировав объявления с указанными относительными путями к файлам, которых на вашем сервере нет, ваша страница будет выглядеть непредсказуемо.
4. Закрывайте все теги, вмещающие и не вмещающие. Вмещающий тег содержит внутри себя некоторое содержимое:
<р>Это текст, помещенный внутри тегов абзаца. Для соответствия стандарту xhtml, для каждого открывающего тега необходимо иметь и закрывающий, как в данном случае.</р>
Невмещающие теги не имеют внутри себя содержимого, но все равно должны быть закрыты:
<img src="images/siamese.jpg alt="My cat" />
5. Следите за вложенными тегами. Важно, чтобы все вложенные теги были организованы надлежащим способом. Если тег открывается перед закрытием другого, он также должен быть закрыт перед закрывающим элементом содержащего его тега:
<р>Очень <strong>важно</strong> корректно организовывать вложенные теги</р>
Здесь тег <strong> помещен внутри тега <р>. Тег, находящийся внутри другого, называется вложенным. А вот пример неправильного вложения:
<р>Этот тег вложен <strong>неправильно</p></strong>
Внутрь одного элемента-контейнера может быть вложено и несколько тегов. Например, для обозначения списка мы используем несколько тегов <li> внутри одного тега <ul>:
<ul>
<li>Пункт l</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Так как от корректных вложений зависит работа CSS по применению определенных стилей к нужным элементам, важно правильно вкладывать теги.
6. Строчные теги не могут содержать блочные теги. Блочные теги создают визуальную структуру вашего документа, например р (абзац) и div (раздел). Блочные элементы располагаются один поверх другого - если у вас есть два абзаца, то второй будет расположен под первым, указывать перенос строки не требуется. Строчные или линейные теги, например а или em располагаются в обычном потоке текста и не отображаются каждый на новой строке.
Кроме того, некоторые блочные элементы также не могут содержать внутри себя другие блочные элементы, например теги заголовка hl-h6 не могут содержать внутри себя тег абзаца.
7. Указывайте теги только строчными буквами. Не употребляйте заглавные буквы.
8. Для всех атрибутов необходимо указывать значения в кавычках. В HTML-атрибуты некоторых тегов могли указываться без значений, но это не действует в XHTML. Например, если раньше можно было использовать тег select для создания раскрывающегося меню и указать, какой пункт отображается по умолчанию с помощью такого кода:
<SELECT NAME=ANIMALS>
<OPTION VALUE=Cats>Кошки</OPTION>
<OPTION VALUE=Dogs SELECTED>Co6aки</OPTION>
</SELECT>
то эквивалентом в XHTML будет следующий код:
<select name="animals">
<option value=cats>Кошки</option>
<option value="dogs" selected="selected">Собаки</option>
</select>
Обратите внимание, что во втором варианте мы используем только строчные буквы, а все значения атрибутов заключены в кавычки. Значения атрибутов в кавычках могут быть указаны и с прописными буквами, но в целом рекомендуется не делать этого и придерживаться единого стиля.
9. Используйте кодовый эквивалент левой угловой скобки и амперсанда. Когда в XHTML встречается левая угловая скобка (<), или как ее еще называют, знак «меньше», предполагается, что за ней последует тег. Но что если вы хотите просто отобразить этот символ в тексте? В таком случае вам придется использовать кодовый эквивалент из нескольких символов, представляющий тот или иной символ. Например, кодовым эквивалентом левой угловой скобки является комбинация $lt;.
Кодовые эквиваленты не только позволяют избежать ошибок обработки кода, они также позволяют добавлять в текст некоторые специальные символы, например © - для него используется кодовый эквивалент &сору;. Все кодовые эквиваленты символов начинаются со знака & и заканчиваются точкой с запятой. Соответственно, XHTML рассматривает встречаемые символы амперсанда как начало кодового эквивалента символа. Чтобы отобразить сам амперсанд в тексте, используйте кодовый эквивалент &аmр;. Мы рекомендуем вам использовать кодовые эквиваленты для любого символа, отсутствующего непосредственно на клавиатуре. Всего имеется порядка 50 000 кодовых эквивалентов.