HTML5 семантические элементы

HTML5 семантические элементы доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало<header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению.

Элемент <header> - Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип, группировать основной заголовок или группу заголовков, которые в свою очередь могут быть обернуть элементом <hgroup>. В html-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

Элемент <hgroup> - Используется для группировки элементов <h1> - <h6> в случае, когда заголовок имеет сложную структуру, например, уточняющие подзаголовки, альтернативные заголовки и т.п.

Элемент <nav> - Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты<nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

Элемент <article> - Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.

Элемент <section> - Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое, не используется многократно и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты.

Элемент <footer> - Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того,<footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

HTML5 аудио

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

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

HTML5-элемент <audio> используется для внедрения звукового контента в веб-страницы. В общем виде html-разметка имеет следующий вид:

<audio src="name.ogg" controls></audio>

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.

В настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента <source>. Одновременно можно добавить резервный контент для браузеров, которые не поддерживают элемент<audio>.

<audio controls>

<source src="name.ogg" type="audio/ogg">

<source src="name.mp3" type="audio/mpeg">

<a href="sounds/name.mp3">Скачать name.mp3</a>

</audio>

HTML5 формы

HTML формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

Элемент <form> - Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.