Статьи

XHTML 2.0 и HTML 5 Разница в деталях

Обзор XHTML 2.0

XHTML 2.0 основан исключительно на XML, исключая наследие SGML и особенности синтаксиса, присутствующие в текущей веб-разметке. Предполагается, что XHTML 2.0 является «языком общего назначения» с минимальным набором функций по умолчанию, который легко расширить с помощью CSS и других технологий (XForms, XML Events и т. Д.). Это модульный подход, который позволяет группе XHTML2 сосредоточиться на общей разметке документов, в то время как другие разрабатывают механизмы для представления, интерактивности, построения документов и т. Д.

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

Обзор HTML 5

Хотя XHTML 2.0 стремится быть революционным, рабочая группа HTML выбрала более прагматичный подход и разработала HTML 5 как эволюционную технологию. То есть HTML 5 — это шаг вперед, который в основном остается совместимым с текущими стандартами HTML 4 / XHTML 1. Тем не менее, HTML 5 предлагает множество изменений и расширений HTML 4 / XHTML 1, которые устраняют многие недостатки в этих более ранних спецификациях.

HTML 5 — это удаление HTML от разметки документа и превращение его в язык для веб-приложений. С этой целью большая часть спецификации посвящена созданию более надежной, полнофункциональной клиентской среды для разработки веб-приложений путем предоставления различных API. Помимо прочего, в спецификации предусмотрено, что соответствующие реализации должны предоставлять постоянное хранилище на стороне клиента (как хранилище ключей / значений, так и механизмы хранения SQL), API-интерфейсы воспроизведения аудио и видео, двухмерное рисование через элемент canvas, обмен сообщениями между документами, отправленные сервером события. и сетевой API.

Спецификация HTML 5 поддерживает SGML-подобный синтаксис, который совместим с текущими спецификациями HTML (хотя некоторые из более эзотерических функций SGML больше не поддерживаются). Также в спецификацию включена вторая «Сериализация XML», которая позволяет разработчикам также предоставлять действительные документы XML. Опять же, поддерживая SGML-подобную сериализацию, рабочая группа HTML 5 достигла баланса между прагматизмом и прогрессом. Разработчики могут выбрать разметку контента с использованием либо сериализации HTML (которая больше похожа на HTML 4.x), либо сериализации XML (которая больше похожа на XHTML 1.x).

Подобные функции

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

Удаление презентационных элементов

Ряд элементов был удален как из XHTML 2.0, так и из HTML 5, поскольку они считаются чисто презентационными. Консенсус заключается в том, что презентация должна обрабатываться с использованием таблиц стилей.

Документы HTML 5 и XHTML 2.0 не могут содержать следующие элементы: basefont, big, font, s, strike, tt и u. XHTML 2.0 также удаляет элементы small, b, i и hr, в то время как HTML 5 переопределяет их с помощью непрезентационных значений. В XHTML 2.0 элемент hr был заменен разделителем в попытке уменьшить путаницу (поскольку элемент hr, который обозначает горизонтальное правило, не обязательно является одной из этих вещей).

Списки навигации

Списки навигации были введены как в XHTML 2.0, так и в HTML 5. В XHTML 2.0 навигация размечается с использованием нового элемента nl. Списки навигации должны начинаться с дочернего элемента метки, который определяет заголовок списка. После заголовка один или несколько элементов li используются для разметки ссылок. Также новым в XHTML 2.0 является возможность создавать гиперссылки из любого элемента, используя атрибут href. Сочетание этих функций обеспечивает простую и легкую навигационную разметку:

<nl>
<label>Category</label>
<li href="/">All</li>
<li href="/news">News</li>
<li href="/videos">Videos</li>
<li href="/images">Images</li>
</nl>

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

<nav>
<h1>Category</h1>
<ul>
<li><a href="/">All</a></li>
<li><a href="/news">News</a></li>
<li><a href="/videos">Videos</a></li>
<li><a href="/images">Images</a></li>
</ul>
</nav>

Расширенные формы

