A- A+

Первый взгляд на HTML 5 (A Preview of HTML 5)

Вступление

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

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

Работа над HTML 5 началась в 2004г. и сейчас ведётся совместно W3C HTML WG (W3C HTML Working Group) и WHATWG (Web Hypertext Application Technology Working Group). Многие ключевые игроки рынка участвуют в работе: как представители производителей самых распространённых браузеров (Apple, Mozilla, Opera и Microsoft), так и ряд организаций и лиц самого широкого круга интересов.

Работа над спецификацией HTML 5 всё ещё ведётся и пока далека от завершения. Поэтому любая особенность языка, описанная в этой статье, может быть изменена в будущем. Цель этой статьи — дать общее представление об основных возможностях языка по состоянию на текущий момент.

Структура

В HTML 5 появилась целая группа новых элементов, призванная упростить процесс структуризации страницы. На большинстве страниц, свёрстанных на HTML 4, можно встретить одни и те же общие структурные блоки, например заголовки (headers), подвалы (footers) и столбцы (columns). Хорошим тоном сегодня считается описание их с помощью элементов div, с присвоением каждому определённого класса или идентификатора.


На схеме представлена типичная структура страницы с 2-мя колонками, свёрстанная с использованием элементов div с атрибутами id или class. Она состоит из заголовка, подвала и полосы меню под заголовком. Блок с содержимым страницы образован текстом статьи и боковой панелью (sidebar) справа.

Такое большое количество элементов div продиктовано отсутствием в HTML 4 семантических элементов, необходимых для более предметного описания структурных блоков. Решение этой проблемы в HTML 5 — введены новые элементы для описания каждой части страницы.


В HTML 5 элементы div могут быть заменены на header, nav, section, article, aside и footer.

Разметка документа тогда примет следующий вид:

 
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
 

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

Например, для разметки следующей структуры использованы вложенные элементы 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>
  <h1>Первый взгляд на HTML 5</h1>
  <p class="byline">Автор Lachlan Hunt</p>
</header>
<header>
  <h1>Полезные советы</h1>
  <h2>Пятая редакция</h2>
</header>
 

Элемент footer служит для разметки подвала определённого блока. Как правило, он содержит информацию об авторе, ссылки на материалы сходной тематики, правовую информацию и т.д.

 
<footer>©2007 vectora.ru</footer>
 

Элемент nav используется для обозначения блока с навигационными ссылками. Он может быть применён как для меню сайта, так и для содержания документа.

 
<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/products">Продукция</a></li>
    <li><a href="/services">Услуги</a></li>
    <li><a href="/about">О нас</a></li>
  </ul>
</nav>
 

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

 
<aside>
  <h1>Архивы</h1>
  <ul>
    <li><a href="/2007/09/">Сентябрь 2007</a></li>
    <li><a href="/2007/08/">Август 2007</a></li>
    <li><a href="/2007/07/">Июль 2007</a></li>
  </ul>
</aside>
 

Элемент section призван выделять некоторый раздел документа, например, часть рассказа.

 
<section>
  <h1>Часть 141. Жак. 22 года</h1>
  <p>Мне приснился кошмар. Сперва был плачущий волк. 
     Потом девочка, превращающаяся в воздушный шар.&hellip;</p>
</section>
 

Элемент article служит для выделения некоторой независимой части документа, например, новости, постинга в форуме или комментария в блоге.

 
<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
        Написал <a href="http://example.com/">Петя Иванов</a></h4>
    <p><time datetime="2007-12-09T13:13Z">9 декабря 2007г. в 13:13</time>
  </header>
  <p>Отличная статья!</p>
</article>
 

Видео и звук

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

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

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

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

Самый простой способ внедрить видео на страницу — использовать тег video и предоставить задачу отображения стандартного интерфейса управления браузеру. Атрибут controls (тип boolean - логический) используется для указания браузеру, нужно ли показывать элементы управления по умолчанию.

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

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

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

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

Спецификацией HTML 5 предусмотрен элемент source для указания URL видео или звука в альтернативных форматах, чтобы браузер мог выбрать наиболее подходящий вариант для загрузки и воспроизведения. Атрибут media может быть использован для определения класса устройств, для которых предназначен данный файл. Атрибут type предназначен для указания типа мультимедиа-данных и используемых кодеков. Обратите внимание, что если используется элемент source, то атрибут src в родительских тегах audio или video должен быть опущен. В противном случае элементы source будут проигнорированы.

 
<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 элементов audio и video, полную информацию можно получить, ознакомившись с черновой спецификацией.

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

В отличие от предыдущих версий HTML и XHTML, определённых в терминах своего синтаксиса, HTML 5 описывается объектной моделью документа (DOM) — внутренним иерархическим представлением браузеров, которое они используют для описания документа. К примеру, рассмотрим очень простой документ, состоящий из названия, заголовка и параграфа текста. В этом случае дерево DOM будет выглядеть примерно так:

Дерево DOM включает в себя элемент title в head и элементы h1 и p в body.

Преимущество определения HTML 5 в терминах DOM заключается в том, что сам язык может определён вне зависимости от синтаксиса. В основном, существует два синтаксиса для описания HTML-документов: HTML-последовательность(serialisation), известный как HTML 5 и XML-последовательность, известный как XHTML 5.

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 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-тип (MIME-type) для того, чтобы определить, какой синтаксис используется. Любой документ, чей тип определён как text/html должен удовлетворять требованиям HTML-последовательности, а документ, чей XML MIME-тип определён как application/xhtml+xml должен удовлетворять требованиям XML-последовательности.

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

Преимущества HTML

  • Обратная совместимость с существующими браузерами;
  • авторы уже знакомы с синтаксисом;
  • прощающий ошибки синтаксис гарантирует, что пользователь не получит «жёлтый экран смерти» (ошибка парсинга xml в mozilla -прим. пер.);
  • удобный сокращённый синтаксис, когда можно опускать многие теги и атрибуты.

Преимущества XHTML

  • Строгий синтаксис XML заставляет авторов писать хорошую разметку (well-formed markup), с которой, как некоторые считают, удобнее работать;
  • прямая интеграция с другими XML-словарями, например, SVG и MathML;
  • возможен XML-парсинг и сопутствующая обработка, что используется многими как для правки, так и для процесса публикации.

Как внести свой вклад

Работа над HTML 5 движется быстро, но, несмотря на это, ожидается что она продлится ещё несколько лет. Из-за требований, регламентирующих создание эталонных тестов (test cases) и наличие сопоставимых реализаций, текущие сроки завершения работы — 10-15 лет. Во время этого процесса крайне важно наличие обраной связи с широким кругом людей, включая дизайнеров, разработчиков, производителей CMS, средств авторинга, браузеров. Выражение мнения каждого об HTML 5 всячески приветствуется.

В дополнение к спецификации надо указать, что существует несколько других работ, цель которых — помочь людям лучше понять ведущуюся работу:

Существует большое число способов внести свой вклад. Вы можете присоединиться к W3C's HTML WG и подписаться или внести свой вклад в списке рассылки HTML WG. Можно также постить на форум WHATWG и комментировать блог WHATWG.



Переведено с разрешения A List Apart Magazine и авторов. Оригинал статьи.  (Translated with the permission of A List Apart Magazine and the author[s])
Создать закладку в (наведите курсор на иконку снизу)
MemoriМистер Вонг (mister-wong.ru)БобрДобр (BobrDobr.ru)МоёМесто.ru (MoeMesto.ru)RUmarkz (RuMarkz.ru)del.icio.us (http://del.icio.us)Digg!