С помощью каких тегов можно семантически отделить части страницы друг от друга

2.0 Middle🔥 142 комментариев

#Другое

Комментарии (2)

🐱

deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Семантические теги для структурирования веб-страницы

В современной HTML-разметке для семантического разделения частей страницы используется ряд контейнерных тегов, которые пришли на смену универсальному <div>. Эти теги делают структуру документа понятной не только браузеру и разработчику, но и вспомогательным технологиям (скринридерам), поисковым системам и другим инструментам.

Ключевые семантические теги HTML5

Основные структурные блоки:

<header> — задаёт «шапку» (заголовок) всего документа или отдельного раздела. Обычно содержит логотип, навигацию, поиск.
```
<header>
    <h1>Название сайта</h1>
    <nav>...</nav>
</header>
```
<nav> — определяет блок основной навигации по сайту или внутри страницы. Предназначен для важных ссылок, а не для каждой группы.
```
<nav>
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
    </ul>
</nav>
```
<main> — указывает на основное, уникальное содержимое документа. На странице должен быть только один тег <main>, и он не должен быть потомком <article>, <aside>, <footer>, <header> или <nav>.
```
<main>
    <h2>Заголовок статьи</h2>
    <p>Основное содержание...</p>
</main>
```
<article> — обозначает независимый, самодостаточный фрагмент контента, который может быть изолирован и распространён отдельно (пост в блоге, статья новостей, карточка товара, комментарий).
```
<article>
    <h3>Название статьи</h3>
    <p>Текст статьи...</p>
</article>
```
<section> — тематически группирует контент, обычно с собственным заголовком. Используется для логического разделения <article> или внутри него, или для выделения частей основного контента.
```
<section>
    <h2>Глава 1: Введение</h2>
    <p>Текст главы...</p>
</section>
```
<aside> — представляет контент, косвенно связанный с основным (боковая панель, сноски, рекламные блоки, цитаты). В контексте <article> — это информация, относящаяся именно к этой статье.
```
<aside>
    <h3>Интересный факт</h3>
    <p>Дополнительная информация по теме.</p>
</aside>
```
<footer> — задаёт «подвал» всего документа или отдельного раздела. Может содержать информацию об авторе, копирайт, контактные данные, ссылки.
```
<footer>
    <p>© 2023 Компания. Все права защищены.</p>
</footer>
```

Дополнительные семантические элементы для уточнения

<figure> и <figcaption> — для семантической группиции иллюстраций, диаграмм, фото, блоков кода с подписью.

<figure>
    <img src="chart.png" alt="Диаграмма роста">
    <figcaption>Рис. 1. Динамика продаж за год.</figcaption>
</figure>

<time> — для разметки даты и/или времени в машиночитаемом формате (атрибут datetime).
```
<p>Событие состоялось <time datetime="2023-10-26">26 октября 2023 года</time>.</p>
```
<address> — для контактной информации, относящейся к ближайшему <article> или <body>.
```
<address>
    Автор: <a href="mailto:author@example.com">Иван Иванов</a>.
</address>
```

Как правильно выбирать теги?

<article> vs <section>: Используйте <article>, если контент имеет смысл при синдикации (RSS). Используйте <section> для тематической группировки внутри <article> или для разделов на странице.

Вложенность: Эти теги могут и должны вкладываться друг в друга для создания сложной иерархии. Например:

<body>
    <header>...</header>
    <main>
        <article>
            <header>...</header>
            <section>...</section>
            <section>...</section>
            <aside>...</aside>
            <footer>...</footer>
        </article>
    </main>
    <footer>...</footer>
</body>

Преимущества семантической разметки

Доступность (Accessibility): Скринридеры используют эти теги для навигации и озвучивания структуры страницы.
SEO: Поисковые системы лучше понимают значимость и организацию контента.
Удобство поддержки: Код становится самодокументированным, что облегчает работу команды.
Будущая совместимость: Семантические теги закладывают основу для более умных агентов и технологий.

Таким образом, отказ от избыточного использования <div> в пользу семантических тегов — это фундаментальная практика современного фронтенд-разработчика, которая напрямую влияет на качество, доступность и ремонтопригодность веб-приложения.