Стандарт 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 позволяет установить стандартные элементы управления видеопотоком.

Введение

HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.

Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.

Итак, что же нового в HTML 5?

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

Тег

Тег

Контекстные меню

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

Новые структурные элементы

Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:

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

• - может быть использован, например, для создания диаграмм.

Новые inline-элементы

Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:

• - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
• - можете использовать этот тег для вывода времени или даты в текстовом блоке.
• - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
• Может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.

Новые типы полей ввода

HTML5 добавляет ряд новых типов для полей ввода данных:

• datetime
• datetime-local
• month
• number
• range
• email

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

Устаревшие (deprecated) элементы

Следующие элементы HTML считаются устаревшими:

• acronym
• applet
• basefont
• center
• frame
• frameset
• isindex
• noframes
• noscript
• strike

Синтаксис для задания кодировки

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

Интерактивные нововведения

Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:

• - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
• - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
• - ранее нерекомендуемый, тег вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы , которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.

Новое определение типа документа (DTD)

В HTML5 стало гораздо проще объявлять DTD: Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.

Необязательный href в ссылках

Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.

Атрибут async

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

Заключение

Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.5 будет поддерживать теги

Так что, ждем с нетерпением.

Кому интересно, спецификацию HTML 5 можно найти по следующей ссылке -

HTML 5 - это новая версия самого популярного языка разметки.

Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5 .

В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center ).

Добавлены следующие элементы:

1) header .

2) footer .

4) section .

5) article .

6) aside .

7) figure .

8) dialog .

9) m (mark) .

10) time .

11) meter .

12) progress .

13) video .

14) audio .

15) details .

16) datagrid .

17) menu .

18) command .

В остальном осталось всё без изменений. То есть никаких проблем с не возникнет, при условии, что Вы знакомы со стандартным . Собственно, всё осталось как прежде, только добавились новые возможности.

Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по , упростив ту же самую разметку.

Наверняка, Вы задаётесь вопросом: "А будет ли работать HTML 5 со старыми браузерами?". Ответ таков: "Конечно, да, но новые элементы, разумеется, отображаться не будут". Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.

Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4 , которому уже более 10-ти лет.

А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.

Перевод: Влад Мержевич

1. Это не одна большая вещь

Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег

2. Вам не надо откидывать имеющееся

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email" , поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

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