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

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

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

Новые HTML5 элементы

1. Секционные элементы

1.1. Элемент <header>

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

Элемент <figure> &%238212; блочный, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin. margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em.

Элемент <figcaption> &%238212; блочный, по ширине равен ширине элемента <figure>. высота равна 18px .

3. Семантика для текстового содержимого

3.2. Элемент <time>

Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime. в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

3.3. Элемент <mark>

Текст, помещенный внутрь тега <mark>. выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

3.4. Элемент <bdi>

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

3.5. Элемент <wbr>

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