Отличия XHTML от HTML

Далее в данной главе будут приведены все существующие отличия XHTML от HTML.

Все XHTML элементы должны иметь конечный тэг

Все XHTML элементы должны иметь конечный тэг.

Неправильно размеченный документ:

Это первый абзац. Этот первый заголовок.

Правильно размеченный документ:

Это первый абзац. Этот первый заголовок. 

Элементы с пустым содержимым должны иметь вложенный конечный тэг.

Неправильно размеченный документ:

Это первый абзац

---

Правильно размеченный документ:

Это первый абзац 
 
  

Названия тэгов в XHTML должны быть написаны строчными буквами

Названия тэгов в XHTML должны быть написаны строчными буквами.

Неправильно размеченный документ:

  
Это первый абзац
 
Это второй абзац
 

Правильно размеченный документ:

hr /> p> Это первый абзац p> p> Это второй абзац p>

Все XHTML элементы должны быть корректно вложены в друг друга

Неправильно размеченный документ:

Текст этого абзаца написан курсивным шрифтом.
 

Правильно размеченный документ:

Текст этого элемента написан курсивным шрифтом.
  

Содержимое всех XHTML атрибутов должно быть заключено в кавычки, а их имена должны быть написаны строчными буквами

Неправильно размеченный документ:

Правильно размеченный документ:

src="hello.jpg" /> 
id="par1"> Это первый параграф
 
class="head1"> Это первый заголовок
 

Логические атрибуты в XHTML нельзя сокращать

Неправильно размеченный документ:

Правильно размеченный документ:

="checked"> ="readonly"> ="disabled"> ="selected">

Сделайте сами

Задание 1 сделайте код HTML документа XHTML совместимым. После того, как код будет переписан проверьте его с помощью Валидатора W3C.

• рыночную
• административно-командную
• традиционную
• смешанную

Сравнение HTML и XHTML

И HTML , и XHTML — это языки для создания веб-страниц. HTML построен на основе SGML, а XHTML — на основе XML. Они похожи на две стороны одной медали. XHTML был создан из HTML с целью соответствия стандартам XML . Следовательно, XHTML является более строгим по сравнению с HTML и не позволяет отступать от правил написания кода.

Причиной разработки XHTML послужила путаница с некоторыми тегами. Страницы, написанные на HTML , выводились в разных браузерах по-разному.

Сравнительная таблица

HTML	XHTML
Определение (из Википедии)	HTML или HyperText Markup Language — это основной язык разметки для создания веб-страниц и других документов, которые могут быть просмотрены в браузере.	XHTML (Extensible HyperText Markup Language) — это семейство языков XML-разметки, которые продолжают и расширяют Hypertext Markup Language (HTML), на котором написаны веб-страницы.
Расширения файлов	.html, .htm.	.xhtml, .xht, .xml, .html, .htm.
Формат использования	текст/html.	приложение/xhtml+xml.
Разработан	W3C и WHATWG.	World Wide Web Consortium.
Тип формата	Формат документов.	Язык разметки.
Расширен из	SGML.	XML, HTML.
Расшифровка	Язык разметки гипертекста.	Расширяемый язык разметки гипертекста.
Приложение	Приложение Standard Generalized Markup Language (SGML).	Приложение XML.
Функции	Веб-страницы написаны на HTML.	Расширенная версия HTML, более строгая, основанная на XML.
Поведение	Гибкие фреймворки не требуют анализа синтаксиса HTML.	Ограничен правилами XML и требует их соблюдения.
Происхождение	Предложен Тимом Бернерсом-Ли в 1987 году.	Рекомендация World Wide Web Consortium 2000 года.
Версии	HTML 2, HTML 3.2, HTML 4.0, HTML 5.	XHTML 1, XHTML 1.1, XHTML 2, XHTML 5.

Обзор HTML и XHTML

HTML является основным языком разметки веб-страниц. Он создает структурированные документы, выделяя в них такие элементы, как заголовки, списки, ссылки, цитаты и т.д. Это позволяет встраивать изображения и объекты для создания интерактивных форм. HTML задается с помощью тегов в угловых скобках — например, . Также в его коде могут содержаться скрипты, написанные на JavaScript .

