Обзор нововведений в HTML 5
20:08 19 Янв. 2008 Автор: Кирилл ХарченкоВведение
Сеть постоянно эволюционирует. Каждый день создаются новые инновационные сайты, по всем направлениям выходящие за рамки, обрисованные стандартами. До сих пор, в течении почти десятилетия, попытки дизайнеров и веб-издателей, руководствовавшихся HTML 4, улучшить функциональность своих сайтов, сдерживаются рамками языка и браузеров.
В целях повышения гибкости и оперативности, и создания более интерактивных и увлекательных сайтов, HTML 5 вводит и улучшает широкий спектр нововвеедений и свойств, включая управление формами, API, мультимедиа, улучшения в структуре и семантике.
Работа над HTML 5, начатая в 2004 году, в данный момент закончена общими услилями W3C HTML WG и WHATWG. Множество ключевых участников, включая представителей производителей четырех основных браузеров: Apple, Mozilla, Opera, Microsoft, и других организаций и лиц различных сфер интересов и компетенций, объединило свои усилия в W3C.
Учтите, что работа над спецификацией пока в процессе и еще крайне далека от завершения. А посему, есть вероятность, что любые свойства, обсуждаемые в этой статье, могут в будущем измениться. Эта статья представляет собой лишь краткое изложение некоторых основных особенностей текущей версии.
Структура HTML 5
HTML 5 вводит целый набор новых элементов, облегчающих работу над структурой страниц. Большинство страниц на HTML 4 состоят из некоторого набора простых структурных элементов, таких как шапка, подвал и колонки, и на сегодняшний день, наиболее правильным решением является разметка этих элементов с помощью блоков с соответствующими им идентификаторами и классами.
На рисунке изображен типичный двухколоночный макет, сверстанный с помощью блоков с классами и идентификаторами. Он состоит из шапки, подвала и горизонтальной навигационной панели под шапкой. Центральная часть состоит из статьи и боковой панели справа.
Использование элемента div широко распространено из-за того, что в настоящих версиях HTML 4 отсутствует необходимая семантика для более точного описания этих элементов. 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. Спецификация включает в себя детализированный алгоритм для составления эскиза, учитывающего структуру элементов и сохраняющего обратную совместимость с предыдущими версиями. Он может быть использован программами-редакторами и браузерами для генерирования таблицы содержания, помагающей пользователю ориентироваться в документе.
К примеру, следующая структура разметки сверстана с помощью вложенных элементов section и h1 elements:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
Заметьте, что для лучшей совместимости с современными браузерами также возможно использование других заголовочных элементов (от h2 до h6) вместо соответствующих элементов h1.
Идентифицируя назначение секций страницы с помощью специфических секционных элементов, вспомагательная технология может помочь ориетировке пользователя на странице. К примеру, пользователи могут легко перепрыгивать
секцию навигации или быстро переходить от одной статьи к другой без необходимости использования авторами страницы локальных ссылок. Выгоду автору также приносит и то, что замена множества блоков одним или несколькими оригинальными делает код более чистым и читабельным.
Элемент 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>
(Отрывок из A Tale of Two Cities)
Элемент 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>
Видео и Аудио в HTML 5
В последние годы поддержка видео и аудио в вебе становится все более и более необходимой и сайты, такие как 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 — двоичный атрибут, с помощью которого автор может включить или выключить этот 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. Большинство атрибутов в элементах video и audio — общие, хотя, по очевидным причинам, в элементе audio нет атрибутов width, height, и poster.
<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>
<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>
В элементах video и audio есть множество других атрибутов и API, не описаных в данной статье. Чтобы получить больше информации об этом, следует обратиться к спецификации текущего проекта.
Представление документа
В отличии от предыдущих версий HTML и XHTML, которые были описаны на основе синтаксиса, HTML 5 описан на основе Объектной Модели Документа (DOM) — внутреннее представления браузерами элементов документа в виде дерева. К примеру, представим себе простейший документ, состоящий из надписи, заголовка и абзаца. Дерево DOM выглядело бы примерно так:
Дерево DOM включает в себя элемент title в заголовке документа и элементы h1 и p в теле.
Преимущество описания HTML 5 на основе DOM состоят в том, что сам язык может быть задан отдельно от синтаксиса. В основном для отображения документа HTML могут быть использованы два синтаксиса: сериализация HTML (или HTML 5) и сериализация XML (или XHTML 5).
Сериализация HTML относится к синтаксису основанному на синтаксисе SGML в ранних версиях 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. Любой документ, обрабатываемый, как text/html, должен соответствовать требованиям сериализации HTML, а документ, соответствующий типу XML MIME, например, такой как application/xhtml+xml, должен соответствовать требованиям сериализации XML.
Выбор сериализации зависит от некоторого количества различных факторов, и этот выбор нужно сделать сознательно. Нельзя вне зависимости от ситуации использовать только одну из них; каждая рассчитана для определенной ситуации.
Преимущества использования HTML
- Совместимость с предыдущими версиями существующих браузеров.
- Дизайнеры уже знакомы с синтаксисом.
- Мягкий, прощающий синтаксис в случае одной закравшейся ошибки не приведет к столь недружелюбной по отношению к пользователю ситуации, вроде
желтого экрана смерти
. - Удобный скорописный синтаксис, т. е. дизайнеры могут пренебрегать некоторыми тэгами и значениями атрибутов.
Преимущества использования XHTML
- Строгий синтаксис XML стимулирует разработчиков к более стройной разметке.
- Полностью совместим с синтаксисами других языков XML, таких как SVG и MathML.
- Позволяет использовать XML Processing, используемую некоторыми авторами ресурсов для редактирования и/или публикации.
Как оказать содействие
Работа над HTML 5 развивается довольно быстро, но все же будет продолжаться несколько лет. Благодаря требованию выдачи тестовых версий и кроссплатформенных реализаций, текущие оценки сроков выполнения всех работ колеблются в диапазоне от десяти до пятнадцати лет. В течении этого процесса, обратная связь с огромным количеством людей, включая, среди прочих, веб-дизайнеров и разработчиков, производителей CMS и средств разработки, а также разработчиков браузеров, жизненно важна для обеспечения успеха этой работы. Содействие каждого в работе над HTML 5 не только приветствуется, но и активно поощряется.
В дополнение к спецификации, вот еще несколько приложений, составленных для лучшего понимания работы над HTML 5:
- Отличия от HTML 4. описывают изменения, произошедшие в HTML, по сравнению с предыдущей версией.
- В Принципах разработки HTML обсуждаются принципы, которые помогут вам понять обоснованность многих разрабатываемых на данный момент решений.
- Руководство HTML 5 для веб-разработчика, только недавно начатое, пишется, чтобы помочь веб-дизайнерам и разработчикам понять все, что им надо знать, для написания документов, соответствующих HTML 5, а также предоставляет нормативные документы и описывает лучшие практические применения.
Внести свой вклад в разработку вы можете во множестве мест. Вы можете присоединиться к W3C’s HTML WG и подписаться к рассылке HTML WG или wiki. Вы также можете подписаться на любую из рассылок Web Hypertext Application Technology Working Group, принять участие в форуме Web Hypertext Application Technology Working Group, публиковать комментарии и статьи в блог Web Hypertext Application Technology Working Group.
- Автор: Лаклан Хант
- Источник: A Preview of HTML 5
- Перевод: Кирилл Харченко
02.12.2009 в 01:58
Будем ждать официального релиза, а пока потихоньку делать в новой спецификации
14.12.2009 в 12:56
Собственно, нужно ждать полноценной поддержки HTML5 в различных браузерах
28.04.2010 в 08:17
Z-Den, долго ждать придётся )) “некоторые” браузеры ещё CSS 1 не полностью поддерживают, а вы говорите про html 5 )))
20.05.2010 в 05:22
Рад представить:
Уроки HTML 5 ;
Форумы HTML 5
И везде HTML 5 )