Разница между HTML и XHTML

XHTML является расширенной версией широко используемого языка гипертекстовой разметки (HTML) и предназначен для работы с расширяемым языком разметки или XML.

XHTML во многом похож на HTML, но он более строг и чище, чем HTML.

Вот наиболее важные моменты, которые следует помнить при создании нового документа XHTML или преобразовании существующего документа HTML в документ XHTML:

Документ XHTML должен иметь объявление DOCTYPE в верхней части документа.
Все имена тегов и атрибутов XHTML должны быть написаны в нижнем регистре.
Все теги должны быть правильно вложены.
Конечные теги необходимы для непустых элементов.
Начальный тег пустого элемента должен заканчиваться на />.
Все значения атрибутов должны быть в кавычках.
Минимизация атрибутов запрещена.

Почему XHTML?

Поскольку документы XHTML должны быть правильно сформированы, ваш веб-сайт с большей вероятностью будет совместим с существующими и будущими веб-браузерами и будет отображаться более точно. Это также делает ваш сайт проще в обслуживании, конвертации и форматировании в долгосрочной перспективе.

XHTML сочетает в себе силу HTML и XML; таким образом, страницы XHTML могут быть проанализированы любыми устройствами с поддержкой XML — в отличие от HTML, который требует мягкого специфичного для HTML синтаксического анализатора.

Веб-разработчики и дизайнеры пользовательских интерфейсов постоянно находят новые способы выразить свои идеи с помощью разметки. В XML относительно легко ввести новые элементы или дополнительные атрибуты элементов. Семейство XHTML предназначено для размещения этих расширений с помощью модулей XHTML. Эти модули позволят комбинировать существующие и новые наборы функций при разработке контента.

Создание документа XHTML

Это основные шаги для создания документа XHTML.

Корневым элементом документа должен быть <html>.
Корневой элемент документа должен содержать объявление xmlns для пространства имен XHTML. Пространство имен для XHTML определено как http://www.w3.org/1999/xhtml.
Должен быть объявлен DOCTYPE в документе до корневого элемента.
Декларация XML должна быть включена в начало документа.

Вот пример документа XHTML.

<?xml version="1.0" encoding="UTF-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" xml:lang="en" lang="en">
<head>
    <title>XHTML Document</title>
</head>
<body>
    <p>This is an example of XHTML document.</p>
</body>
</html>

Декларация XML не требуется во всех документах XML; однако настоятельно рекомендуется использовать декларации XML во всех документах XHTML.

Какая разница между HTML и XHTML

В этом разделе мы подробно разберем различия между HTML и XHTML.

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

В HTML теги и атрибуты могут быть написаны прописными или строчными буквами:

НЕПРАВИЛЬНО: прописные элементы

<P>Это <strong>важное</strong> слово в параграфе.</P>

В XHTML все имена тегов и имена атрибутов должны быть написаны в нижнем регистре. Это различие необходимо, потому что XML чувствителен к регистру, например, <p> и <P> — это разные теги.

ПРАВИЛЬНО: строчные элементы

<p>Это <strong>важное</strong> слово в параграфе.</p>

Элементы должны быть правильно вложены

В XHTML все элементы должны быть правильно вложены. Это означает, что если открывающий тег размещен внутри другого элемента, закрывающий тег также должен быть помещен в тот же элемент:

Таким образом, вы не можете написать:

НЕПРАВИЛЬНО: перекрывающиеся элементы

<p>Вот подчеркнутый элемент <em>параграфа</p>.</em>

Вместо этого это должно быть записано как:

ПРАВИЛЬНО: вложенные элементы.

<p>Вот подчеркнутый элемент <em>параграфа</em>.</p>

Перекрытие также запрещено в HTML. Вы должны всегда закрывать элементы правильно, чтобы разметка была валидной.

Закрывающие теги необходимы для непустых элементов

В HTML некоторым элементам было разрешено опускать конечный тег, такой как параграф:

НЕПРАВИЛЬНО: неопределенные элементы

<p>Это абзац
<p>Это еще один абзац

XHTML не позволяет опускать конечные теги.

ПРАВИЛЬНО: закрытые элементы

<p>Это абзац</p>
<p>Это еще один абзац</p>

Пустые элементы должны заканчиваться на />

В HTML пустые элементы пишутся так:

НЕПРАВИЛЬНО: неопределенные пустые элементы

A break: <br>
A horizontal rule: <hr>
An image: <img src="smiley.png" alt="Smiley">

В XHTML начальный тег пустых элементов должен заканчиваться />:

ПРАВИЛЬНО: закрытые пустые элементы

A break: <br />
A horizontal rule: <hr />
An image: <img src="smiley.png" alt="Smiley" />

Добавьте пробел перед завершающим «/>» пустых элементов, например,<br />, <hr /> и <img src="smiley.png" alt="Smiley" /> для обеспечения обратной совместимости с браузерами.

Значения атрибутов всегда должны быть в кавычках

В HTML иногда можно опустить кавычки, например:

НЕПРАВИЛЬНО: атрибуты без кавычек

<td rowspan=2>

В XHTML все атрибуты должны быть заключены в кавычки, даже числовые.

ПРАВИЛЬНО: атрибуты в кавычках

<td rowspan="2">

Минимизация атрибутов запрещена

XHML не поддерживает минимизацию атрибутов. Пары атрибут-значение должны быть записаны полностью.

Имена атрибутов, такие как selected и checked не могут встречаться в элементах без указания их значения. Таким образом, вы не можете написать:

НЕПРАВИЛЬНО: минимизированные атрибуты

<option selected>Car</option>

Вместо этого необходимо записать это в паре атрибут-значение, как:

ПРАВИЛЬНО: не минимизированные атрибуты

<option selected="selected">Car</option>

Скрипты и стили должны быть размещены в разделе CDATA

В HTML скрипты и стили могут быть включены в документ, даже если они включают такие символы, как < или &.

В XHTML элементы script и style объявлены как имеющие содержимое #PCDATA. В результате, < и & будут рассматриваться как начало разметки, а объекты, такие как < и &, будут распознаваться процессором XML как ссылки на < и & соответственно. Это может вызвать проблемы рендеринга в веб-браузерах.

Обтекание содержимого скрипта или элемента стиля внутри раздела, помеченного CDATA, позволяет избежать расширения этих объектов. Но, поскольку документ также может быть проанализирован анализаторами HTML, которые не распознают маркеры CDATA, маркеры CDATA обычно закомментированы, как в этом примере JavaScript:

<script type="text/javascript">
//<![CDATA[
document.write("<, &, >");
//]]>
</script>

Или этот CSS-пример:

<style type="text/css">
/*<![CDATA[*/
body { background: url("sky.jpg?width=500&height=300") no-repeat; }
/*]]>*/
</style>

Руководство по XHTML