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

Семантические элементы в HTML5 доступно описывают свой смысл и назначение как для браузеров так и для разработчиков.

Ранее, до HTML5, вся разметка страницы строилась на элементе <div> с присвоенными ему классами и идентификаторами. Классы и идентификаторы присваивались для настройки отображения элемента на веб-странице.

В HTML5 появились совершенно новые семантические элементы. Они позволяют более понятно структурировать контент, выполнить его группировку. А так же позволяют размечать текстовое содержимое страницы. Все новые элементы позволяют улучшить структуру страницы, добавив смысловое значение их содержимому. Но не смотря на нововведение к новым элементам в HTML5 не применяются никакие правила отображения. Поэтому их отображение можно настроить по своему усмотрению. Для всех элементов доступны глобальные атрибуты.

Согласно новой спецификации HTML5 каждый элемент принадлежит к определенной категории. Каждая из категорий группирует элементы со схожими характеристиками.

Общие категории элементов:

Текстовое содержимое;
Потоковое содержимое;
Интерактивное содержимое;
Секционное содержимое;
Мета содержимое;
Встроенное содержимое;
Заголовочное содержимое.

Элемент <header>

Категории контента: потоковое содержимое.

Данный элемент группирует внутри себя вводные и навигационные элементы. Он не является обязательным в структуре веб страницы. Он может содержать заголовки, форму поиска, содержание раздела и тп. В одном документе HTML может содержаться несколько таких элементов и располагаться в любом месте страницы. Однако его нельзя помещать внутрь элементов <footer>, <address> или другого элемента<header>

Пример использования элемента:

<header>
  <h1>Мой сайт</h1>
  <nav>
    <ul>
      <li><a href="">Авторы</a>
      <li><a href="">Блог</a>
      <li><a href="">Контакты</a>
    </ul>
  </nav>
</header>

Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.

Предназначен для создания блока навигации по сайту или по веб странице. Он не обязательно должен находиться в элементе <header>. На одной странице может быть несколько блоков навигации. Он не заменяет собой теги <ol> и <ul>, а всего лишь обрамляет их. Стоит учитывать что не стоит обрамлять в <nav> все группы ссылок. Его стоит использовать только для обрамления главных навигационных блоков. В качестве элементов панели навигации можно использовать не только теги <ol> или <ul>.

Пример использования:

<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>


<nav>
  <p><a href="">...</a></p>
  <p><a href="">...</a></p>
</nav>

Кроме этого внутрь данного элемента.

Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.

Независимы обособленный блок, который используется в основном для группировки записей, статей, публикаций, комментариев и тп. Как правило начинается с зоголова и может использоваться многократно. Так же может дублироваться на других страницах сайта и содержать внутри другие элементы <article>.

Пример использования:

<article>
  <header>
    <h2>...</h2>
  </header>
  <p>...</p>
  <footer>
  Опубликовано в категории<a href="">Музыка</a>.
    <a href="">0 комментариев</a>
  </footer>
</article>

Его рекомендуется использовать в том случае если содержимое элемента явно указано в схеме документа.

Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.

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

Пример использования:

<article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>
  <h1>Заметки о природе</h1>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
</section>
<section>
  <h1>Исторические заметки</h1>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
</section>

Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.

Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

Элемент <footer>

Категории контента: потоковое содержимое.

В основном представляет собой нижний колонтитул. Обычно содержит информацию об авторе, данные о копирайте и тп. В одном документе может несколтко таких элементов. Каждая страница сайта и кажда статья может иметь собственный вутер.

Пример использования:
<footer>
  <address>...</address>
  <small>@2014...</small>
</footer>

Элемент <address>

Категории контента: потоковое содержимое.

Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

Элемент <main>

Категории контента: потоковое содержимое.

Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>
<header>
  <h1>Заголовок</h1>
    <nav>
      <ul>
        <li><a href="index.html">Главная</a></li>
        <li><a href="about.html">О нас</a></li>
        <li><a href="contact.html">Кондакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <header>
        <h2>Заголовок2</h2>
          <nav>
            <ul>
              <li><a href="#">ссылка</a></li>
              <li><a href="#">ссылка</a></li>
              <li><a href="#">ссылка</a></li>
            </ul>
          </nav>
      </header>
      <section id="basic">
        <h3>Заголовок3</h3>
          <p>...</p>
      </section>
      <section id="app">
        <h3>заголовок4</h3>
          <p>...</p>
      </section>
      <section id="temp">
        <h3>Описание</h3>
          <p>...</p>
      </section>
      <footer>
        
      </footer>
      </section>
    </main>
    <footer>
      <small>Copyright © 2019</small>
    </footer>
</body>

Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.

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

<figure>
    <img src="picture.jpg" alt="Осень">
    <figcaption>Осенний лес</figcaption>
</figure>

Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px