Примеры использования некоторых новых возможностей HTML5. Чем НЕ является HTML5. Новые возможности форм

Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.

В новом стандарте многое упростилось и теперь базовая часть выглядит так:

...

Новые теги HTML5

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

С использованием новых тегов пустой шаблон HTML5 может выглядеть так:

Заголовок страницы Меню навигации Боковая колонка SideBar Контент - основное содержимое страницы. Подвал сайта

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

Теперь же запись минимальна, проще, наверное некуда:

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только .

Трактовка русского языка как основного языка HTML документа

Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

Крошечный документ HTML5

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

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

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

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

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

Первое, что бросается в глаза в описании типа документа HTML5 - это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 - живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode) . В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode) , который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

Кодировка - это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

Веб-серверы часто настраивают, чтобы сообщать посещающим их браузерам, что предлагаемые сервером страницы имеют определенную кодировку. Но нельзя быть уверенным, что веб-сервер, на котором вы планируете разместить свой веб-сайт, будет настроен таким образом (если только это не ваш собственный сервер). Кроме этого, попытка браузера в таком случае предположить наиболее вероятную используемую кодировку может претерпеть неудачу по причине какого-либо малоизвестного вопроса безопасности. По этим причинам всегда следует вставлять информацию об используемой кодировке в разметку страницы.

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент в самом начале блока (или, если элемент не используется, сразу же после кода описания типа документа):

Крошечный документ HTML5

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Вставить в веб-страницу информацию о языке легче всего через элемент :

Информация о языке также может быть полезной, если страница содержит текст на разных языках, который нужно прочитать с помощью программы чтения экранного текста. В таком случае атрибут lang с кодом соответствующего языка вставляется в нужном месте документа, например, в элементы , охватывающие текст на разных языках. Таким образом, программа чтения экранного текста способна определить, какой текст она может читать.

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент в блоке документа HTML5:

Крошечный документ HTML5

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей - CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

Язык сценариев JavaScript изначально создавался как средство для трудоемкого способа придания блеска и обаяния скучным веб-страницам. В настоящее время основная область применения JavaScript сместилась с разработки прибамбасов интерфейса на разработку нестандартных веб-приложений, включая сверхэффективных клиентов электронной почты, текстовых редакторов и картографических движков, которые исполняются непосредственно в браузере.

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

Крошечный документ HTML5

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript - единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Крошечный документ HTML5

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

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

Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.

В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

Рисунок - Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

Заголовок страницы

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные теги, то есть это блочные элементы. Но если не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Site title

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Site title

site slogan

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

• Home
• Portfolio
• Gallery
• Contacts

Контент на странице

Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

...основной контент страницы...

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

... Article title 30 Сентября Article sub-title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Widget title ... Последние записи ... Популярные комментарии ...

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги ( – ) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

An Event Apart Cities

Join us in these cities in 2010.

Seattle

Follow the yellow brick road.

Boston

That"s Beantown to its friends.

Minneapolis

It"s so nice.

Accommodation not provided.

Подвал сайта — Footer

Подвал сайта оформляется тегом

© 2015 сайт Copyright

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.

Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

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

Статьи и материалы

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

В этой статье мы рассмотрим некоторые новые возможности HTML5 с конкретными примерами их применения на практике

Новый DOCTYPE

Давайте вспомним, как определяется типичный XHTML документ в разделе DOCTYPE :

‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Объявление типа документа на языке разметки выглядит куда более лаконично и читабельно

‹!DOCTYPE html›

Более того, вы можете применять данный DOCTYPE при верстке любой страницы. Если браузер не знаком с HTML5, то он применит отобразит страницу в стандартном режиме.

Улучшенная семантика кода

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

Элементы Header и Footer

Теперь можно избавиться от конструкций типа

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

И начать использовать более понятные как человеку, так и машине

‹header› … ‹/header› ‹footer› … ‹/footer›

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

Элемент FIGURE

Рассмотрим следующую часть кода:

‹img src="mars.jpg" alt="About Mars" /› ‹p›This is an image of Mars‹/p›

В данном случае поисковым системам сложно определить, что тег ‹p›, содержащий описание картинки, собственно и является ее описанием. Именно поэтому такие конструкции лучше объединять в общий контейнер, которым является ‹figure ›:

‹figure› ‹img src="mars.jpg" alt="About Mars" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure›

В данном случае пристутсвует дополнительный тег ‹figcapture› , который уточняет, где содержимое фигуры, а где ее заголовок

Использование hgroup

Представьте, что у вас на сайте заголовок состоит из основного заголовка и подзаголовка. Использование обычных тегов ‹h1› и ‹h2› никак не отображает зависимость между двумя этими пунктами. Поэтому их можно объединить семантически, используя тег ‹hgroup› :

‹header› ‹hgroup› ‹h1›Photogallery‹/h1› ‹h2›Our vacancy in Prague‹/h2› ‹/hgroup› ‹/header›

Никаких types для подключения скриптов и таблиц стилей

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

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Так вот, теперь больше нет необходимости указывать тип подключаемого файла. Браузер определит его автоматически. А значит в атрибуте type больше нет необходимости:

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Структура кода

