Новые технологии

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

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

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

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

Мультимедиа

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

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

Тег <сanvas>

Тег <сanvas> - это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими.

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

Аудио/Видео

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

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

API и JavaScript

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

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

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

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