Обе спецификации имеют новые функции для создания более надежных, согласованных форм с меньшим количеством сценариев. В XHTML 2.0 стандартные формы HTML полностью отброшены в пользу более всеобъемлющего стандарта XForms. Рабочая группа XHTML2 не контролирует этот стандарт, а ссылается на него из спецификации XHTML 2.0. Чтобы облегчить повторное использование, XForms отделяет собираемые данные от разметки элементов управления. Это надежный и мощный язык, но полное описание выходит за рамки этого поста. Достаточно сказать, что веб-разработчики будут пытаться освоиться с этой технологией.

HTML 5 сохраняет привычные HTML-формы, но добавляет несколько новых типов данных для упрощения разработки и повышения удобства использования. В HTML 5 было введено несколько новых типов элементов ввода для адресов электронной почты, URL-адресов, дат и времени и числовых данных. Это позволит пользовательским агентам предоставлять более сложные пользовательские интерфейсы (например, средства выбора календарной даты), интегрироваться с другими приложениями (например, извлекать адреса из Outlook или адресной книги) и проверять вводимые пользователем данные перед отправкой данных на сервер (меньше на стороне клиента). проверка JavaScript).

Семантическая разметка

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

В XHTML 2.0 метаданные могут быть встроены с помощью нескольких новых глобальных атрибутов из модуля атрибутов метаинформации . В частности, новый глобальный атрибут роли предназначен для описания значения данного элемента в контексте документа. Технический термин — встраивание структурированных данных в веб-страницы. Опять же, группа использует существующий стандарт, ссылаясь на RDF. Технология чрезвычайно мощная, но она также сложная.

Рабочая группа HTML приняла подход, который больше напоминает микроформаты, перегружая атрибут класса предопределенным набором зарезервированных классов для представления различных типов данных. В настоящее время в спецификации перечислены семь зарезервированных классов: авторское право, ошибка, пример, проблема, примечание, поиск и предупреждение. Хотя такая перегрузка атрибута класса может сбивать с толку, маловероятно, что пользовательские агенты будут отображать элементы с этими классами по-разному. Имена классов достаточно специфичны, так что можно не беспокоиться: если для элемента установлен класс, защищенный авторским правом, это, вероятно, авторское право независимо от того, знал разработчик о зарезервированных классах или нет.
Только в HTML 5

В спецификации HTML 5 описано несколько новых функций, не имеющих аналогов в XHTML 2.0.

API веб-приложений

HTML 5 представляет несколько API, которые значительно улучшат среду веб-разработки на стороне клиента. Именно эти API и выделяют HTML 5 как предложение для технологического стека для веб-приложений, а не просто как язык разметки для документов. Следует отметить, что детали этих API разрабатываются рабочей группой Web API, поэтому они могут быть приняты с или без остальной части HTML 5. Новые API и соответствующие элементы:

    * API рисования 2D с использованием элемента canvas.
    * API для воспроизведения аудио и видео, поддерживающее возможность предлагать пользовательским агентам несколько форматов, которые можно использовать с новыми элементами видео и аудио.
    * Постоянное хранилище на стороне клиента с поддержкой баз данных ключ / значение и SQL.
    * API автономного веб-приложения (аналог Google Gears).
    * API, который позволяет веб-приложениям регистрировать себя для определенных протоколов или типов MIME.
    * API редактирования, который можно использовать в сочетании с глобальным атрибутом contenteditable.
    * API drag & drop, который можно использовать с атрибутом draggable.
    * Сетевой API, позволяющий веб-приложениям взаимодействовать по протоколу TCP.
    * API, который предоставляет историю браузера, позволяя приложениям добавлять в нее, чтобы они не ломали кнопку «назад».
    * API обмена сообщениями между документами.
    * Отправленные сервером события в сочетании с новым элементом источника-события.

Новые элементы

