Семантические элементы являются одним из значимых нововведений в 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>Результат
Элемент <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>Результат
Элемент <article>
Элемент <article> определяет независимый блок, в котором группируются записи (статьи, публикации в блоге, комментарии и т.д).
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<article>
<h1>Заголовок статьи</h1>
<p>Текст статьи</p>
</article>
</body>
</html>Результат
Элемент <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>Результат
Элемент <aside>
Элемент <aside> oн определяет раздел, в котором содержится информация, дополняющая основной отдел. Эта информация является факультативной, и если ее удалить, основное содержимое не пострадает. Такой информацией могут быть комментарии, справочная информация, списки терминов, коллекция ссылок и т.д.
Пример
<!DOCTYPE html>
<html>
<body>
<p>Я люблю смотреть Игру Престолов.</p>
<aside>
<h4>Игра Престолов</h4>
<p>Американский телесериал в жанре фэнтези, основанный на цикле романов «Песнь Льда и Огня» Джорджа Р. Р. Мартина.</p>
</aside>
</body>
</html>Результат
Элемент <footer>
Элемент <footer> формирует нижний колонтитул секции или корневого элемента, в котором находится. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.
Пример
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Автор статьи: Арина Петрова</p>
<p> <a href="mailto:[email protected]">Написать автору</a>.</p>
</footer>
</body>
</html>Результат
Элемент <address>
Элемент <address> определяет контактную информацию автора/владельца документа или статьи.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<address>
Автор: Алина Петрова <br/>
3-я улица Строителей, д. 25<br/>
Москва<br/>
</address>
</body>
</html>Результат
Элемент <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>Результат
Элемент <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>Результат
Элемент <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>Результат
Элемент <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>Результат
Элемент <mark>
Элемент <mark> используется для выделения важного содержимого или ключевых слов. По умолчанию выделяет желтым цветом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
</body>
</html>Результат
Элемент <bdi>
Элемент <bdi> определяет фрагмент текста двунаправленного форматирования, который должен быть изолирован от остального текста.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Пример использования элемента bdi</h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> Это предложение на арабском автоматически отображается справа налево.</p>
</body>
</html>Результат
Элемент <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>Результат
Практикуйте свои знания
