HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.
Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.
- это поле для рисования двухмерной графики, управлямый с помощью JavaScript. Вы можете использовать его для построения графиков и других динамических изображений.
Тег упрощает добавление видео клипов на HTML-страницы. Он может содержать атрибуты src, autoplay и loop. Тег также допускает задание текстового описания для видео (например, для незрячих людей). В идеале это должна быть полная текстовая интерпретация видео.
Тег очень похож на , но предназначен для аудио-файлов. Неожиданно, не правда ли?
HTML5 также предусматривает метод для простого добавления на веб-страницу контекстных меню. Возможно, такие меню не слишком полезны для обычных сайтов. Зато для приложений, в которых множество функций хотелось бы сгруппировать и отображать контекстно, такая возможность в самый раз.
Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:
Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:
Некоторые из них широко применяются в пользовательских интерфейсах desktop-приложений. И, вероятнее всего, они будут уже хорошо знакомы всем вашим пользователям.
Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:
В HTML5 стало гораздо проще объявлять DTD: Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.
Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.
Атрибут дает браузеру подсказку, что блок сценария может выполняться асинхронно, вместо того, чтобы ждать, пока страница не загрузилась полностью.
Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.5 будет поддерживать теги и .
Так что, ждем с нетерпением.
Веб-технологии постоянно эволюционируют. Каждый день создаются новые сайты, которые расширяют возможности HTML. HTML 4 существует в течение почти десяти лет, но издатели ищут новые способы расширения функционала этого формата. Однако разнообразие языков и браузеров ограничивает некоторые его возможности.
Чтобы дать разработчикам более гибкий, совместимый продукт, а также позволяющий делать проекты более интерактивными и интересными, HTML 5 внедряет и расширяет спектр функций, включая формы управления, API, мультимедиа, структуру и семантику.
Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG . Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.
Заметим, что спецификация находится еще в стадии разработки, и весьма далека от завершения. Таким образом, вполне возможно, что любые функции, упомянутые в этой статье, могут измениться в будущем. Данная статья призвана описать новые возможности формата HTML версии 5.
HTML 5 вводит целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией - выделять их, используя элементы div, присваивая ему класс или id.
На иллюстрации типичный 2х колоночный макет с использованием div элементов, с присвоением им класса или id. Структура сожержит - «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -
Использование div элементов преимущественно, потому что в текущей версии HTML 4 не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из который имеет свое отдельное название.
...
...
...
...
...
Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 - h6), это дает возможность внедрить в каджый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в предыдущей версиии HTML. Спецификация включает в себя детальный алгоритм для генерации границ . Эти элементы могут быть использованы как авторские и браузерные инструменты для генерации оглавления и помощи пользователям в навигации по документу.
Заметим, что для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.
Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».
Элемент «header»
представлет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.
A Preview of HTML 5
By Lachlan HuntExample BlogInsert tag line here.
Элемент «footer»
представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.
Элемент «aside»
определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.
HTML5 представляет собой последнюю версию основного языка разметки web – страниц. За последние 10 лет HTML не имел серьёзных изменений, что является немного странным в соответствии с тем как стремительно развиваться web-технологии. И вот наконец нам переставлен HTML5, и что же нового мы получили в этой версии, расскажет эта статья.
У HTML5 в сравнении с предыдущим XHTML не такие строгие правила, теперь вы можете:
Новые теги.
И так в HTML5 появились новые теги.
Есть также исключённые теги, которые являются неактуальными и не рекомендованы для использования.
Так что если вы знакомы с предыдущими версиями HTML, то у вас не будет никаких сложностей в понимании HTML5. А новые теги и атрибуты помогут вам в создании новых и улучшения существующих сайтов, и благодаря новым возможностям это делать станет намного легче.
Но возникает вопрос, а будет ли HTML5 правильно отображаться в старых версия браузеров.
Конечно будет, естественно кроме новых тегов. Страницы сделанные с использованием HTML5 будут отображаться во всех браузерах, но те кто использует новые версии могут получить и увидеть намного больше.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги
и , чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.
Теперь нам доступны следующие структурные теги:
Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.
Цель его состоит в том, чтобы определить верхнюю часть HTML документа.
Этот тег применяется для того, чтобы определить нижнюю часть документа.
Цель его в том, чтобы определить список ссылок на другие HTML страницы.
Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.
Вот к примеру HTML код с новыми тэгами.
Заголовок
Заголовок 1
Некоторый текст...
Заголовок 2
Некоторый текст..
Ссылка 1
Ссылка 2
Copyright 2011
My Company
Как вы видите мы поместили название нашего документа в теги
. Затем мы добавили раздел к нашей странице при помощи тэга
и вложили в него 2 тега
, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг
. И наконец мы создали нижний колонтитул нашей страницы при помощи тега
.
Так и что же здесь особенного? Мы могли сделать тоже самое используя старый хороший тэг
. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
Тег
используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски.
Основной текст... Цитата...
Веб-браузер никак не выделяет текст заключенный в тэге
, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.
Следующий тэг
используется для создания диалогов между пользователями:
Пользователь 1
Сообщение пользователя 1
Пользователь 2
Сообщение пользователя 2
В тег
мы вложили еще два тэга:
- содержащий имя пользователя и
для отображения сообщения пользователя.
Третий тег
используется для того чтобы указать название изображения.
Заголовок изображения
=
"Некоторое изображение" src="/image.jpg" width="200" height="200">
Мы использовали тэг
чтобы указать название изображения, тег ![]()
, чтобы вставить определенное изображение и тэг
чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block;
чтобы они должным образом отображались. Что касается старых версий Internet Explorer то необходимо так же добавить следующее:
<
script>
document.createElement
("header"
)
;
document.createElement
("footer"
)
;
document.createElement
("section"
)
;
document.createElement
("aside"
)
;
document.createElement
("article"
)
;
document.createElement
("nav"
)
;
Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега есть по умолчанию, поэтому его мы можем не добавлять.
Встроенные теги.
У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
Тег используется для обозначения какой-то части текста для определенных целей, например чтобы показать важную часть текста.
Некоторая очень важная часть текста...
Мы вставили определенную важную часть в тэг
.
Тег
используется для обозначения времени и даты в каком либо тексте, например:
Тег
используется чтобы показать некоторые числа в определенном формате, например:
ежемесячный доход$15,000...
У тега
есть 6 полезных атрибутов:
- value
- задает фактическое значение чего-то;
- min
- задает минимальное значение чего-то;
- low
- определяет предел, при достижении которого значение считается низким;
- high
- определяет предел при котором значение считается низким;
- max
- определяет максимальное значение чего-то;
- optimum
- определяет оптимальное значение чего-то.
Например:
Концентрация сахара: 8.2.
Последний новый тэг
используется чтобы показать некоторую точку некоторого прогресса, например, процент завершения чего-то:
Завершение: 20%
Тег
имеет два атрибута value - текущее значение прогресса и max - максимально значение прогресса.
Мультимедийные теги.
В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа и
.
Вот пример применения тега
:
Сейчас играет...
У этого тега имеется три атрибута:
- src
- путь к звуквому файлу;
- autoplay
- определяет начать ли проигрываться файлу сразу после загрузки страницы в браузере;
- loop
- определяет сколько раз аудио должно проигрываться.
Тег
позволяет разместить внутри себе другие тэги, содержащие некоторую информацию.
Тег
используется для того, чтобы вывести на страницу видео файлы.
Клип...
Атрибут src
определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио и видео файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.
Интерактивные теги.
В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
Тег
являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег в HTML5 выполняет роль контейнера для тега
, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.
Используя эти тэги, мы можем создавать различные интерактивные меню.
Тег
используется чтобы показать некоторую дополнительную информацию, например поле справки.
Некоторый контент Информация справки ...
Тег
используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.
<
script>
var
example =
document.getElementById
("sample"
)
;
var
context =
example.getContext
("2d"
)
;
ctx.fillStyle
=
"#FF0000"
;
ctx.fillRect
(0
,
0
,
80
,
100
)
;
<
canvas id=
"sample"
width=
"300"
height=
"300"
>
Ваш браузер не поддерживает HTML5.
Атрибут ID используется для идентификации тега
как объекта DOM (Document Object Model)
. Далее указываются атрибуты ширины и высоты. Текст заключенный между тегами
будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.
Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.
Перевод: Влад Мержевич
1. Это не одна большая вещь
Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.
Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег
, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега
.
2. Вам не надо откидывать имеющееся
Нравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.
Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email"
, поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.
3. Легко начать
«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент
должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:
Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде
,
,
и
.
4. Это уже работает
Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом
, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.
Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.
5. Он уже здесь
Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:
Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.
HTML5 уже здесь. Давайте погрузимся в него.
Стандарт 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
позволяет установить стандартные элементы управления видеопотоком.
