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

Семантические элементы являются одним из значимых нововведений в 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:someone@example.com">Написать автору</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>

Результат




Related articles