HTML, как мы его знаем и любим, по многим причинам стал довольно слабым и неуправляемым. Если вы старательно протестировали свои веб-страницы в разных браузерах и обнаружили, что ваш тщательно созданный шедевр отлично смотрится в IE5x, но становится нечитаемым монстром в Netscape 4x, тогда добро пожаловать в клуб.
Что мы можем сделать?
Что ж, мы могли бы потратить все свое время на жалобы о соответствии браузера, фирменных тегах и стандартах. Или мы могли бы занять активную позицию и поддержать первую рекомендацию Консорциума World Wide Web для XHTML: XHTML 1.0
Эта статья использует подход «быстрого начала», предназначенный для автора HTML, который хочет расширить свои навыки, и заканчивается ссылками на более подробную информацию.
Что такое XHTML?
Согласно W3C :
«XHTML 1.0 представляет собой переформулировку HTML 4.01 в XML и сочетает в себе силу HTML 4 с мощью XML.
«XHTML 1.0 — это первое значительное изменение в HTML с тех пор, как HTML 4.0 был выпущен в 1997 году. Он привносит строгость XML в веб-страницы и является краеугольным камнем в работе W3C по созданию стандартов, обеспечивающих более богатые веб-страницы на постоянно растущем диапазоне платформ браузеров. включая мобильные телефоны, телевизоры, автомобили, беспроводные коммуникаторы размером с кошелек, киоски и настольные компьютеры ».
Звучит хорошо до сих пор? Тогда читайте дальше …
С чего начать?
Если у вас нет опыта работы с XML, вы можете быть немного прощены этим. Но если вы можете кодировать свои страницы в HTML, вам будет приятно узнать, что изучение XHTML будет чрезвычайно простым. Он также предоставит вам превосходное введение в XML по пути.
По сути, XHTML — это просто более строгая версия HTML 4.01 с несколькими соображениями, которые следует учитывать при разметке страниц.
Три вкуса на выбор!
Как вы, возможно, знаете, расширяемый язык разметки вовсе не является языком разметки, а представляет собой способ определения языков разметки с помощью определения типа документа или DTD. XHTML — один из таких языков, и на выбор предлагается три разных DTD.
- Строгий — запрещает использование всех устаревших тегов и атрибутов, таких как
<font> - Transitional — гораздо более щадящий и поддерживает все устаревшие, но поддерживаемые браузером теги, которые вы, скорее всего, используете каждый день.
- Frameset — точно такой же, как переходный DTD, но заменяет тело документа атрибутами кадра.
Вы, вероятно, захотите использовать переходный DTD, поскольку он предоставляет наиболее щадящую среду для введения в XML и XHTML.
Основные различия между HTML и XHTML
Спецификация требует, чтобы ваши документы были «правильно оформлены», что означает, что вы должны уделять особое внимание определенным аспектам вашего кода. Ниже приведены ключевые моменты, о которых вам нужно знать.
1. Вложенные элементы
Во-первых, вам нужно привести в порядок то, как вы относитесь к элементам своей страницы. XHTML не допускает неправильного вложения, поэтому что-то вроде этого:
<b><p>I'd probably have gotten away with it too if it weren't for
you pesky W3C folks</b></p>
не пройдет проверку в службе валидации W3C, но
<p><b>Buffy rules!</b></p>
… будет просто отлично. То же самое относится ко всем вашим тегам разметки.
2. Чувствительность к регистру
И теги, и их атрибуты чувствительны к регистру в XHTML. Простое и строгое правило заключается в том, что все теги и атрибуты должны быть написаны в нижнем регистре. Например,
<A HREF="myPage.html">Some page</a>
Валидатор XHTML зажарит вас заживо, но
<a href="wellFormed.html">Well formed page</a>
будет работать отлично.
Конечные метки
Большинство разработчиков HTML пропускают конечные теги для определенных элементов, таких как </ p>. Если вы не знали, что у <p> даже есть конечный тег, вы не одиноки. Вот теги, которые могут вас поймать:
<th> <tr> <td> <li>
Как насчет изображений и разрывов строк?
Хороший вопрос. Эти элементы похожи, и все требуют конечного тега. Так работает XML, и, конечно, XHTML не является исключением, даже если в HTML-эквиваленте нет конечного тега. Вы справляетесь с этим путем включения конечного тега в его открыватель. Вот пример:
<p>XHTML is strict but not really hard</p>
<img src="somePic.gif" /><br />
<p>See what I mean?</p>
<hr />
Хитрость заключается в том, чтобы оставить пробел перед закрывающим тегом, чтобы не перепутать браузеры, не поддерживающие XHTML.
Атрибуты
Есть несколько вещей, о которых вы должны знать, когда имеете дело с атрибутами. Во-первых, все ваши атрибуты должны быть заключены в «двойные кавычки».
Во-вторых, для тех атрибутов, которые в HTML не имеют значения, таких как <ul compact> Это сделано так:
<ul compact="compact">
Другие атрибуты для наблюдения являются:
ismap="ismap"
declare="declare"
nowrap="nowrap"
compact="compact"
noshade="noshade"
checked="checked"
Специальные символы
Ненавижу это говорить, но в этот момент XHTML становится чем-то вроде боли. Большинство из вышеперечисленного — это просто дисциплина и развитие хороших навыков кодирования, но здесь есть несколько проблем, которые требуют особого упоминания. Они почти наверняка доставят вам неприятности, если вы не готовы!
- XHTML может быть немного проблематичным при обработке символов <,> и & в CSS и JavaScript. Браузеры XML могут удалять ваши комментарии и, следовательно, ваши комментарии CSS. Чтобы быть уверенным, используйте внешние таблицы стилей и JS-скрипты (хотя у меня до сих пор не было проблем, и я не делал этого на своем собственном сайте).
- Амперсанды также могут быть проблемой в атрибутах. Как правило, просто используйте соответствующие HTML-объекты для символов &, <,> и убедитесь, что вы правильно проверили свои страницы .
Используйте идентификатор вместо имени
Атрибут name теперь устарел в пользу нового и предпочтительного атрибута id . Хотя это поддерживается, вы получите предупреждения, когда дело доходит до проверки, например, если вы используете имя в теге карты .
Простой документ XHTML
Ладно, хватит делать и не делать. Если вы хотите начать, вот простой документ XHTML, с которого можно начать.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>XHTML is easier than you thought!</title>
</head>
<body>
<hr />
<p>As long as you remember the rules and guidelines
above<br />
you'll soon be writing well formed documents.
No really, you will! </p>
<hr />
</body>
</html>
Подробное объяснение объявлений в верхней части документа выходит за рамки данного руководства по быстрому запуску (и совершенно ненужно для большинства дизайнеров), но вот простая версия.
Строки 1 Сообщает браузеру, что мы используем XML 1.0, и предоставляет его кодировку в виде 8-битного Unicode.
В строке 2-4 указано DTD, которое мы используем, в данном случае это переходная версия.
Строка 5 Объявляет в <html>
И вот, все готово, чтобы начать писать правильно оформленные, соответствующие стандартам страницы XHTML! Все, что вам нужно сделать, это использовать приведенный выше код в качестве базового шаблона и начать с самого начала приобретать хорошие привычки кодирования. Если вы обнаружите, что не можете правильно проверить каждую страницу на своем сайте, не волнуйтесь, это довольно сложный вызов. Пока вы прилагаете усилия, чтобы как можно больше проверить, вы делаете хорошую работу.
Дополнительная информация и ресурсы
Официальные источники
XHTML 1.0: расширяемый язык разметки гипертекста
Учебники и статьи
XHTML в сети разработчиков Mozilla
Дорожная карта XHTML для дизайнеров
Удачи!