Стандарт XHTML предусматривал необходимость указывать значения атрибутов в одинарных или двойных кавычках. Стандарт HTML5 позволяет не использовать кавычки, если в них нет необходимости, т.е. значение атрибута задается одним словом без пробелов. Более того, вы можете даже не закрывать парные элементы. Вот пример:

‹p class=myClass id=pId›Content

Однако это может повредить читабельности кода со стороны разработчика. Поэтому стиль написания кода полностью зависит от вас, ведь старый (проверенный временем) стиль все так же поддерживается.

Редактируемый контент

HTML5 позволяет сделать контент вашего сайта полностью редактируемым, при этом нет необходимости вставлять скрытые поля для ввода текста. Все, что необходимо – это добавить атрибут contenteditable="true" (или без кавычек, как мы узнали из предыдущего пункта) к тому элементу, который вы хотите сделать доступным для редактирования. После этого, пользователь сможет редактировать его содержимое непосредственно со страницы.

В данном случае пользователь может добавлять, удалять и редактировать пункты неупорядоченного списка ‹ul› . Ниже приведен пример списка, пункты которого можно изменить

• Watch TV
• Listen to music
• Play videogames

Новые возможности форм

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

Поля для ввода email

Используйте атрибут type="email" к тегу ‹input› и e поля ввода появятся дополнительные уникальные способности по проверке правильности ввода адреса, и если адрес введен неверно, то браузер продемонстрирует пользователю предупреждающее сообщение.

‹input id="email" name="email" type="email" /›

Результат может быть таким (Google Chrome):

Также существуют и другие поля для ввода, например, адреса вебсайта или номера телефона. Принцип их работы схож с полем email .

Использование подсказок

Теперь нет необходимости использовать javascript для создания подсказок (placeholders) для ввода в текстовые поля. HTML5 предлагает использовать специальный атрибут placeholder , который может выводить фоновую текстовую подсказку для поля.

‹input name="email" type="email" placeholder="[email protected]" /›

Результат отображен ниже:

Данный пример будет работоспособен только в браузерах с поддержкой HTML5

Email:

Автофокус

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

‹input name="name" type="text" autofocus /›

Поле name будет активировано автоматически и готово для ввода текста.

Обязательные поля

Если необходимо отметить некоторые поля, как обязательные для заполнения теперь достаточно указать атрибут . Таким образом, при подтверждении формы браузер проведет проверку, заполнены ли необходимые поля и, если нет, выдаст сообщение.

‹input name="name" type="text" placeholder="John Smith" required /›

Ниже иллюстрация результата работы этого кода (Google Chrome):

Range Input

HTML5 представляет абсолютно новый элемент управления – range input , который представляет собой бегунок, значение которого изменяется перетягиванием специального маркера между установленными заранее значениями.

‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›

Атрибуты min и max используются для задания крайних значений бегунка, step – это шаг изменения значения. Браузер Google Chrome отображает этот элемент управления следующим образом:

Данный пример будет работоспособен только в браузерах с поддержкой HTML5

Локальное хранилище

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

Само по себе Local Storage не является частью спецификации HTML5, однако тесно с ней связано.

Управление локальным хранилищем происходит через объект класса localStorage с помощью двух методов setData() и getData() . Ниже приведен пример, в котором используется описанный выше редактируемый список, который будет хранить последние введенные в него значения.

‹h1›To-Do List‹/h1› ‹ul contenteditable=true› ‹li›Watch TV‹/li› ‹li›Listen to music‹/li› ‹li›Play videogames‹/li› ‹/ul›

JavaScript (с применением библиотеки jQuery, но это необязательно):

$("#todo").blur(function () { localStorage.setItem("todoData", this.html); }); if (localStorage.getItem("todoData")) { $("#todo").html(localStorage.getItem("todoData")); }

Поддержка мультимедиа

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

Аудио

Для внедрения на страницу звукового файла необходимо воспользоваться тегом ‹audio› с необходимыми атрибутами. Пример ниже выводит на странице блок управления аудиофайлом, содержащим ссылку на скачивание этого файла. Звук будет воспроизводиться автоматически.

‹audio autoplay controls›
‹source src="file.ogg" /›
‹source src="file.mp3" /›
‹a href="file.mp3"›Download this file.‹/a›
‹/audio›

На странице данный блок может выглядеть вот так (браузер Google Chrome)

У данного тега есть свои особенности поддержки в браузерах. Например, браузер Mozilla Firefox работает с.ogg файлами, тогда как Webkit-браузеры работают с.mp3

Видео

До недавнего времени, единственным способом вставки видеоконтента на HTML-страницу было интегрирование Flash-контента. Однако теперь такую возможность предоставляют сами браузеры, отвечающие спецификациям HTML5. Особую популярность это приобрело тогда, когда на формат HTML5 перешел крупнейший видеохостинг YouTube.com.

Для успешного интегрирования видео в страницу необходимо воспользоваться тегом ‹video› . К сожалению между производителями браузеров нет единого мнения в каком формате должно быть представлено видео, поэтому каждый из них продвигает свой формат. Если IE и Safsri поддерживают видео в формате H.264 (которое поддерживалось Flash-плеерами), то Opera и Firefox продвигают open source форматы Vorbis и Theora. Chrome же может правильно отображать видео во всех форматах, в том числе WebM.

