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

По спецификации секционными элементами являются article, aside, nav, section.

Все они нужны для построения семантических блоков контента.

Но прежде чем о них поговорим, о доступности.

О доступности

Доступность имеет важное значение, поскольку мы должны учитывать разные группы населения.

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

Другое дело использовать для этого семантические теги. Тогда по интерфейсу сайта можно легко сориентироваться даже не видя его.

section

Тег <section> используется для определения тематических групп контента в документе.

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

Элемент является семантическим, описывающий структура документа.

<section></section>

Назначение

<section> представляет собой самостоятельный блок контента с заголовком. Является важным контейнером для поисковых машин.

Используется для группировки частей сайта между собой.

Особенности

• Используйте <section>, когда контент внутри него представляет собой логическую, тематическую группу контента, которая имеет смысл в общей структуре документа.
• Секция должна иметь заголовок описывающий ее содержание.
• Не использовать <section> только для стилизации, для этого лучше использовать div.
• Контейнеры <section> можно вкладывать друг в друга.
• Если просто нужно обернуть элемент, то используйте div.
• Каждый блок сайта подразумевает элемент <section>, но не обязательно.
• <section> нельзя отделить в отличие от <article>.

Когда тут подойдет div:

• Стилизация. Если нужно просто как то визуально отобразить элемент
• Логика. Если нужно манипулировать элементов с помощью javascript.
• Без смысла. Если эта группировка не предоставляет логического смысла.

Родительские/Дочерние элементы

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

Примеры

Часть статьи

<article>
  <h1></h1>   
  <section>
    <h2></h2>
  </section>
  <section>
    <h2></h2>
  </section>
  <section>
    <h2></h2>
  </section>
</article>

Разделы страницы

<section>
    <h1>Введение</h1>
    <p>Это вводный раздел, который объясняет основные концепции.</p>
</section>

<section>
    <h2>Основная часть</h2>
    <p>Здесь представлена основная информация по теме.</p>
</section>

<section>
    <h2>Заключение</h2>
    <p>В заключительном разделе подводятся итоги и выводы.</p>
</section>

Структура страницы

<section>
  <header></header>
  <article>
    <header></header>
    <footer></footer>
  </article>
  <article>
    <header></header>
    <footer></footer>
  </article>
  <footer></footer>
</section>

<section>
  <header></header>
  <article>
    <header></header>
    <footer></footer>
  </article>
  <article>
    <header></header>
    <footer></footer>
  </article>
  <footer></footer>
</section>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

section {
  display: block;
}

article

Используется для определения независимого самодостаточного автономного контента, например сообщение в блоге, статья, новость.

<article></article>

Назначение

Тег article нужен для описания законченного конкретного раздела документа.

Особенности

• В отличие от тега <section>, что есть часть раздела, article - это законченный документ со всеми элементами <section>.
• article полноценен по смыслу и содержанию. Это может быть Запись в блоге, комментарий пользователя.
• article представляет из себя самостоятельный контент.
• Не обязательно отделять весь контент страницы тегом article, это излишне, так как страница и так является единым документом.

Однозначных правил как использовать article не существует.

Родительские/Дочерние элементы

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

Примеры

Шапка контент и подвал

<article>
  <header></header>
  <p></p>
  <footer></footer>
</article>

И здесь же расширенный пример

<article>
  <header>
    <h2></h2>
  </header>
  <p></p>
  <section>
    <h1></h1>
    <article>
      <footer></footer>
    </article>
    <article>
      <footer></footer>
    </article>
    <article>
      <footer></footer>
    </article>
  </section>
</article>

Превью статьи блога

<article>
    <h2>Заголовок статьи блога</h2>
    <p>Дата публикации:</p>
    <p>Это содержимое статьи блога.</p>
</article>
<article>
  <h2>Заголовок статьи блога</h2>
  <p>Дата публикации:</p>
  <p>Это содержимое статьи блога.</p>
</article>
<article>
  <h2>Заголовок статьи блога</h2>
  <p>Дата публикации:</p>
  <p>Это содержимое статьи блога.</p>
</article>

Новость

<article>
    <header>
        <h1>Заголовок</h1>
        <p>Опубликовано:</p>
    </header>
    <section>
        <p>Текст новостной статьи...</p>
    </section>
    <footer>
        <p>Источник:</p>
    </footer>
</article>

Комментарий

<article>
    <header>
        <p>Автор:</p>
        <time datetime="2025-04-02T13:34:00Z"></time>
    </header>
    <p>Это текст комментария пользователя.</p>
</article>

Вложенные комментарии

<article>
  <h2></h2>
  <section>
    <h3></h3>
    <article>
      <header></header>
      <p></p>
    </article>
    <article>
      <header></header>
      <p></p>
    </article>
    <article>
      <header></header>
      <p></p>
    </article>
  </section>
</article>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

section {
  display: block;
}

aside

Дополнительный контент, который косвенно связан с основным контентом страницы.

<aside></aside>

Назначение

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

Контент тега aside дополняет основную информацию страницы, но не является его частью.

Особенности

• Тег aside может быть размещен не только сбоку, но и в других местах страницы.
• Контент в aside должен дополнять основной контент, но не быть необходимым для его понимания.
• aside используется в зависимости от контекста, и может находиться в любом месте страницы, но предпочтительнее быть на одном уровне с <main> и <article>.
• aside нужен только разметки контента, для визуальной настройки блока лучше воспользоваться тегом div.

Родительские/Дочерние элементы

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

Примеры

Типичная разметка страницы

<main>
    <article>
        <h1>Основная статья</h1>
        <p>Это основной контент статьи.</p>
    </article>
</main>

<aside>
    <h2>Дополнительная информация</h2>
    <p>Здесь может быть размещена реклама, список связанных статей или другая дополнительная информация.</p>
</aside>

Или более полный вариант

<header>Шапка</header>
<nav>Навигация</nav>
<main>Основной контент</main>
<aside>Дополнительная колонка</aside>
<footer>Подвал</footer>

Все зависит от задачи

Дополнительный контент в блоге

<header>
  <h1></h1>
</header>
<aside>
  <nav>
    <h2></h2>
  </nav>
</aside>
<aside>
  <h2></h2>
</aside>
<article>
  <h2></h2>
</article>
<footer></footer>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

aside {
  display: block;
}

nav

В контейнере nav размещают ссылки навигации по сайту, либо на внешние страницы.

Назначение

Тег <nav> используется для определения навигационной секции на сайте.

Особенности

• Обычно в теге nav помещают основную навигацию по сайту, а не всю навигацию по сайту.
• Можно использовать несколько тегов nav на странице.
• Для скринридеров nav показывает что - это навигация по сайту.
• Навигация по сайту может быть не только в виде ссылок, но в любом виде.

Родительские/Дочерние элементы

Примеры

Основная навигация сайта

<header>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/contact">Контакты</a></li>
    </ul>
  </nav> 
</header>

Поддержка браузерами

Поддерживается всеми современными браузерами.

Стили по умолчанию

nav {
  display: block;
}

Что использовать section или article

Если разделу можно дать имя и вынести его на другой сайт, то это <article>, иначе если нельзя вынести на другой сайт то <section>.

Если элемент без имени, то это div.

Все элементы поддерживают глобальные атрибуты и события