XHTML представляет собой семейство языков XML , которые расширяют или продолжают версии HTML . Они не допускают пропусков любых тегов или минимизации атрибутов. XHTML требует, чтобы каждому открывающемуся тегу соответствовал закрывающийся тег в корректном порядке. Например, если в языке гипертекста допускается использование одиночного тега
, то в XHTML в отличие от HTML нужно написать тег
. В этом и заключается отличие.

Функции документов HTML и XHTML

Синтаксис HTML состоит из следующих компонентов: открывающий и закрывающий тег, атрибуты элементов ( задаваемые в тегах ), текстовый и графический контент. HTML-элемент — это все, что находится между тегами, включая сами теги.

Документ XHTML содержит только один корневой элемент. Все элементы, включая переменные, должны быть написаны в нижнем регистре, а присвоенные значения — заключены в кавычки, закрыты и вложены. В XHTML это является обязательным требованием — в отличие от HTML . Объявление DOCTYPE XHTML определяет правила для документов, которым необходимо следовать.

Основной синтаксис HTML допускает использование множества сокращений, чего не допускается в XHTML . Например, элементов, для которых необязательно наличие и открывающегося, и закрывающегося тега. XHTML требует, чтобы все элементы имели и открывающийся, и закрывающийся тег. В то же время XHTML вводит новые сокращения: тег XHTML может быть открыт и закрыт с помощью косой черты (
).

Введение такого синтаксиса, который не используется в объявлениях SGML для HTML 4.01 , могло привести к путанице в приложениях на ранних стадиях. Чтобы решить эту проблему, нужно использовать пробел перед закрытием тега:
.

Спецификация XHTML и HTML

HTML и XHTML могут быть задокументированы совместно. И HTML 4.01 , и XHTML 1.0 имеют три подспецификации — строгую, нестрогую и фрэймовую. Отличие документов HTML и XHTML заключается в декларировании документов. Другие отличия синтаксические. HTML допускает отсутствие закрывающегося тега, пустые элементы без закрывающегося тега. Расширяемый язык разметки гипертекста очень строг в отношении открывающихся и закрывающихся тегов XHTML . Он использует встроенный язык определения функционала атрибутов. Все требования к синтаксису XML соблюдаются в XHTML -документе.

Но эти различия проявляются только тогда, когда XHTML -документ используется как приложение XML ; то есть как MIME-типы приложение / XHTML + XML , приложение / XML или текст / XML . Документ XHTML , используемый как MIME-тип текст / HTML должен интерпретироваться как HTML , так что в данном случае применяются правила HTML . CSS , написанный для XHTML , используемого, как MIME-тип текст / HTML , может работать некорректно в документе, который применяется как, как MIME-тип приложение / XHTML + XML . Для получения дополнительной информации о MIME-типах ознакомьтесь с соответствующей документацией.

Это может быть важно, когда вы используете документы XHTML , как текст / HTML . Если не знать о данных различиях, вы можете создать CSS , который не будут работать как ожидается, если документ используется, как XHTML .

Там, где встречаются термины » XHTML » и » XHTML document «, предполагается, что в оставшейся части этого раздела они определяют использование разметки XHTML , как MIME-тип XML . XHTML-разметка , используемая в качестве текста / HTML , является HTML-документом .

Как перейти с HTML на XHTML

В соответствии с рекомендациями W3C для перехода с HTML на XHTML ( документы XHTML 1.0 ) должны быть выполнены следующие шаги:

• Включите атрибуты xml:lang и lang для элементов, устанавливающих язык;
• Используйте синтаксис пустого элемента для элементов, указанных в HTML , как пустые;
• Используйте дополнительный пробел в тегах пустых элементов: ;
• Используйте закрывающиеся теги для элементов, которые могут содержать контент, но являются пустыми: ;
• Не включайте объявление XML .

Если следовать рекомендациям W3C по совместимости, то браузер должен уметь интерпретировать документы как HTML , так и XHTML .

Чтобы понять, чем отличается HTML от XHTML , рассмотрим преобразование документа XHTML 1.0 в HTML 4.01 . Для этого необходимо выполнить следующие действия:

