В чем разница между html и xhtml. Что такое XHTML? Должна соблюдаться правильная вложенность тегов

Развитие HTML в определенном смысле зашло в тупик - новые теги уже не нужны, поскольку хватает существующих, к тому же акцент разработки веб-страниц сместился на стили, которые расширяют возможности по оформлению документов. Естественно, CSS никак не подменяет HTML, но зато позволяет использовать ограниченный набор тегов, а вид элементов, их положение и различные параметры, задавать через стили.

Определенным ограничением HTML является и то, что он относится к формальным языкам, в том смысле, что теги и их иерархическая структура жестко описаны в спецификации. Поэтому популярность набирает XML, с помощью которого можно создавать собственные теги и формировать их структуру. Разница между HTML и XML состоит не только в тегах, но и правилах написания кода. Браузер при работе с HTML «закрывает глаза» на разные мелкие огрехи и недочеты в структуре или тому, что не корректно указан атрибут. С XML такие фокусы не проходят, поэтому браузер выдаст ошибку о том, что документ неверно сформирован.

Чтобы научить разработчиков «правильному» мышлению, изменить их стиль написания кода, а также сократить разрыв между HTML и XML, и был разработан XHTML, как промежуточный этап между ними.

XHTML (EXtensible HyperText Markup Language, расширяемый язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Вообще, W3C определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит. Так ли это будет обстоять на самом деле, покажет только время.

Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить с программой, которая не будет скомпилирована до тех пор, пока все ошибки не исправлены. Браузер выступает в роли компилятора и не отображает документ, если он не соответствует спецификации. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к «идеальному» коду. Это позволяет делать сайты независимыми от устройства отображения и браузера. Иными словами, сайт будет корректно показываться во всех современных браузерах и платформах вроде компьютеров, смартфонов, КПК, нетбуках и др.

На деле все обстоит более приземленно. Разработчики браузеров не могут позволить себе, чтобы их детище работало только с «правильным» кодом. А все из-за того, что большая часть сайтов в мире просто не будет отображаться в таком браузере. Виноваты в таком положении вещей и разработчики и пользователи. Первые не обеспечили должную поддержку спецификации в своих браузерах, а вторые не потрудились ей следовать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правила XHTML следующие.

  • Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
  • Значения любых атрибутов необходимо заключать в кавычки.
  • Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
  • Должна соблюдаться правильная вложенность тегов.
  • Нельзя использовать сокращенные атрибуты тегов.
  • Вместо атрибута name следует указывать id .
  • Следует определять DTD (document type definition, описание типа документа) с помощью элемента .
  • Теги должны быть набраны в нижнем регистре

    Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги и различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их атрибуты в нижнем регистре. В примере 3.1 приводится неверное использование тегов.

    Пример 3.1. Ошибочное написание тегов

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    Lorem ipsum dolor sit amet...

    В данном примере теги и

    Набраны прописными символами, что является ошибкой. В примере 3.2 показан корректный код.

    Пример 3.2. Правильное написание тегов

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    Lorem ipsum dolor sit amet...

    Значения любых атрибутов необходимо заключать в кавычки

    Хотя в HTML также требуется заключать значения в кавычки, но их отсутствие никак не влияет на корректность кода. Так что можно сказать, что в HTML применение кавычек это лишь рекомендация. В XHTML же использование кавычек возведено в правило и любые значения атрибутов требуется указывать только в них (пример 3.3).

    Пример 3.3. Использование кавычек

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    Чебурашка Шапокляк
    1 5
    4 13

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

    , а также задаются в кавычках.

    Требуется закрывать все теги

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

    .

    Пример 3.4. Нет закрывающего тега

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    и лезет, крадучись, в самолёт,

    и бомбу в брюхо ему кладёт,

    Некоторые разработчики игнорируют закрывающие теги ,

    , , но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное использование списков.

    Пример 3.5. Добавление списка

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    • Восток
    • Запад
    • Юг
    • Север

    В данном примере каждому открывающему тегу соответствует его закрывающий тег.

    Элемент не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.

    Что касается одинарных тегов, то они должны завершаться слэшем перед закрывающей угловой скобкой, как показано в примере 3.6.

    Пример 3.6. Добавление изображения

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    В данном примере обратите внимание на обязательный пробел, который предшествует конструкции /> .

    В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.

    Должна соблюдаться правильная вложенность тегов

    XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.

    Правильная вложенность тегов

    Каждый тег должен располагаться внутри другого тега, при этом недопустимо их «пересечение», как это показано в примере 3.7.

    Пример 3.7. Ошибка с положением тегов

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    Lorem ipsum dolor sit amet...

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

    Хотя валидатор кода и выдает ошибку в случае неправильного положения тегов, браузеры при этом правильно отображают веб-страницу.

    Иерархия тегов

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

    Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В примере 3.8 показана базовая структура документа.

    Пример 3.8. Структура документа

    XHTML 1.0 IE Cr Op Sa Fx

    Новый документ

    В данном примере вначале приводится тег , внутри которого располагаются теги и . Внутри раздела хранится заголовок документа ( ) и кодировка страницы ( ).

    Нельзя использовать сокращенные атрибуты тегов

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

    Пример 3.9. Ошибка при использовании атрибутов

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    «Пустое значение», как еще называется подобная ошибка, легко исправляется, если присвоить атрибуту значение, совпадающее с названием. В табл. 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. Правильное использование атрибутов

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    Вместо атрибута name необходимо указывать id

    Атрибут name определяется в HTML для тегов , , , и и предназначен для обозначения элемента с целью последующего к нему обращения из скриптов. В XHTML атрибут name частично вышел из употребления, а вместо него следует использовать id , как показано в примере 3.11.

    Пример 3.11. Идентификатор рисунка

    XHTML 1.0 IE Cr Op Sa Fx

    XHTML

    Указанное правило не применяется к элементам форм, вроде , где без атрибута name вообще не обойтись.

    Следует определять DTD

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

    13.2. Отличие XHTML от HTML

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

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

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

    Однако в языке XHTML это считается ошибкой. Следует писать так:

    Хотя это и кажется избыточным, но выполнение такого правила обязательно.

    Необходимо наличие закрывающего тега

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

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

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

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

    То же самое касается и пустых элементов. Каждый тег такого элемента должен иметь как открывающий, так и закрывающий тег, например тег обрыва строки теперь должен писаться так:

    , иначе строка разорвана не будет. К счастью, в этом случае допускается запись
    , то есть перед завершающей угловой скобкой следует поместить наклонную черту. Если же у тега есть атрибуты, то угловая черта пишется после них, например .

    Необходимо корректно вкладывать элементы друг в друга

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

    …форматируемый текст…

    Этот пример корректен. Однако если мы напишем так:

    …форматируемый текст…

    то нарушим требования HTML. Тем не менее эти и им подобные требования не всегда выполнялись разработчиками, и «добрые» браузеры обычно корректировали такие нарушения кода. Однако стандарт XHTML запрещает подобные нарушения. Кроме того, XHTML запрещает следующие вложения:

    Тег не может содержать теги ;

    Тег не может содержать теги , , , , , , , , ;

    Тег не может содержать другой тег ;

    Тег не может содержать другие теги ;

    Тег Не может содержать теги , , , , , .

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

    Назначение имен тегов и атрибутов зависит от регистра

    В документах HTML имена тегов и атрибутов не зависят от регистра символов, так что, например, запись

    ,
    или
    означает один и тот же тег таблицы. Однако в XHTML это разные теги. То же самое касается имен атрибутов: записи типа width или WiDtZ в XHTML уже не означают имя атрибута, задающего ширину, например, ячейки таблицы или рисунка.

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

    Требуется явно задавать значения атрибутов

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

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

          Таблица 13.1. Значения атрибутов XHTML, для которых HTML не требовал значений

          Включение сценариев и специальных символов в документы XHTML

          В документы HTML сценарии встраиваются с помощью комментариев, то есть коды сценариев помещаются внутрь объявлений комментария:

          …Код сценария JavaScript или таблицы CSS….

          В них же помещают объявления таблиц CSS, что позволяет избежать конфликтов, если браузер не поддерживает эти средства. Однако браузеры XML не воспринимают содержимое комментариев и требуют использования таких конструкций, содержащих тег CDATA языка XML:

          …код сценария JavaScript...

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

          Все специальные символы в документы XHTML следует записывать с помощью ссылок, то есть вместо записи следует написать

          На заметку, чтобы не забыть о различии между HTML и XHTML .

          И так, HTML и XHTML - это особые форматы разметки веб-страниц которые “понимает” браузер.

          Далее немного теории о HTML и XHTML и список некоторых различий между ними…

          HTML (от англ. HyperText Markup Language - “язык разметки гипертекста”) - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
          HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

          HTML - это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками - тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
          ). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства.

          Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML .
          Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

          XHTML (англ. Extensible Hypertext Markup Language - Расширяемый язык разметки гипертекста) - язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 31 мая 2001 года.

          Валидным (т. е. отвечающим всем правилам) XHTML-документом считается документ, удовлетворяющий технической спецификации. В идеале, все браузеры должны следовать веб-стандартам и, в соответствии с ними, валидные документы должны отображаться во всех браузерах на всех платформах. Валидация XHTML-документа рекомендована даже несмотря на то, что она не гарантирует кросс-браузерности. Документ может быть проверен на соответствие спецификации с помощью онлайновой cлужбы валидации разметки W3C. Валидация обнаружит и разъяснит ошибки в XHTML-разметке.

          Различия между XHTML и HTML
          - Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега
          (например, или
          ) должны иметь на конце / (например,
          ).

          Булевы атрибуты записываются в развёрнутой форме. Например, следует писать или .

          Имена тегов и атрибутов должны быть записаны строчными буквами (например, alt="" /> вместо ).

          XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL,
          должны замещаться < и & соответственно. По рекомендации W3C браузеры,
          встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для
          HTML браузеры должны были попытаться понять, что хотел сказать автор.
          - Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по
          умолчанию является ISO 8859-1).

          Для XHTML страниц рекомендуется задавать MIME-тип - application/xhtml+xml, но
          это не является обязательным, более того - браузер Internet Explorer 8 и младшие
          версии, не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно
          используется MIME-тип для HTML - text/html.

          Также стандарт рекомендует указание перед
          DTD, но это не обязательно, более того - браузер Internet Explorer воспринимает
          такое указание (как и любой другой текст перед ), как признак того,
          что данную страницу необходимо отображать в режиме обратной совместимости, а не
          согласно стандарту. Существует три типа документов XHTML: strict, transitional и
          frameset. Наиболее употребительной и универсальной из версий XHTML является
          переходная (англ. transitional), поскольку она позволяет использовать iframe
          (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок
          (для указания того, например, что ссылке необходимо открываться в новом окне).
          Фреймовая версия (англ. frameset) представляет собой расширенный вариант
          transitional, добавляя к нему, как следует из названия, возможность установки
          frameset вместо body. DTD строгой версии XHTML (англ. strict) не содержит многих
          тегов и атрибутов, описанных в DTD transitional, и признанных устаревшими.

          Спасибо http://ru.wikipedia.org/



          Есть вопросы?

          Сообщить об опечатке

          Текст, который будет отправлен нашим редакторам: