Семантические элементы являются одним из значимых нововведений в HTML5. До их появления вся разметка веб-страниц строилась при помощи элементов <div>, которым присваивались идентификаторы (id) или классы (class). Для размещения боковых панелей, верхних и нижних колонтитулов, элементов навигации и прочих структурных блоков использовались блоки div с соответствующими значениями (например, div=”footer”).
В HTML5 появились новые семантические элементы для структурирования, группировки контента и разметки текстового содержимого. Они четко описывают, какой контент содержат (было <div id="footer">, стало<footer>).
Рассмотрим подробнее семантические элементы и их значения.
Элемент <header>
Элемент <header> формирует заголовочный блок или “шапку” документа, используется как контейнер для группировки вводных и навигационных элементов (логотип, навигационное меню, форма поиска и т.д.).
Пример
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline-block;margin-right:10px;color:#778899}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Главная</li>
<li>О нас</li>
</ul>
</nav>
<h1>Добро пожаловать на наш сайт</h1>
<hr>
</header>
<article>
<header>
<h2>Заголовок раздела</h2>
<p>Абзац текста.</p>
</header>
</article>
</body>
</html>
Результат
![Добро пожаловать на наш сайт](/uploads/media/default/0001/02/3050b1e6ef97a4acef4b7c133eb910d51e909bbd.png)
Элемент <nav>
Элемент <nav> формирует основной блок навигационных ссылок. Обратите внимание, что не все ссылки в HTML документе могут быть помещены внутрь элемента <nav>, он может включать в себя только крупные навигационные блоки.Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<header>
<h1>Курсы программирования</h1>
</header>
<nav>
<a href="/uchebnik-html.html">HTML</a> |
<a href="/learn-css.html">CSS</a> |
<a href="/learn-javascript.html">JavaScript</a> |
<a href="/learn-php.html">PHP</a> |
</nav>
<h2>Добро пожаловать на сайт W3Docs!</h2>
</body>
</html>
Результат
![Добро пожаловать на сайт W3Docs](/uploads/media/default/0001/02/e3c02b90f9eddd68388832cb79a374449b2ac997.png)
Элемент <article>
Элемент <article> определяет независимый блок, в котором группируются записи (статьи, публикации в блоге, комментарии и т.д).
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<article>
<h1>Заголовок статьи</h1>
<p>Текст статьи</p>
</article>
</body>
</html>
Результат
![Текст статьи](/uploads/media/default/0001/02/86398e57043766738ced7549d04188563129ad8f.png)
Элемент <section>
Элемент <section> используется для группировки тематического содержимого (оглавление, программа, разделы и т.д.).
Пример
<!DOCTYPE html>
<html>
<head>
<title>Использование тега section</title>
</head>
<body>
<section>
<h1>Язык гипертекстовой разметки HTML</h1>
<p>Стандартизированный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.</p>
</section>
<section>
<h1>CSS</h1>
<p>Формальный язык, который используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.</p>
</section>
</body>
</html>
Результат
![Язык гипертекстовой разметки HTML](/uploads/media/default/0001/02/17c6662136c4e56bf15cecf024e9a0ed28bda3af.png)
Элемент <aside>
Элемент <aside> oн определяет раздел, в котором содержится информация, дополняющая основной отдел. Эта информация является факультативной, и если ее удалить, основное содержимое не пострадает. Такой информацией могут быть комментарии, справочная информация, списки терминов, коллекция ссылок и т.д.
Пример
<!DOCTYPE html>
<html>
<body>
<p>Я люблю смотреть Игру Престолов.</p>
<aside>
<h4>Игра Престолов</h4>
<p>Американский телесериал в жанре фэнтези, основанный на цикле романов «Песнь Льда и Огня» Джорджа Р. Р. Мартина.</p>
</aside>
</body>
</html>
Результат
![Игра Престолов](/uploads/media/default/0001/02/e07b167cfd8e09117eed6896373cd847034e6e8c.png)
Элемент <footer>
Элемент <footer> формирует нижний колонтитул секции или корневого элемента, в котором находится. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.
Пример
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Автор статьи: Арина Петрова</p>
<p> <a href="mailto:[email protected]">Написать автору</a>.</p>
</footer>
</body>
</html>
Результат
![Автор статьи](/uploads/media/default/0001/02/3c32c70b68660ff81ec415d1c9d3c7cfffde2b14.png)
Элемент <address>
Элемент <address> определяет контактную информацию автора/владельца документа или статьи.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<address>
Автор: Алина Петрова <br/>
3-я улица Строителей, д. 25<br/>
Москва<br/>
</address>
</body>
</html>
Результат
![Автор: Алина Петрова](/uploads/media/default/0001/02/a2a3d155a0fdeb2d0fdc82c4fdac1c0f6a6e70ad.png)
Элемент <main>
Элемент <main> формирует основное содержимое документа (содержимое элемента <body>). Содержимое тега должно быть уникальным и не дублировать однотипные блоки, которые повторяются в других документах, таких как шапка сайта (header), нижний колонтитул (footer), меню, форма поиска, информация об авторских правах и т.д.
Пример
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Языки программирования</h1>
<p>Языки HTML и CSS предназначены для верстки сайтов.</p>
<article>
<h2>HTML</h2>
<p>HTML (Hyper Text Markup Language) - язык гипертекстовой разметки, который используется для создания веб-страниц.</p>
</article>
<article>
<h2>CSS</h2>
<p>CSS это язык стилей, определяющий отображение HTML-документов.</p>
</article>
</main>
</body>
</html>
Результат
![Языки программирования](/uploads/media/default/0001/02/51b3fd4f3ef43fd41d516bf9227804c664b71cec.png)
Элемент <figure>
Элемент <figure> определяет автономный контент, являющийся самостоятельным элементом основного потока. Используется для добавления кратких аннотаций к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Малыш</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
</figure>
</body>
</html>
Результат
![A cute baby](/uploads/media/default/0001/02/e43037dd2aab8bc4d8525df376df319791a9d6f9.png)
Элемент <figcaption>
Элемент <figcaption> используется для добавления подписи или пояснений к содержимому тега <figure>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<p>Красивый малыш</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
<figcaption>Fig.1 - Голубоглазый ребенок.</figcaption>
</figure>
</body>
</html>
Результат
![A Cute Baby](/uploads/media/default/0001/02/4634f47907c39215679911ccdaec278024486ee7.png)
Элемент <time>
Элемент <time> определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Игра состоится <time datetime="2014-09-28 19:00">28 сентября</time>.</p>
<p>Начало в <time>19:00</time></p>
</body>
</html>
Результат
![Игра состоится...](/uploads/media/default/0001/02/2eadb492fc7b231da72b986e7162ae5a00a91c2e.png)
Элемент <mark>
Элемент <mark> используется для выделения важного содержимого или ключевых слов. По умолчанию выделяет желтым цветом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
</body>
</html>
Результат
![HTML](/uploads/media/default/0001/02/fad698e6330c016cd3dc3d6f83ae91621720eb83.png)
Элемент <bdi>
Элемент <bdi> определяет фрагмент текста двунаправленного форматирования, который должен быть изолирован от остального текста.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Пример использования элемента bdi</h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> Это предложение на арабском автоматически отображается справа налево.</p>
</body>
</html>
Результат
![Пример использования элемента bdi](/uploads/media/default/0001/02/d8d848cee701d961cac1957add8ce381bbc76120.png)
Элемент <wbr>
Элемент <wbr> указывает браузеру место возможного разрыва длинной строки в случае необходимости.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>Пример текста без тега wbr.</p>
<p>Текст, в котором встречается самое длинное слово в русском языке метоксихлордиэтиламинометилбутиламиноакридин</p>
<p>Пример текста с использованием тега wbr.</p>
<p>Текст, в котором встречается самое длинное слово в русском языке метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
</body>
</html>
Результат
![Пример текста без тега wbr](/uploads/media/default/0001/02/23dca067a5ba7afcb964c825e1f0c1197b0e2ae5.png)