PrepBro
← Назад к вопросам

Приведи пример семантического блока

1.0 Junior🔥 111 комментариев
#HTML и CSS

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

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

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

Пример семантического блока в HTML

В современной веб-разработке семантические блоки (semantic elements) — это элементы HTML, которые чётко описывают своё назначение и содержание как для браузера, так и для разработчика. В отличие от универсальных <div> или <span>, семантические теги придают структуре смысл. Яркий и полный пример — структура типичной статьи в блоге.

Пример кода: статья с семантическими блоками

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой блог о веб-разработке</title>
</head>
<body>
    <!-- Основной контент страницы -->
    <main>
        <!-- Независимый, самодостаточный блок статьи -->
        <article class="blog-post">
            
            <!-- Шапка статьи с заголовком и метаданными -->
            <header>
                <h1>Введение в семантический HTML</h1>
                <p>
                    Опубликовано <time datetime="2023-10-26T14:30">26 октября 2023</time> 
                    автором <strong>Анна Петрова</strong> в категории <a href="#">Веб-стандарты</a>.
                </p>
            </header>

            <!-- Основное содержание статьи, можно использовать несколько секций -->
            <section>
                <h2>Что такое семантика?</h2>
                <p>Семантические элементы явно описывают свой смысл. Например, 
                <code>&lt;nav&gt;</code> обозначает навигацию, а <code>&lt;section&gt;</code> — тематическую группу контента.</p>
                
                <p>Это улучшает:</p>
                <ul>
                    <li><strong>Доступность (Accessibility)</strong>: Скринридеры чётко ориентируются в структуре.</li>
                    <li><strong>SEO</strong>: Поисковые системы лучше понимают содержание страницы.</li>
                    <li><strong>Читаемость кода</strong>: Разработчикам проще поддерживать проект.</li>
                </ul>
            </section>

            <section>
                <h2>Пример навигации</h2>
                <!-- Навигационный блок, связанный с данной статьёй -->
                <nav aria-label="Навигация по разделам статьи">
                    <ol>
                        <li><a href="#semantics">Семантика</a></li>
                        <li><a href="#example">Пример</a></li>
                        <li><a href="#conclusion">Заключение</a></li>
                    </ol>
                </nav>
                <p>... (основной текст раздела) ...</p>
            </section>

            <!-- Отдельный блок для иллюстрации с подписью -->
            <figure>
                <img src="html-structure.png" alt="Схема семантической структуры HTML5-документа">
                <figcaption>Рис. 1. Визуализация семантической разметки страницы.</figcaption>
            </figure>

            <!-- Подвал статьи с дополнительной информацией -->
            <footer>
                <h3>Теги статьи</h3>
                <p>
                    <a href="#">HTML5</a>, 
                    <a href="#">Семантика</a>, 
                    <a href="#">Веб-стандарты</a>
                </p>
                <!-- Боковая панель, косвенно связанная с содержанием -->
                <aside>
                    <h4>Читайте также</h4>
                    <ul>
                        <li><a href="#">Доступность для мобильных устройств</a></li>
                    </ul>
                </aside>
                <p>© 2023 Мой блог. Все права защищены.</p>
            </footer>
        </article>
    </main>

    <!-- Глобальная навигация сайта (не связана напрямую со статьёй) -->
    <nav aria-label="Основная навигация">
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/blog">Блог</a></li>
            <li><a href="/about">Обо мне</a></li>
        </ul>
    </nav>
</body>
</html>

Ключевые семантические элементы в примере:

  • <article> — определяет независимый, самодостаточный блок контента (статью, пост), который можно извлечь и распространять отдельно.
  • <header> — задаёт вводную часть для своего ближайшего родительского раздела или всей страницы. Здесь это заголовок статьи и метаданные.
  • <section> — тематически группирует контент внутри документа, обычно с собственным заголовком (<h2>-<h6>). В статье это логические разделы.
  • <nav> — обозначает блок навигационных ссылок (как основное меню сайта, так и оглавление статьи).
  • <figure> и <figcaption> — оборачивают самостоятельный иллюстративный контент (изображение, диаграмму) с поясняющей подписью.
  • <footer> — содержит заключительную информацию для своего ближайшего родительского раздела (автор, теги, связанные ссылки).
  • <aside> — представляет контент, косвенно связанный с основным (боковая панель, реклама, примечание).
  • <main> — указывает на основное, уникальное содержимое страницы (не должно включать шапку, подвал, навигацию).
  • <time> — позволяет машиночитаемо (атрибут datetime) отмечать дату и время.

Ожидаемое поведение и преимущества:

  1. Для браузеров и CSS — блоки ведут себя аналогично <div>, но обладают встроенным смыслом.
  2. Для скринридеров и вспомогательных технологий — пользователь слышит: "Заголовок статьи, уровень 1", "Навигация", "Рисунок с подписью". Это резко улучшает доступность (a11y).
  3. Для поисковых систем — роботы точно определяют основной контент (<main>, <article>), заголовки и структуру, что положительно влияет на SEO и представление в сниппетах.
  4. Для разработчиков — код самодокументируется. Вместо <div id="header"> мы видим <header>, что делает вёрстку интуитивно понятной для всей команды и упрощает долгосрочную поддержку.

Этот пример демонстрирует принцип семантической вёрстки: использовать HTML-элементы в соответствии с их смысловым назначением, а не только для стилизации. Такой подход создаёт более качественную, доступную и технологически продвинутую веб-страницу.