• Язык для элемента должен быть указан с помощью атрибута lang , а не атрибута XHTML xml:lang ;
• Удалите пространство имен XML ( xmlns=URI ). HTML не имеет средств для работы с пространствами имен;
• Измените объявление типа документа с XHTML 1.0 на HTML 4.01 ;
• Удалить объявление XML , если оно присутствует. Как правило, это: ;
• Убедитесь в том, что для MIME-типа документа задано: text/html . И в HTML , и в XHTML , это задается в HTTP-заголовке Content-Type , отправляемом сервером;
• Измените синтаксис пустого элемента XML на стиль пустого элемента HTML (с
  на
  ).

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

При выборе DOCTYPE необходимо чётко определиться, какой из двух стандартов выбрать: HTML или XHTML. И для облегчения Вашего выбора я решил разобрать разницу между HTML и XHTML.

Главное отличие между HTML и XHTML в том, что XHTML основан на синтаксисе XML. А, следовательно, он более строгий, и в нём нельзя допускать тех вольностей, которые можно допустить в HTML.

А теперь по пунктам разберём особенности синтаксиса XHTML:

1. Каждый тег должен закрываться

Парные теги должны закрываться и в HTML тоже, но все мы знаем, что в HTML существует множество одиночных тегов (например, img>), и мы смело могли написать таким образом:

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

Разница только в слеше перед второй угловой скобкой.

2. Все спецсимволы должны быть заменены на сущности

То есть нельзя писать вот так: «&«, нужно писать этот символ только сущностью, то есть «&«. В HTML подобного правила не существует.

3. Все значения атрибутов должны быть в кавычках.

Все мы с Вами знаем, что в HTML можно написать вот так:

То есть у нас значение атрибута «width» находится без кавычек. В XHTML это недопустимо, и там надо писать вот так:

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

Скажу честно, я никогда не понимал, зачем люди пишут теги в верхнем регистре. На мой взгляд, это уродует код, и возникает ощущение, что его писали не отжимая «CAPSLOCK«. Но если в HTML — это дело вкуса, то в XHTML — это правило: писать только в нижнем регистре.

Как видите, разница только в синтаксисе. Есть также и другие мелкие различия, но мы о них говорить не будем. Другими словами, единственное преимущество XHTML — это более лёгкий парсинг документа. А также XHTML очень подходит любителям «чистого» кода. Больше никаких преимуществ нет. Все браузеры корректно отображают и HTML, и XHTML. Причём зачастую браузеры XHTML обрабатывают как HTML, поэтому для внешнего вида серьёзных различий в HTML и XHTML точно не будет.

Я для себя выбрал XHTML, потому что я очень люблю, когда код «чистый» и когда он легко разбирается на составные части (парсинг). Да, и вообще я привык к строгому синтаксису других языков, например, Java, поэтому всё равно я буду писать максимально валидно. А что выберите Вы — решать только Вам, а об отличиях HTML и XHTML Вы уже знаете.

Создано 25.01.2011 13:59:48

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 13 ):

mms 23.12.2012 05:13:49

Спасибо познавательно и самое главное бес воды! Подскажите Михаил что лучше XHTML 1.0 и XHTML 1.1 Делаю дизайн для XHTML 1.0 остановился на пол пути и сомневаюсь.

Admin 23.12.2012 10:50:10

Я предпочитаю XHTML 1.1, как более новый стандарт.

mms 23.12.2012 16:36:16

Что посоветуешь переписать на XHTML 1.1? А с точи зрения поисковик систем? Ты верстаешь dle движки?

Admin 23.12.2012 17:09:42

Необязательно. Поисковым системам всё равно, какой там стандарт. С готовыми движками вообще не работаю уже давно.

mms 23.12.2012 17:11:11

Что посоветуешь переписать на XHTML 1.1?

Admin 23.12.2012 17:33:39

Необязательно, особой разницы нет.

Strateg 17.06.2013 23:37:31

И это все основные различия?? Хм. Не совсем понятны минусы XHTML? И почему бы тогда все страницы не верстать на нем? Ведь получается, что простой HTML-4 несколько хуже во по всем параметрам за XHTML.

pavell 25.06.2013 22:28:01

Если это вся разница тогда лучше xhtml я итак в нижнем регситре пишу. А ставить слеш на конце не так-уж трудно. А лутше он потому что не такой вольный по началу думал что это + в html его вольность но когда начал писать сайт и проверять на кросс браузерность то пошли проблемы из-за этого. И Валидный код легче будет сделать а чем больше код валидный тем правильней отображается страница если не ошибаюсь.

