Предварительный обзор HTML5
Оригинал статьи на английском: http://www.alistapart.com/articles/previewofhtml5
Иллюстрации: Кевин Корнелл
Перевод: Влад Мержевич
Сеть постоянно развивается. Новые и инновационные сайты создаются каждый день, расширяя границы HTML в каждом направлении. HTML4 был вокруг нас в течение почти десяти лет, и издатели ищут новые методы, чтобы обеспечить расширенную функциональность, которая сдерживается ограничениями языка и браузеров.
Чтобы дать авторам больше гибкости и совместимости, сделать их сайты и приложения более интерактивными и захватывающими, HTML5 вводит и расширяет диапазон возможностей, включающий элементы форм, API, мультимедиа, структуры и семантики.
Работа над HTML5 началась в 2004 году и в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG. Многие ключевые игроки участвуют в работе W3C, в том числе представители четырех основных поставщиков браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд других организаций и частных лиц со своими интересами и опытом.
Заметьте, что спецификация еще находится в стадии разработки и довольно далека от завершения. Так что вполне возможно, что какой-либо функционал, описанный в этой статье, может измениться в будущем. Эта статья предназначена для краткого описания некоторых основных особенностей, существующих в нынешнем проекте.
Структура
HTML5 вводит целый ряд новых элементов, которые упрощают структуру страниц. Большинство страниц на HTML4 содержат типовые элементы, такие как «шапка», «подвал» и колонки. Ныне, как правило, в коде документа они обозначаются с помощью элементов <div>, описывая каждый атрибутом id или class.
На рисунке показано типичное расположение двух колонок сверстанных с использованием <div> с атрибутами id и class. Макет содержит шапку, подвал и горизонтальную навигацию ниже заголовка. Основное содержание включает статью и боковую панель справа (сайдбар).
Использовать элементы <div> правильно, потому что в HTML4 не хватает нужной семантики для описания этих частей более конкретно. HTML5 решает эту проблему путем внедрения новых элементов для представления каждого из этих разных разделов.
Элементы <div> могут быть заменены новыми элементами <header>, <nav>, <section>, <article> и <footer>
Код для этого документа выглядит следующим образом.
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Вот некоторые преимущества от применения этих элементов. Когда они используются в сочетании с элементами заголовков (от <h1> до <h6>), это позволяет разметить вложенные разделы по уровням заголовков, вплоть до шестого. Спецификация включает подробный алгоритм для создания схемы документа, который принимает структуру этих элементов во внимание и учитывает обратную совместимость с предыдущими версиями. Это могут использовать как средства разработки, так и браузеры для создания оглавления, чтобы помочь пользователям с навигацией по документу.
Например, следующий код структурирован вложенными элементами <section> и <h1>.
<section>
<h1>Уровень 1</h1>
<section>
<h1>Уровень 2</h1>
<section>
<h1>Уровень 3</h1>
</section>
</section>
</section>
Заметим, что для лучшей совместимости с существующими браузерами, также можно использовать другие элементы заголовка (от <h2> до <h6>) вместо соответствующих элементов <h1>.
Помечая целевые разделы страницы с помощью специальных тегов, вспомогательные технологии могут помочь пользователю легко перемещаться по странице. Например, они могут просто пропустить раздел навигации или быстро переходить от одной статьи к другой. Автору не придется обеспечивать механизм создания ссылок для этого. Также авторы получают преимущество, поскольку замена множества <div> на несколько различных элементов помогает сделать исходный код понятнее и проще.
Элемент <header> определяет заголовок раздела, который может содержать больше, чем просто название раздела. К примеру, имеет смысл для заголовка включить подзаголовок, информацию о версии истории или авторство.
<header>
<h1>Предварительный обзор HTML5</h1>
<p class="byline">Лаклан Хант</p>
</header>
<header>
<h1>Блог</h1>
<h2>Вставьте сюда слоган.</h2>
</header>
Элемент <footer> определяет подвал раздела, в котором добавляется. Подвал обычно содержит такую информацию как: кто написал, ссылки на соответствующие документы, авторские права и тому подобное.
<footer>© 2011 Example Inc.</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>Глава 1: То время</h1>
<p>Это было лучшее изо всех времен, это было худшее изо всех времен;
это был век мудрости, это был век глупости;
это была эпоха веры, это была эпоха безверия;
это были годы Света, это были годы Мрака;
...</p>
</section>
(Отрывок из «Повесть о двух городах»)
Элемент <article> представляет собой самостоятельный раздел документа, страницы или сайта. Он подходит для содержания вроде новости, статьи блога, сообщения форума или отдельных комментариев.
<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Комментарий #2</a>
<a href="http://example.com/">Джек О'Нил</a></h4>
<p><time datetime="2007-08-29T13:58Z">29 августа 2007 в 13:58</time>
</header>
<p>Вот это великолепная статья!</p>
</article>
Видео и аудио
В последние годы видео и аудио в Интернете становится все более жизнеспособным и сайты вроде YouTube, Viddler, Revver, MySpace и десятки других облегчают жизнь тем, кто публикует видео и аудио. Поскольку в настоящее время в HTML не хватает необходимых средств для успешного внедрения и управления мультимедиа, многие сайты полагаются на Flash, чтобы обеспечить эту функциональность. Хотя можно вставлять мультимедиа с помощью различных плагинов (таких как QuickTime, Windows Media и др.), Flash сейчас единственный широко используемый плагин, обеспечивающий кроссбраузерную совместимость с требуемыми для разработчиков API-интерфейсами.
Как свидетельствуют различные медиаплееры на основе Flash, их авторы заинтересованы в поддержке собственных пользовательских интерфейсов, которые обычно позволяет пользователям воспроизводить, делать паузу, останавливать, искать и регулировать громкость. Планируется обеспечить эту функциональность в браузерах, добавив встроенную поддержку для видео и аудио и предоставив API скриптам для управления воспроизведением.
Новые элементы <video> и <audio> делают это очень простым. Большинство API одинаково для этих двух элементов, разница лишь связана с присущими различиями между визуальным и невизуальным медиа.
Opera и WebKit выпустили версии с частичной поддержкой элемента <video>. Вы можете скачать эти браузеры, чтобы опробовать примеры. Opera включает в себя поддержку Ogg Theora, WebKit поддерживает все форматы, которые поддерживает QuickTime, включая дополнительные кодеки.
Самый простой способ вставить видео это использовать элемент <video> и позволить браузеру обеспечить интерфейс по умолчанию. Атрибут controls указывает, желает автор использовать пользовательский интерфейс или выключить его по умолчанию.
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Скачать ролик</a> </video>
Необязательный атрибут poster может быть использован для указания изображения, которое будет отображаться вместо видео до начала воспроизведения. Хотя некоторые видеоформаты вроде MPEG-4 поддерживают собственную функцию кадра, альтернативное решение может работать независимо от формата видео.
Так же просто вставить аудио на страницу с помощью элемента <audio>. Большинство атрибутов являются общими между элементами <audio> и <video>, хотя по понятным причинам у <audio> нет атрибутов width, height и poster.
<audio src="music.oga" controls> <a href="music.oga">Скачать песню</a> </audio>
HTML5 предоставляет элемент <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> <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();">Воспроизвести</button>
<button type="button" onclick="video.pause();">Пауза</button>
<button type="button" onclick="video.currentTime = 0;"><< Перемотать</button>
Для видео и аудио есть много других атрибутов и API, которые здесь не обсуждались. Дополнительную информацию вы можете получить, ознакомившись с данным проектом спецификации.
Представление документа
В отличие от предыдущих версий HTML и XHTML, которые определены с позиции их синтаксиса, HTML5 в настоящее время определяется в терминах объектной модели документа (DOM) —дерево представления, которое используют браузеры для отображения документа. К примеру, рассмотрим очень простой документ, состоящий из названия, заголовка и абзаца. Дерево DOM может выглядеть примерно так.
Дерево DOM включает элемент <title> внутри <head>, а также <h1> и <p> в <body>
Преимуществом определения HTML5 в терминах DOM является то, что язык сам по себе может быть определен независимо от синтаксиса. Существует два синтаксиса, которые могут быть использованы для представления HTML-документов: публикация на HTML (известная как HTML5) и публикация на XML (известная как XHTML5).
Синтаксис HTML основан на SGML, ранней версии HTML, но определен как более совместимый с браузерами на практике.
<!DOCTYPE html>
<html>
<head>
<title>HTML-документ</title>
</head>
<body>
<h1>Пример</h1>
<p>Это пример HTML-документа
</body>
</html>
Заметьте, как и в предыдущих версиях HTML, некоторые теги являются необязательными и подразумеваются автоматически.
Публикация на XML основана на синтаксисе с использованием XML 1.0 и пространстве имен XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML-документ</title>
</head>
<body>
<h1>Пример</h1>
<p>Это пример HTML-документа</p>
</body>
</html>
За исключением закрытого тега и наличия атрибута xmlns эти два примера идентичны.
Браузеры используют MIME-тип для различий. Любой документ, отправленный как text/html должен соответствовать требованиям для публикации на HTML, а документ, отправленный с MIME-типом application/xhtml+xml должен соответствовать требованиям для публикации на XML.
Авторы должны сделать осознанный выбор, какой вариант использовать, это зависит от ряда различных факторов. Авторы не должны безоговорочно использовать один или другой вариант, каждый из них оптимизирован для различных ситуаций.
Преимущества использования HTML
- Обратная совместимость с существующими браузерами.
- Авторы уже знакомы с синтаксисом.
- Снисходительный синтаксис не приведет к появлению «Желтого экрана смерти», при возникновении случайной ошибки.
- Удобный синтаксис сокращений, к примеру, авторы могут опускать некоторые теги и значения атрибутов.
Преимущества использования XHTML
- Строгий синтаксис XML поощряет авторов писать правильный код, для некоторых авторов он проще в обслуживании.
- Напрямую интегрируется с другими XML-технологиями вроде SVG и MathML.
- Позволяет использовать обработчик XML, который некоторые авторы используют в своей деятельности.
Как помочь
Работа над HTML5 быстро продвигается, но по-прежнему ожидается, что займет несколько лет. В связи с требованием провести ряд тестов и достигнуть совместимости реализаций, работа по текущим оценкам должна завершиться через 10–15 лет. В ходе этого процесса для успеха имеет большое значение обратная связь с широким кругом людей, включая веб-дизайнеров, разработчиков CMS и браузеров. Активно поощряется каждый вклад в HTML5.
В дополнение к спецификации, есть несколько других проектов, чтобы помочь людям лучше понять эту работу.
- The Differences from HTML 4 описывает изменения, которые произошли со времени предыдущей версии HTML.
- The HTML Design Principles обсуждает принципы, используемые для принятия решений, и поможет понять обоснование многих текущих проектных решений.
- The Web Developer’s Guide to HTML 5 пишется, чтобы помочь веб-дизайнерам и разработчикам понять все, что нужно знать для написания соответствующих документов HTML5, и обеспечить эти принципы на практике.
Есть множество сообществ, через которые вы можете внести свой вклад. Можно присоединиться к W3C HTMLи подписаться на список рассылки или вики. Вы также можете подписаться и посодействовать в любом из списков рассылки WHATWG, написать на форуме WHATWG, оставить комментарий или написать статью на блоге WHATWG.