Обзор HTML5 спецификации.

Перевод статьи:  A Preview of HTML5.
Автор:  Lachlan Hunt.

Данный пост содержит перевод статьи, которая в принципе не несет в себе ничего нового, но по-прежнему привлекает интерес влиятельных людей в сфере веб-разработки и поэтому все еще актуальна. В частности, на этот материал ссылается Люк Стивенс в своей книге «The Truth About HTML5», отредактированный фрагмент третьей главы которой уже переведен мной здесь. И для того, чтобы читатели смогли представить себе полную картину рассматриваемой Люком Стивенсом проблемы, я всё-таки решил сделать полный перевод статьи.

Введение.

Не секрет, что на данный момент Web находится в стадии интенсивного развития. Ежедневно создаётся множество новых инновационных веб-сайтов, которым уже довольно тесно в рамках текущего HTML стандарта. Так как HTML 4 является основной спецификацией уже на протяжении порядка десяти лет (*Статья написана в декабре 2007 года.), то разработчики, сдерживаемые ограничениями стандартов и кроссбраузерными барьерами, перешли к активному поиску новых технологий, позволяющих обеспечить повышенную функциональность их проектам.

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

Начавшиеся в 2004 году работы по созданию HTML5 спецификации на данный момент выполняются совместными усилиями двух рабочих групп — W3C по HTML и WHATWG. Консорциум W3C выносил свое решение, принимая во внимание мнение многих заинтересованных сторон, таких как представители четырех влиятельных разработчиков браузеров — Apple, Mozilla, Opera и Microsoft, а также ряда других организаций и личностей с различными интересами и опытом.

Имейте в виду, что спецификация находится в стадии разработки и до ее окончательной версии все еще далеко. Поэтому вполне возможно, что любая обсуждаемая в данной статье новая возможность может подвергнуться изменениям в будущем. Цель изложенного здесь материала – краткое ознакомление с основными нововведениями, находящимися в текущей редакции стандарта.

Структура.

Спецификация HTML5 вводит целый набор новых элементов, облегчающих процесс структуризации документов. Большинство веб-страниц, разрабатываемых в соответствии с HTML 4 стандартом, содержат множество общепринятых структурных компонентов, таких как шапка, подвал, колонки и т.п., которые на сегодняшний день принято реализовывать с помощью <div> элементов, назначая им при этом содержательные значения атрибутов идентификаторов id и/или имен классов class.

Изображение.

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

Такое широкое применение элементов <div> объясняется тем, что текущие версии HTML 4 стандарта не предусматривают необходимых семантических элементов, способных представить каждый из упомянутых в примере разделов.

Изображение.

Используемые ранее <div> элементы можно заменить на новые: <header>, <nav>, <section>, <article> и <footer>.

И в этом случае разметка приведенной в примере страницы будет выглядеть следующим образом:

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>

</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

*Именно эту часть данной статьи имеет в виду Люк Стивенс, когда говорит о неверном понимании спецификации.

Использование новых элементов дает нам некоторые преимущества. В том случае, если мы применяем их в комбинации с элементами заголовками, <h1> … <h6>, то это позволяет нам использовать более шести уровней заголовков, присутствующих в предыдущих версиях HTML, для разметки вложенных разделов (секций) документа. Новая спецификация предусматривает детальное руководство по формированию архитектуры документа, которая представлена структурой, образованной новыми секционными элементами и в тоже время поддерживает обратную совместимость с предыдущими версиями.

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

К примеру, в приведенном ниже фрагменте разметки используется вложенные <section> секции и заголовки первого уровня <h1>:

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

Для обеспечения совместимости с текущими версиями браузеров, вы также можете применять заголовки других уровней <h2> … <h6>, заменяя ими<h1> заголовки в соответствующих местах.

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

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

<header>

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

<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>

Элемент <footer> представляет подвальную часть секции документа, которой он принадлежит. Он, как правило, содержит авторскую информацию контента раздела, ссылки на тематические посты и т.п.:

<footer>© 2007 Example Inc.</footer>

Элемент <nav> предназначен для размещения навигационных ссылок. Он в равной степени подойдет как для навигации по сайту, так и для размещения содержания документа:

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>

<aside>

Элемент <aside> служит для представления информации, которая в той или иной степени соответствует тематике окружающего ее контента. Этот элемент очень удобен для реализации сайдбаров (боковых колонок):

<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>

<section>

Элемент <section> представляет собой общий раздел документа или приложения, такой как глава, к примеру:

<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
…</p>
</section>

(Отрывок из произведения «A Tale of Two Cities»)

<article>

Элемент <article> является независимой секцией документа, страницы или сайта в целом. Его удобно использовать для размещения такого контента как новости, блог посты, сообщения на форумах или индивидуальные комментарии:

<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O’Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</header>
<p>That’s another great article!</p>
</article>

Видео и аудио.

В Web среде последнее время все большую актуальность получают такие типы данных как видео и аудио. И множество подобных YouTube, Viddler, Revver и MySpace сайтов дают возможность любому пользователю Интернета без труда разместить в сети видео и аудио информацию. По причине того, что на данный момент стандарт HTML не располагает необходимыми средствами включения и управления медиа контентом, то большинство нынешних сайтов используют технологию Flash для обеспечения требуемой функциональности. Кроме того, существует возможность включения мультимедиа посредством плагинов (таких как QuickTime, Windows Media и другие). Но всё же именно Flash технология наиболее широко распространена и является кроссбраузерным решением, предоставляющим необходимый для разработчиков API.

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