pavell 25.06.2013 22:40:08

1 только проблема чтоб поставить кавычки надо раскладку менять на русский. Можно как-то настроить чтоб кавычки на английской раскладке ставились. А то ведь так времени куча уходит на смену языка даж горячими клавишами код та длинный.

Admin 26.06.2013 03:47:00

Кавычки ставятся на английской раскладке: ctrl+э.

Обслуживание HTML и XHTML

В этой статье очень кратко описываются некоторые аспекты того, как XHTML посылается с сервера до клиентского приложения (например, в браузер), и как распространенные клиентские приложения обрабатывают ту разметку, которую они получают. Статья описывает решение конкретных проблем, а не стандарты W3C.

Эти вопросы имеют отношение к тому как назначить кодировку HTML или XHTML документа. Эта информация будет также полезна при объяснении того, почему некоторые аспекты стилизации CSS не появляются такими, как их ожидают, или почему они отличаются в различных клиентских приложениях.

MIME типы

Когда сервер обслуживает (то есть отправляет) документ браузеру, он также с документом посылает некоторую дополнительную информацию, которая называется HTTP заголовком.

Поле Content-Type заголовка HTTP описывает, какой это тип формата данных. Эта информация выражается с помощью пометки (MIME медиа тип). Вот пример HTTP заголовка для HTML файла, используя MIME тип text/html . Обратите внимание, что запись Content-Type также может выражать кодировку символов документа.

HTTP/1.1 200 OK Date: Wed, 05 Nov 2003 10:46:04 GMT Server: Apache/1.3.28 (Unix) PHP/4.2.3 Content-Location: CSS2-REC.en.html Vary: negotiate,accept-language,accept-charset TCN: choice P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml Cache-Control: max-age=21600 Expires: Wed, 05 Nov 2003 16:46:04 GMT Last-Modified: Tue, 12 May 1998 22:18:49 GMT ETag: "3558cac9;36f99e2b" Accept-Ranges: bytes Content-Length: 10734 Connection: close Content-Type: text/html; charset=utf-8 Content-Language: en

MIME тип text/html является нормальным выбором для HTML файлов. Браузер который получает файл с этим MIME типом будем считать, что разметка наследует синтаксис HTML и будет использовать анализатор (парсер) HTML для того, чтобы интерпретировать значение разметки.

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

Для отправки в браузер разметки XHTML с MIME типом, указывающим, что это XML вы должны использовать один из следующих MIME типов: application/xhtml+xml , application/xml или text/xml . W3C рекомендует, чтобы вы обслуживали XHTML как XML используя только первый из этих MIME типов — то есть application/xhtml+xml .

Когда браузер читает XML он использует XML анализатор (парсер), а не HTML анализатор (парсер).

К сожалению, Internet Explorer до 8-й версии не поддерживает файлы, которые обслуживаются, как XML, пусть и ряд других браузеров поддерживают. Чтобы обойти тот факт, что не все браузеры поддерживают контент, который обслуговуютеся как XML, сейчас много XHTML файлов обслуживаются с использованием такого MIME типа, как text/html . В этом случае, клиентское приложение будет читать файл, как будто это HTML файл, а также будет использовать анализатор (парсер) HTML.

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

Appendix C с XHTML спецификации предоставляет немного информации, по обеспечению совместимости при обслуживании XHTML как HTML. Эта информация, по обеспечению совместимости особенно важна для устаревших версий браузеров. Между прочим они рекомендуют, чтобы вы оставляли пробел перед ‘/>’ в конце пустого тэга (как например img , hr или br ), чтобы вы использовали HTML атрибут lang , а также XML атрибут xml:lang , чтобы вы всегда использовать оба атрибуты id и name для идентификаторов фрагмента и т.д.

Режим ‘Standards’ или ‘Quirks’

Современные основные браузеры могут отображать HTML файл как в так и в . Это означает, что для отображения файла применяются различные правила: одно отвечает интерпретации ожидаемого поведения в соответствии со стандартами W3C, другое — ожиданиям, основанным на нестандартном поведении старых браузеров.

