middle

Какие семантические теги появились в HTML5

Семантические теги HTML5 — это элементы разметки, которые описывают смысл (семантику) своего содержимого, в отличие от универсального <div>, не несущего смысловой нагрузки.

Аналогия из жизни: семантические теги — это как таблички на дверях в офисе: «Приёмная», «Переговорная», «Серверная». Без них все двери одинаковые (как <div>), и понять, что за ними, можно только заглянув внутрь.

Основные семантические элементы

Тег	Назначение	Аналог до HTML5
`<header>`	Шапка страницы или раздела	`<div class="header">`
`<footer>`	Подвал страницы или раздела	`<div class="footer">`
`<nav>`	Блок навигации	`<div class="nav">`
`<main>`	Основное содержимое (один на страницу)	`<div id="content">`
`<article>`	Самостоятельный контент (статья, пост)	`<div class="article">`
`<section>`	Логический раздел с заголовком	`<div class="section">`
`<aside>`	Боковое или дополнительное содержимое	`<div class="sidebar">`
`<figure>`	Иллюстрация с подписью	`<div class="image-wrapper">`
`<figcaption>`	Подпись к `<figure>`	`<p class="caption">`

Пример семантической структуры

Полный пример страницы с семантическими тегами

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Семантическая страница</title>
</head>
<body>
    <header>
        <h1>Название сайта</h1>
        <nav>
            <ul>
                <li><a href="/">Главная</a></li>
                <li><a href="/about">О нас</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Заголовок статьи</h2>
            <section>
                <h3>Первый раздел</h3>
                <p>Содержимое раздела.</p>
            </section>
            <figure>
                <img src="diagram.png" alt="Диаграмма архитектуры">
                <figcaption>Рис. 1 — Диаграмма архитектуры приложения</figcaption>
            </figure>
        </article>

        <aside>
            <h3>Полезные ссылки</h3>
            <ul>
                <li><a href="/docs">Документация</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Все права защищены</p>
    </footer>
</body>
</html>

Зачем это важно

Доступность (accessibility): экранные читалки используют семантические теги для навигации. Пользователь может перейти сразу к <main> или <nav>
SEO: поисковые системы лучше понимают структуру страницы и точнее индексируют контент
Читаемость кода: разработчику проще ориентироваться в разметке, чем в наборе <div class="...">

Частые ошибки

Использование <section> вместо <div> для визуальной обёртки без смысловой нагрузки — <section> подразумевает логический раздел с заголовком
Вложение <header> или <footer> внутрь себя — запрещено спецификацией
Оборачивание всей страницы в <article> — этот тег для самодостаточного контента
Несколько <main> на странице — допускается только один

Как используется в 2026

Семантическая разметка — обязательное требование при аудите доступности (WCAG). Java-бэкенд-разработчику важно понимать семантические теги при работе с серверным рендерингом (Thymeleaf, JSP) и при создании REST API, возвращающих HTML-фрагменты.

На собеседовании: перечислите основные теги: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Объясните, что они придают смысл разметке (в отличие от <div>), помогают screen readers и улучшают SEO. Упомяните, что <main> может быть только один на странице.

#семантика #accessibility #html5 #html #frontend