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

Приведи примеры семантики в HTML

2.0 Middle🔥 161 комментариев
#HTML и CSS

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

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

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

Семантика в HTML: Примеры и значение

Семантика в HTML — это практика использования тегов, которые максимально точно описывают смысловое назначение их содержимого, а не только его внешний вид. Это фундаментальный принцип современной веб-разработки, который улучшает доступность (accessibility), SEO, читаемость кода и удобство сопровождения.

Зачем нужны семантические теги?

  • Доступность: Скринридеры и другие вспомогательные технологии полагаются на семантику для правильной навигации и озвучивания контента.
  • Поисковая оптимизация (SEO): Поисковые системы лучше понимают структуру и содержание страницы, что влияет на ранжирование.
  • Читаемость кода: Разработчикам проще понять структуру страницы и найти нужный блок.
  • Независимость от стилей: Структура остается осмысленной даже при отключенных CSS.

Примеры семантических тегов с кодом

1. Структурные теги документа (макет страницы)

Эти теги создают каркас и основные разделы страницы.

<!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>
                <li><a href="/contact">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <!-- Основное, уникальное содержимое страницы -->
    <main>
        <!-- Независимый, логически цельный раздел -->
        <article>
            <header>
                <h2>Что такое семантика HTML?</h2>
                <p>Опубликовано <time datetime="2023-10-27">27 октября 2023</time>.</p>
            </header>
            <p>Семантика — это ключ к созданию доступных и понятных веб-страниц...</p>
            <!-- Самостоятельная часть статьи, имеющая свой заголовок -->
            <section>
                <h3>Примеры семантических тегов</h3>
                <p>Этот раздел посвящен примерам...</p>
            </section>
            <!-- Боковая панель, связанная с основным контентом (например, справка, биография) -->
            <aside>
                <p>Автор статьи — фронтенд-разработчик с 10-летним стажем.</p>
            </aside>
        </article>
    </main>

    <!-- Нижний колонтитул сайта или раздела -->
    <footer>
        <p>&copy; 2023 Мой блог. Все права защищены.</p>
        <address>Контакты: <a href="mailto:hello@example.com">hello@example.com</a></address>
    </footer>
</body>
</html>

2. Текстовые семантические элементы

Они определяют роль фрагментов текста внутри контента.

<p>
    Важнейшее значение имеет элемент <strong>сильной важности</strong> (обычно жирный).
    Для простого выделения <b>без придания значимости</b> используется &lt;b&gt; (bold).
</p>

<p>
    Для акцента используется <em>выделенный текст</em> (обычно курсив).
    Для изменения тона или голоса, <i>например, технический термин</i>, используется &lt;i&gt; (italic).
</p>

<p>
    Определение термина: <dfn>Семантика HTML</dfn> — это использование тегов, соответствующих смыслу содержимого.
</p>

<p>
    Цитата встроенная: Как сказал <cite>Тим Бернерс-Ли</cite>, <q>Интернет для всех.</q>
</p>

<blockquote cite="https://developer.mozilla.org/">
    <p>Семантический HTML — основа доступного веба.</p>
    <footer>— Документация MDN</footer>
</blockquote>

<p>
    Код программы: <code>const element = document.querySelector('header');</code>
    Для вывода пользователя: Нажмите клавишу <kbd>Enter</kbd>.
    Результат выполнения: <samp>Файл успешно загружен.</samp>
</p>

<p>
    <mark>Этот текст подсвечен</mark> как важный в данном контексте (например, результат поиска).
</p>

<p>Прогресс загрузки: <progress value="70" max="100">70%</progress></p>

3. Семантические элементы для списков и навигации

<!-- Навигационные ссылки внутри сайта -->
<nav aria-label="Основная навигация">
    <ul>
        <li><a href="/projects">Проекты</a></li>
        <li><a href="/services">Услуги</a></li>
    </ul>
</nav>

<!-- Список определений (термин + описание) -->
<dl>
    <dt>Frontend</dt>
    <dd>Клиентская часть веб-приложения.</dd>
    <dt>Backend</dt>
    <dd>Серверная логика и база данных.</dd>
</dl>

4. Старые (несемантические) и современные аналоги

  • <div id="header"> → <header>
  • <div class="nav"> → <nav>
  • <div id="main"> → <main>
  • <div class="article"> → <article>
  • <span style="font-weight: bold;">Внимание!</span> → <strong>Внимание!</strong>

Ключевые выводы

Использование семантической разметки — это не просто "следование тренду", а создание инклюзивного, понятного для машин и людей веб-контента. Начинать следует с базовых структурных тегов (<header>, <main>, <footer>, <article>, <section>), постепенно внедряя более специфичные элементы (<time>, <mark>, <figure>/<figcaption>). Всегда задавайте себе вопрос: "Какой тег точнее всего описывает роль этого содержимого на странице?" Правильный ответ на этот вопрос — основа профессиональной и ответственной фронтенд-разработки.

Приведи примеры семантики в HTML | PrepBro