Новые технологии в языке HTML5

В этой статье-обзоре будут собираться и описываться новые технологии появившиеся в HTML5.

Семантика и структура сайта

В HTML5, появились семантические теги разделяющие структуру страницы сайта:
<article> </article> — обрамляют основной контент страницы (статью),
<header> </header> — обрамляют шапку страницы,
<footer> </footer> — обрамляют подвал страницы,
<nav> </nav> — обрамляют основное меню страницы,
<aside> </aside> — обрамляют боковую панель страницы (сайдбар),
<section> </section> — обрамляют повторяющиеся блоки на странице (например комментарии).

Мультимедиа

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

Раньше, чтобы просмотреть видеролик, прослушать музыку или поиграть в игрушку, в браузер нужно было загружать дополнительные плагины разработанные сторонними разработчиками (например флэш-плеер). Теперь благодаря HTML5 всё это можно делать без загрузки плагинов.

Тег <сanvas>

Тег <сanvas> — это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими. Тег <canvas> создан для того, чтобы заменить собою технологию Flash. С помощью тега <canvas> можно рисовать векторные фигуры (изображения), а с помощью JavaScript, манипулировать данными фигурами, создавая тем самым анимацию (мультфильмы и даже игры) на сайте.

Аудио/Видео

С помощью тега <audio> можно внедрять аудиофайлы на страницу и прослушивать их. Элемент <audio> также создает панель с кнопками проигрывания.

С помощью тега <video> можно внедрять видеофайлы на страницу и просматривать их. Элемент <video> также создает панель с кнопками проигрывания.

API JavaScript

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

Поддержка XML-технологий

В HTML-документ написанный с помощью языка HTML5, отныне можно внедрять технологии связанные с различными XML-форматами, например такими как SVG или MathML.

SVG

SVG — Scalable Vector Graphics (язык разметки масштабируемой векторной графики), является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.

Пример кода рисунка "зелёный круг":

<svg>
    <circle r="55px" cx="80px" cy="70px" fill="green" />
</svg>

Результат:

А вот что рисуют крутые пацаны с помощью SVG —
герб Шотландии на Википедии.

MathML

MathML — Mathematical Markup Language (язык математической разметки) XML-формат. С помощьюданного формата, можно описывать различные математические формулы.

Читать далее: Учебник HTML5