Интернет постоянно развивается. Просто новые и инновационные веб-сайты рождаются каждый день, раздвигая рамки 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, с присвоением каждому определённого класса или идентификатора.
Такое большое количество элементов div
продиктовано отсутствием в HTML 4 семантических элементов, необходимых для более предметного описания структурных блоков. Решение этой проблемы в HTML 5 — введены новые элементы для описания каждой части страницы.
Разметка документа тогда примет следующий вид:
<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>Мне приснился кошмар. Сперва был плачущий волк. Потом девочка, превращающаяся в воздушный шар.…</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 будет выглядеть примерно так:
Преимущество определения 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 5 движется быстро, но, несмотря на это, ожидается что она продлится ещё несколько лет. Из-за требований, регламентирующих создание эталонных тестов (test cases) и наличие сопоставимых реализаций, текущие сроки завершения работы — 10-15 лет. Во время этого процесса крайне важно наличие обраной связи с широким кругом людей, включая дизайнеров, разработчиков, производителей CMS, средств авторинга, браузеров. Выражение мнения каждого об HTML 5 всячески приветствуется.
В дополнение к спецификации надо указать, что существует несколько других работ, цель которых — помочь людям лучше понять ведущуюся работу:
Существует большое число способов внести свой вклад. Вы можете присоединиться к W3C's HTML WG и подписаться или внести свой вклад в списке рассылки HTML WG. Можно также постить на форум WHATWG и комментировать блог WHATWG.