‹video controls preload› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹source src="video.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" /› ‹p›Your browser is old. ‹a href="video.mp4"›Download this video instead.‹/a› ‹/p› ‹/video›

Не все браузеры могут отображать HTML5 видео, поэтому под тегом ‹source› можно указать ссылку для скачивания видео, либо интегрировать Flash плеер.

Атрибут preload позволяет браузеру автоматически начинать загрузку видео, что может быть полезно, если размер видео достаточно большой. Атрибут controls позволяет установить стандартные элементы управления видеопотоком.

Лишнее свидетельство того, что, нравится нам это или нет, но HTML5 обосновался здесь всерьёз и надолго, УЖЕ превратившись в стандарт. Мы делали интересные обзоры по данной теме в нашем журнале и прежде, приводя примеры роскошных новых сайтов, сконструированных средствами HTML5. Чтобы не повторяться, я решил предложить вам новую подборку образцов, не вошедших в предыдущие публикации, наглядно демонстрирующих передовые достижения, ставшие возможными, благодаря HTML5. Некоторые из них, правда, не такие уж новые, но есть и совсем свежие примеры. А также несколько сайтов, в оригинальном оформлении которых прослеживаются, пусть пока и не слишком явно, новые, но уже прижившиеся приёмы.

Надеюсь, подборка вдохновит и порадует вас. Всемирная паутина ждёт своих новаторов!

Хотелось вам когда-нибудь увидеть эпизоды из собственной жизни в качестве видео-ряда клипа на песню одной из ваших любимых групп? Благодаря HTML5, это стало не только возможным, но и легко осуществимым в вашем браузере. Заходите на страницу The Wilderness Downtown и указывайте там адрес дома, в котором прошло ваше детство. А дальше смотрите и наслаждайтесь удивительным путешествием в ваше прошлое, куда вас под музыку The Arcade Fire отправят Google Maps и Крис Милк (Chris Milk, режиссёр фильма).

02.

Компактная и гибкая ОС на основе Linux, обеспечивающая вам беспрепятственный доступ к нужным приложениям – как сетевым, так и встроенным.

03.

Хотите посмотреть на слово или фразу, набранные всеми шрифтами, заложенными в ваш компьютер, и представленные немного удобнее, чем в развёртывающемся меню? Что ж, пожалуйста. Попробуйте сами!

04.

Почему эта игра не попалась мне в начальной школе, когда я учился печатать? Серьёзно, если сумеете оторваться от неё, не дойдя до "10 атаки", то вы - более волевой человек, чем я. Z-type стимулирует развитие навыков быстрого и грамотного набора текста, используя элемент HTML5 Canvas, звуковые эффекты и javascript в космическом антураже, где вам угрожают пришельцы и астероиды. Давайте, попробуйте!

05.

Кто сказал, что прямолинейность и броскость (присущая, например, Flash-элементам) рррраздражают? Уж точно, не Nike, ведь сайт этой фирмы, прекрасно оформленный и отнюдь не режущий глаз, наглядно демонстрирует нам возможности HTML5 в плане отображения природной красоты совершенно по-новому. Зайдите и посмотрите.

06.

Новейший и лучший (однако, это спорное утверждение) способ представить доказательства того, что увиденное вами в небе не было иллюзией, - запечатлеть его на этом HTML5-холсте, разработанном ребятами из команды Klowdz. Можно даже купить оттиски ваших художеств! А ещё они обещают в скором будущем открыть "состязательный" раздел, где вы сможете до бесконечности спорить с друзьями о том, правое полушарие чьего мозга развито лучше.

07.

Ещё один из любопытных пробных проектов серии "Chrome Experiments", Canvas Cycle похож на окно редактирования, встроенное в вашу игровую приставку Super Nintendo. С его помощью можно выбирать 8-битные эпизоды из целого их ряда, настраивать параметры воспроизведения звука, масштабировать изображение, задавать скорость цикличного проигрывания (движения воды/звукового сопровождения), применять различные модификации циклов и, естественно, варьировать цвета.

08.

Трёхмерный калькулятор, сконструированный средствами HTML5, и позволяющий вам рассматривать объёмные диаграммы путём их вращения с помощью кнопок мыши. Что тут можно добавить? Вращайте!

09.

Эта гремучая смесь "зацепила" меня сильнее всех остальных примеров в нашей подборке. Почему? Да потому, что API-интерфейс от Google Maps позволяет вам снимать с изображения его модифицированные кальки, используя холст HTML5 Canvas. Замечательнее всего то, что возможности применения этой функции, очевидно, безграничны, при всей её практичности. В нашем конкретном случае мы видим, сколько велосипедов сейчас можно взять на прокат в пунктах вело-сети London Cycle, по данным, полученным через API-интерфейс Boris Bikes.

10.

Веб-приложение, дающее вам возможность извлекать картинки с различных сетевых ресурсов, подобных Flickr, и редактировать/сохранять их, используя для обработки основной набор весьма действенных инструментов.