Предварительный обзор HTML 5

Краткое описание главных деталей и свойств как они есть в текущей версии HTML 5

Вступление

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

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

Работа над HTML 5, начавшаяся в 2004 году, сейчас доводится до конца совместными усилиями W3C HTML WG и WHATWG. В разработке также учавствуют много ключевых фигур включая представителей четырех самых крупных разработчиков браузеров: Apple, Mozilla, Opera и Microsoft; круг других организаций и пользователей с различными интересами и опытом.

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

Структура

HTML 5 представляет полный набор новых элементов, делающих его намного проще для создания структуры страниц. Большинство страниц, написанных на HTML 4, включают широкий набор общих блоков – таких как верхняя часть, нижняя часть и колонок. И сегодня в порядке вещей размечать их, используя теги div, присваивая каждому описывающий id или class.

Типичная 2-колоночная раскладка

Изображение показывает распространенную двухколоночную раскладку, сделанную с помощью блоков div с id и class-ами. Она содержит header, footer и горизонтальное навигационное меню под header-ом. Главное содержимое состоит из "статьи" и правой колонки.

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

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

Блоки div могут быть заменены новыми элементами: header, footer, nav, section, article, aside и footer.

Разметка этого документа будет такой:

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

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

К примеру, следующая структура разметки организована с помощью вложенных section и заголовков h1:

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

Заметьте, что для большей совместимости с текущими версиями браузеров также возможно использование других заголовков (h2h6) в подходящих случаях вместо h1.

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

Элементы 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>
   <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>
   <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>

Тэг 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>

Видео и аудио

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

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

Элементы video и audio легко позволяют это сделать. Большинство API - общие между этими элементами, с отличиями лишь относительно к visual и не-visual медиа.

Opera и WebKit выпустили версии с частичной поддержкой элемента video. Вы можете загрузить экспериментальную версию Оперы или регулярно изменяющийся билд ВебКита, чтобы попробовать. Опера поддерживает Ogg Theora, a WebKit – все форматы, поддерживающиеся QuickTime-ом, включая сторонние кодеки.

Самый простой способо встроить видео – это использовать тэг video и позаолить браузеру отобразить интерфейс по умолчанию. Булевый атрибут controls определяет включать ли по умолчанию этот UI.

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

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

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

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

В HTML 5 включен элемент source для указания альтернативных видео и аудио файлов, чтобы браузер мог выбрать тот, который подходит к поддерживаемому медиа-типу или кодекам. Атрибут media определяет выбор медиа-запроса основанного на ограничениях устройств, а атрибут type – возможности медиа-типов и кодеков. Когда используется атрибут source, следует опускать src в элементах video (audio), иначе 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>

Для авторов, которые желают немного больше контролировать UI (например учитывать под общий дизайн страницы), 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 для видео и аудио элементов, не описанные здесь. Подробнее можно узнать в текущей версии спецификации.

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

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

Обьектная модель документа

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

Преимущество описания HTML 5 в теминах обьектной модели документа в том, что язык может быть определен независимо от синтаксиса. Есть главным образом два синтаксиса языка для представления документа: сериализация HTML (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.
   </body>
</html>

Исключая отличия в присутствии и отсутствии атрибута xmlns, эти два примера эквивалентны.

Браузеры используют MIME-тип для выбора. Любой документ поданный как text/html должен удовлетворять требованиям спецификации HTML и любой документ обьявленный как XML MIME тип (такой как application/xhtml+xml) должен подходить под спецификацию XML.

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

Преимущества использования HTML

  • Обратная совместимость с существующими браузерами
  • Знакомый синтаксис
  • Нетребовательный синтаксис (не будет «Yellow Screen of Death» если будет допущена ошибка)
  • Синтаксис допускающий опускание некоторых тэгов и атрибутов

Преимущества использования XHTML

  • Строгий синтаксис XML, который некоторые авторы сочтут удобным для поддержки.
  • Обьединяется напрямую с другими XML-словарями (такими как SVG и MathML)
  • Использование XML-обработки.

Сотрудничество

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

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

  • The Differences from HTML 4 описывает изменения по сравнению с предыдущей версией HTML
  • The HTML Design Principles обсуждаются принципы, которые помогают принять решения. Они помогут вам понять основы существующих дизайнерских решений.
  • The Web Developer’s Guide to HTML 5, недавно открывшийся ресурс, созданный, чтобы помочь web-дизайнерам и разработчикам понять все что они должны знать для написания конформных HTML5-документов. Предоставляются руководящие принципы и описываются лучшие решения.

Есть много способов внести свой вклад в разработку. Вы можете присоединится к W3C’s HTML WG и подписаться/содействовать рассылкам HTML WG mailing lists или wiki. Вы также можете участвовать в форуме WHATWG forum, писать комментарии или статьи в блоге WHATWG blog.

Author Lachlan Hunt
December 04, 2007
Оригинал Preview of html 5
Перевод 3hrek

Комментарии

Нас и тут не плохо кормят :) Возможно через 10-15 лет мы и осознаем столь важные (наверное) дополнения и спецификации, а пока и 4ка достаточна.

Думаю 5й хтмл начнут массово использовать быстрее, чем через 10-15 лет. Интересно было бы если поисковые системы начали бы пинать за 4ку :)

Еще круче было бы, если бы стали пинать не валидные сайты. А их 90%, по крайней мере в РУНЕТЕ.

Автору!
Тег noindex если обернуть в span и CDATA можно сделать валидным И не любит валидптор просто амперсанд. Ему больше нравится через amp.

Хорошо пишете. С огромным удовольствием читаю Ваши публикации.

Хех, я HTML 5 использую уже примерное пол-года)) И ничего, все норм. Старые браузеры так же прекрасно отображают содержимое сайта, как и новые. Хотя пока плюсы нового языка только в семантике