В последних версиях основных браузеров, режим standards включен за счет наличия . Отсутствие DOCTYPE может привести к различной выдачи в разных браузерах.

Нижеприведенные снимки экрана иллюстрируют некоторые из этих различий.

Нажмите на картинку, чтобы увидеть фактическую HTML страницу. Если вы просматриваете эту страницу в Internet Explorer, то вы увидите такой же эффект.

Две картины показывают две страницы с одинаковой разметкой и CSS стилизацией, за исключением одной вещи. Единственное отличие между этими двумя файлами — изображение, находящееся слева имеет тэг DOCTYPE в верхней части, а другое изображение его не имеет. Файл с соответствующим назначением DOCTYPE, в последних версиях большинства браузеров, как правило, отображается в режиме standards. При отсутствии DOCTYPE, вы получите режим quirks.

Показанные выше внешние отличия вытекают из следующих отличий в реализации такого браузера, как Internet Explorer:

• В режиме standards настройки ширины CSS, которые применяется к тэге div не охватывают ни один набор ширин для настроек отступов (padding) и границ (border), в то время как в режиме quirks охватывают — именно поэтому большое окно на левой картинке (режим standards) шире.
• В режиме quirks таблица не наследует настройки размера шрифта от элемента body, поэтому текст выглядит большим.

Первоначальная цель использования DOCTYPE — указание определение языка разметки. Ниже приведен исходный текст с назначением DOCTYPE в верхней части (что выделено красным курсивом).

    body < background: white; color: black; font-family: arial, sans-serif; font-size: 12px; >p < font-size: 100%; >h1 < font-size: 16px; >div < margin: 20px; width: 170px; padding: 50px; border: 6px solid teal; >table 
Тестовый файл для режимов Standards/Quirks
 
Тэг div из CSS width:170px, margin:20px, padding:50px and border:6px.
 
Текст в элементе p.
 
Текст в таблице.
 
   

Браузеры, которые таким образом меняют режимы standards и quirks часто предлагают сделать .

Как правило, это очень хорошо всегда обслуживать вашу страницу в режиме standards — то есть всегда включать назначения DOCTYPE.

Назначения XML и DOCTYPEs

Существует один аспект использования DOCTYPEs, что особенно важно для назначения кодировки символов и предполагаемых результатов моделирования.

Поскольку XHTML 1.0 основана на XML, то XML назначение можно добавить в начале разметки, даже если она обслуживается как HTML. Это сделало бы верхнюю часть вышеприведенного файла, похожим на это (XML назначение выделяется красным курсивом):

В таких браузерах, как Internet Explorer 7, Firefox, Safari, Opera, Google Chrome, и других, с или без XML назначения, страница, обслуживаемая с назначением DOCTYPE будет отображаться в режиме standards.

Однако, в Internet Explorer 6, если перед назначением DOCTYPE не появляется ничего, кроме byte-order mark (метки порядка байтов), то страница отображается в режиме quirks.

Если пользователи Internet Explorer 6 и до сих пор являются в значительной частью вашей целевой аудитории, то это может быть проблемой. Если вы хотите убедиться, что ваши страницы в Internet Explorer 6 отображаются так же, как и во всех других standards-compliant (совместимых стандарту) браузерах, то вы должны тщательно подумать над тем, как вам с этим справиться.

Очевидно, что это не является проблемой, когда документ не содержит никаких конструкций, которые зависят от разницы между режимами standards и quirks. Кроме того, если это не так, то для преодоления различий вам придется добавить обходные пути к вашей CSS, или пропустить XML назначения.

Отметим, что если вы примете решение пропустить XML назначение, то в качестве кодировки страницы вы должны выбрать или UTF-8 или UTF-16. (Дополнительные сведения о влиянии на назначения кодировки смотрите Назначение кодировки символов в HTML .)

Дополнительные материалы

• Медиа Типы XHTML
• XHTML™ 1.0 Расширяемый Язык Разметки Гипертекста , C. HTML Руководство Совместимости
• Список действительных DTDs (Определений Типов Документа), которые вы можете использовать в документе
• Переключение Doctype в Internet Explorer
• Совместимость Каскадных Таблиц Стилей с Internet Explorer 7
• Переключение Doctype в Mozilla
• Переключение Doctype в Opera
• Пособие – Обработка кодировок символов в HTML и CSS