Новые теги HTML

Работа над HTML5 началась еще в далеком 2004-м. Стремительная поддержка браузерами элементов HTML5 привела к использованию их для построения веб страниц в новом формате. Смотрите список всех новых элементов HTML 5 рекомендуемых использовать как стандарт для разметки.

Оглавление:
  1. Что же нового в HTML5?
  2. Контекстные меню
  3. Новые структурные элементы
  4. Оформление содержимого
  5. Новые inline-элементы
  6. Новые типы полей ввода
  7. Устаревшие элементы
  8. Синтаксис для указания кодировки
  9. Интерактивные нововведения
  10. Тип документа (DTD)
  11. Необязательный href в ссылках
  12. Атрибут async для JavaScript
  13. Заключение

Что же нового в HTML5?

Смотрите таблицу поддержки новых и старых элементов в разных версиях HTML.

<canvas>

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

<video> HTML5 и <audio> HTML5

Тег HTML5 video упрощает добавление видео. Он может содержать атрибуты src, type, autoplay, poster, loop, tabindex, metadata. Также тег <video> допускает задание текста, описания для SEO и субтитры. В идеале это должна быть полная текстовая интерпретация видео. Для этого используется элемент HTML5 track.

Тег <audio> очень похож на <video>, только он предназначен для аудио-файлов. Как правильно подключить audio HTML5 и какие возможности управления аудио треками смотрите на странице HTML5 аудио.

к меню ↑

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

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

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

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

  • <template> — используется для создания нового коренного элемента в дереве документа.
  • <section> — секция, либо параграф (без h1 или h2 h3 … не использовать)
  • <header> — верхний колонтитул страницы (не путать с <head>)
  • <footer> — нижний колонтитул страницы.
  • <nav> — содержит набор ссылок на другие страницы. Например, вы можете расположить там навигацию по вашему сайту.
  • <article> — в этот тег может быть включена, например, статья блога.
  • <aside> — может быть использован для предоставления дополнительной информации к текстовому блоку.
  • <address> — предназначен для содержания адреса автора.
к меню ↑

Оформление содержимого

  • <main> — главный элемент для содержания в теле документа.
  • <picture> — определяет размер окна просмотра для выбора оптимального изображения, подробно о теге на странице HTML5 picture для изображений.
  • <figure> — может быть использован, например, для изображения, рисунка, диаграмм — короче для графики.
  • <figcaption> — применяется для подписи изображения.
к меню ↑

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

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

  • <mark> — помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
  • <time> — можете использовать этот тег для вывода времени или даты в текстовом блоке.
  • <meter> — для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
  • <progress> — может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.
  • <datalist> — используется для быстрого заполнение форм, чтобы не путать с details, смотрите пример HTML5 datalist.
к меню ↑

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

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

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url
  • tel
  • search
  • password
  • color

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

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

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

  • acronym
  • pubdate
  • applet
  • hgroup
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u

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

Синтаксис для задания кодировки документа в HTML5 теперь выглядит очень просто: <meta charset="utf-8">

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

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

  • <details> — дополнительная информация о чем либо. Например, данный тег details HTML5.1 может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет. Тег <summary> для изменения текста по умолчанию.
  • <datagrid> — в отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для списка с выбором пунктов, inline-редактированием данных, сортировкой и т.п.
  • <menu> — ранее рекомендуемый, тег <menu> вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы <command>, которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.
  • <dialog> — открывает диалоговое окно, может быть оформлен с помощью обычных CSS как модальное окно. Для открытия и закрытия окна диалога требуется не сложный JavaScript API .show() и .close() см. страницу HTML5 dialog в документе
к меню ↑

Тип документа (DTD)

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

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

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

Атрибут async для JavaScript

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

Заключение

HTML5 может по праву считаться усовершенствованием стандарта HTML, которого мы так долго ждали. Он вносит полезные дополнения в язык и делает создание веб-приложений более простым и приятным. Теперь Консорциум W3C рекомендует HTML5 как стандарт для разметки веб-страницы.