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

Новые семантические элементы

В HTML5 появились возможность использования семантических элементов, назначение которых понятно как разработчикам, так и браузерам. К примеру, тэг <div> не несет никакой смысловой нагрузки, он просто абстрактный блок в HTML документе. Чтобы придать этому блоку какой-то смысл ему обычно назначают id или class со значением описывающее назначение данного элемента. Например, так:

<div id=”header”> или <div class=”footer”>

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

В HTML5 предыдущие блоки можно описать новыми семантическими элементами:

<header> или <footer>

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

Краткий набор новых семантических элементов, которые появились в HTML5: <header>, <footer>, <nav>, <section>, <aside>, <article>, <author>, <mark>.

По именам этих элементов можно легко догадаться о их назначении.

Простой пример HTML5 верстки:

[html]

Page header

Article #1

This is the content of the first article.

Article #2

This is the content of the second article.
Copyright 2012

[/html]

Поддержка аудио и видео

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

Воспроизведение аудио файлов на странице осуществляется с помощью тэга <audio>, например, следующим образом:

[html]

[/html]

В разных браузерах на странице это будет выглядеть по-разному, например в Opera 11, это будет следующим образом:

Атрибуты controls, autoplay и loop служат для отображения управляющих кнопок, авто воспроизведения и циклического воспроизведения файла соответственно. Элемент <source> указывает на местоположение аудио файла и его формат. Так как, разные браузеры поддерживают разные кодеки для воспроизведения аудио файлов, существует вероятность отсутствия нужного кодека и невозможность воспроизведения. Поэтому, следует задавать дополнительные тэги <source> и предоставить аудио файл в нескольких форматах.

Если браузер не поддерживает <audio>, будет отображаться текст из этого тэга.
Дополнительную информацию об элементе <audio> можно найти тут

Встраивание в веб-страницу видео происходит аналогичным способом, например так:

[html]

[/html]

Дополнительную информацию об элементе < video> и возможные его атрибуты можно найти тут

Рисование в HTML5 используя элемент canvas

Еще один интересный элемент в HTML5 является <canvas>, он служит холстом для рисования на странице, используя JavaScript.

Ниже приведен простой пример, демонстрирующий работу элемента <canvas>. Я собираюсь нарисовать синий квадрат с белой буквой «М» внутри него. Пример очень простой и хорошо закомментирован, поэтому в дополнительных пояснениях не нуждается.

[html]

Ващ браузер не поддерживает элемент canvas.

[/html]

[javascript]

[/javascript]

Поддержка браузерами

На данный момент все современные браузеры в какой-то мере поддерживают HTML5. Но далеко не в полной мере.

Хуже обстоят дела со старыми браузерами (Например, Internet Explorer 8), они и вовсе не поддерживают HTML5.

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

Исчерпывающую информацию о поддержке современными браузерами стандарта HTML5 можно найти тут.