HTML 5 вводит несколько новых элементов, которых нет в XHTML 2.0:

    * цифра представляет изображение или графику с подписью. Вложенная легенда представляет заголовок, а для изображения используется обычный элемент img.
    * m представляет текст, который был помечен каким-либо образом. Например, его можно использовать для поиска по ключевым словам в итоговых документах.
    * время представляет собой дату и время.
    * метр представляет собой измерение.
    * datagrid представляет собой интерактивный список деревьев или табличные данные.
    * команда представляет команду, которую пользователь может вызвать.
    * event-source используется для «отлова» отправленных сервером событий.
    * output представляет некоторый тип вывода, например, из расчета, выполненного с помощью сценариев.
    * прогресс представляет собой завершение задачи, такой как загрузка или выполнение ряда дорогостоящих операций.

Кроме того, несколько новых элементов помогут семантически разметить части документа. Они довольно понятны: раздел, статья, верхний колонтитул, нижний колонтитул и в сторону. А новый элемент диалога предназначен для представления разговоров с использованием дочерних элементов dt для имени говорящего и элементов dd для текста.

Отслеживание пользователей с помощью пинг URI

Новый атрибут ping можно использовать для элементов a и area для отслеживания пользователя. Вместо того, чтобы использовать перенаправления или полагаться на javascript, атрибут ping позволяет вам указать разделенный пробелами список URI, которые должны пинговаться при переходе по гиперссылке.
Только в XHTML 2.0

Также следует отметить следующие новые функции, которые доступны только в XHTML 2.0.
Любой элемент может быть гиперссылкой

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

Любой элемент может быть изображением (или другим ресурсом)

В XHTML 2.0 элемент img был удален. Не беспокойтесь — любой элемент теперь может быть изображением. Идея состоит в том, что все изображения имеют «длинное описание», которое эквивалентно самому изображению. Помещая атрибут src в любой элемент, вы говорите пользовательскому агенту загрузить этот ресурс вместо элемента. Если по какой-либо причине ресурс недоступен, вместо него используется элемент. Это позволяет разработчикам предоставлять несколько эквивалентных ресурсов, используя разные форматы и представления файлов, вкладывая элементы друг в друга.
Линии заменяют разрывы строк

Почтенный элемент br, используемый для вставки разрывов строк, также был удален из XHTML 2.0. Новый элемент l вводится для его замены. l представляет строку текста и ведет себя как интервал, за которым следует br в сегодняшней разметке.

Новый заголовок Construct

Новые элементы h и section были введены для замены пронумерованных элементов от h1 до h6. Цель состоит в том, чтобы точно представить иерархическую структуру документа. Текущие пронумерованные заголовки являются линейными, а не вложенными. Благодаря вложенности раздела и h элементов в родительских разделах структура документа становится явной.

Новые элементы

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

    * blockcode представляет компьютерный код.
    * di представляет группу связанных терминов и определений в dl (список определений). Это полезно для слов с несколькими определениями или несколькими написаниями.
    * handler представляет обработчик событий со сценарием, с атрибутом type, определяющим язык обработчика. Если пользовательский агент не понимает язык, дочерние элементы обработчика обрабатываются (в противном случае они игнорируются). Обработчики могут быть вложенными для обеспечения нескольких реализаций на разных языках.

Вывод

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

Несмотря на позднее начало работы, рабочая группа по HTML 5, похоже, имеет большую поддержку отрасли и продолжает процесс рекомендаций. Их цель — получить полную спецификацию с множеством совместимых реализаций к концу 2010 года (хотя, как я уже говорил, W3C уже пропустил некоторые этапы процесса утверждения). Благодаря поддержке со стороны большинства основных производителей браузеров (единственным заметным исключением является Microsoft), вероятно, эта спецификация будет реализована быстро и последовательно после достижения стабильного состояния.

Чего все хотят избежать, так это очередной войны стандартов. К счастью, поскольку оба языка поддерживают пространства имен XML (или, в случае сериализации HTML 5, переключения DOCTYPE), маловероятно, что мы увидим поведение, зависящее от браузера, которое мы делали в 1990-х годах. За исключением войн за стандарты, будущее для веб-разработки выглядит блестящим. Эти новые функции разметки и API предоставят богатую среду для веб-разработки, которая должна сократить разрыв между веб-приложениями и приложениями для настольных компьютеров.

Статья первоначально была размещена Ашишем Найяром на: Mind Tree