И вновь представленные <video> и <audio> элементы значительно облегчают эту задачу. Большинство имеющихся API возможностей являются общими для обоих элементов, но с небольшими отличиями, свойственными исключительно для визуальной и не визуальной информации.

Оба движка Opera и WebKit уже реализовали частичную поддержку <video> элемента. Чтобы убедиться в этом, вы можете загрузить и попробовать в работе экспериментальную сборку Opera и автоматическую тестовую сборку WebKit. В Opera представлена поддержка кодека Ogg Theora, а WebKit обеспечивает работу всех форматов, поддерживаемых в QuickTime, включая ряд сторонних кодеков.

Простейшим способом включения видео в документ является использование <video> элемента, без каких либо дополнительных настроек. В этом случае браузер предоставит предусмотренные по умолчанию элементы пользовательского интерфейса. Для дефолтного (по умолчанию) включения или отключения элементов управления медиа контентом предназначен булевый атрибут controls с значениями:

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Необязательный атрибут poster предназначен для определения изображения, которое будет отображаться на месте видео элемента до начала его воспроизведения. И хотя некоторые видео форматы предусматривают собственную, свойственную только им заставку, как это сделано в MPEG-4, но атрибут poster является альтернативным способом определения заставки, которая будет отображаться независимо от используемого видео формата.

Также просто дело обстоит и с включением на страницу аудио контента с помощью элемента <audio>. Большинство атрибутов, свойственных <vidеo> элементу, применяют и для <audio> элемента, хотя в последнем не предусмотрена установка ширины width, высоты height и заставки poster.

<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>

В стандарте HTML5 для указания альтернативных источников видео и аудио данных также вводится элемент <source>, который позволяет браузеру выбрать тот формат, который поддерживается устройством и/или кодеком. Атрибут media может быть использован для указания типа устройства, с целью выбора необходимого источника данных в соответствии с ограничениями используемого устройства, а type атрибут для определения типа данных и кодеков. Имейте в виду, что при использовании элемента <source> в его родительских <video> или <audio> элементах должен отсутствовать атрибут src, в противном случае, альтернативные источники данных будут проигнорированы браузером.

<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp"
media="handheld">
<source src="video.ogv" type="video/ogg;
codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

В тех случаях, когда направленность веб-ресурса требует от разработчика создания полного контроля над пользовательским интерфейсом, то для этих целей он может использовать расширенные возможности API, предоставляющие ряд методов и событий, посредством которых из скриптов можно контролировать процесс воспроизведения медиа файла. Самыми простыми представителями таких возможностей являются методы play() и pause(), а также свойство currentTime, предназначенное для установки текущего положения проигрывания медиа файла в начало или другое необходимое место. Ниже представлен пример их использования:

<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"> << Rewind</button>

Это далеко не все атрибуты и компоненты API, предназначенные для <video> и <audio> элементов. Для того, чтобы получить полную информацию на этот счет, вы можете обратиться к текущей редакции спецификации.

Представление документа.

В отличие от предыдущих версий HTML и XHTML спецификаций, которые определены в рамках собственного синтаксиса, HTML5 использует концепцию «объектной модели документа»DOM (Document Object Model) – представление документа в виде древовидной иерархической модели, которую используют браузеры. Возьмем, к примеру, простейший документ, состоящий из заголовка документа <title>, элемента заголовка <h1> и параграфа <p>. В этом случае DOM структура будет выглядеть так:

Изображение.

Древовидная объектная модель этого документа включает в себя элемент TITLE в заголовочной части документа HEAD, а также элементы H1 и P в теле документа BODY.

Преимущество используемого в HTML5 стандарте DOM подхода заключается в том, что сам язык разметки как таковой не зависит от синтаксиса. При этом существует два основных вида синтаксиса, которые используются для преставления HTML документа:

  • HTML серилизация, известная как HTML5.
  • XML серилизация, известная как XHTML5.
HTML

Первый HTML способ представления документа основан на SGML синтаксисе, который был позаимствован более ранними версиями HTML и определен с целью большей совместимости с тем способом, который на данный момент используется браузерами при обработке HTML документа.

<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>

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

XML

То что касается XML серилизации, то в этом случае имеет место синтаксис схожий с XML 1.0 с использованием именных пространств, в точности также, как это предусмотрено в стандарте XHTML 1.0:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>

Если не учитывать пробелы, используемые в последнем случае и наличие в нем атрибута xmlns, то представленные выше два примера ничем не отличаются друг от друга.

Поэтому для их отличия браузеры используют MIME типы. Любой документ представленный как text/html тип, должен отвечать требованиям HTML серилизации, а тот документ, MIME тип которого заявлен как XML с помощью application/xhtml+xml значения, должен удовлетворять требованиям XML серилизации.

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

Преимущества HTML метода.
  • Обратная совместимость с текущими версиями браузеров.
  • Синтаксис хорошо знаком разработчикам.
  • Менее строгий и более снисходительный синтаксис гарантирует, что в любом случае пользователь не увидит враждебное уведомление браузера об ошибке вместо содержимого документа.
  • Более удобный и облегченный синтаксис, позволяющий разработчикам опускать определенные теги и атрибуты.
Преимущества использования XHTML подхода.
  • Строгий XML синтаксис способствует созданию более грамотной и последовательной разметки, что облегчает процесс отладки кода.
  • Предусматривает непосредственную интеграцию с другими XML словарями, такими как SVG и MathML.
  • Позволяет использовать XML процессинг, который некоторые разработчики применяют для решения собственных редакционных и/или публицистических задач.
* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *