8. Семантические теги

HTML: Семантическая разметка

Иллюстрация к уроку

Что такое семантика и зачем она нужна?

Привет, кодеры! Сегодня мы погрузимся в очень важную, но часто недооцененную часть HTML — семантическую разметку. Что это значит? “Семантика” — это о смысле, значении. Когда мы говорим о семантическом HTML, мы имеем в виду использование тегов не просто для того, чтобы ваш контент выглядел определенным образом (для этого есть CSS!), а для того, чтобы он имел смысл и правильно описывал свою роль на странице.

Зачем это нужно?

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

Забудьте про div для всего подряд! Современный HTML5 предлагает множество тегов, которые несут в себе конкретный смысл.

Основные семантические теги HTML5

Давайте рассмотрим ключевые семантические теги, которые вы должны использовать каждый день:

<header>: Представляет вводную часть или группу навигационных ссылок. Обычно содержит заголовок, логотип, навигацию.
<nav>: Используется для группы навигационных ссылок (меню сайта).
<main>: Представляет собой доминирующее содержимое <body>. На странице должен быть только один <main> элемент.
<article>: Представляет собой независимую, самодостаточную часть контента. Например, пост в блоге, статья, новость, комментарий пользователя.
<section>: Группирует тематически связанный контент. Обычно имеет свой заголовок (<h1>-<h6>).
<aside>: Содержит контент, который лишь косвенно связан с основным содержимым документа. Часто используется для боковых панелей (sidebar), рекламных блоков, цитат.
<footer>: Представляет собой подвал для ближайшего родительского раздела или всего документа. Обычно содержит информацию об авторских правах, ссылки на политику конфиденциальности, контактные данные.
<figure> и <figcaption>: Используются для размещения медиаконтента (изображения, видео, диаграммы) с подписью.
<time>: Используется для представления даты и/или времени.

Вот как это выглядит на простых примерах:

<!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>
            <h2>Как писать чистый HTML-код</h2>
            <p>Автор: Яша, <time datetime="2023-10-26">26 октября 2023</time></p>
            <section>
                <h3>Введение</h3>
                <p>Чистый код - залог успеха.</p>
            </section>
            <section>
                <h3>Практические советы</h3>
                <p>Используйте семантические теги!</p>
            </section>
            <figure>
                <img src="code-example.png" alt="Пример кода HTML">
                <figcaption>Пример семантического HTML-кода.</figcaption>
            </figure>
        </article>

        <aside>
            <h3>Популярные статьи</h3>
            <ul>
                <li><a href="#">Что такое CSS Grid?</a></li>
                <li><a href="#">Основы JavaScript</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 Yasha Learn Code. Все права защищены.</p>
    </footer>
</body>
</html>

Семантическая структура страницы: продвинутый пример

Давайте посмотрим, как семантические теги помогают создать логичную и понятную структуру для целой страницы, например, для сайта новостей:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Новости - Yasha News</title>
</head>
<body>
    <header>
        <a href="/">
            <img src="logo.svg" alt="Логотип Yasha News">
        </a>
        <nav aria-label="Основная навигация">
            <ul>
                <li><a href="/politics">Политика</a></li>
                <li><a href="/tech">Технологии</a></li>
                <li><a href="/sport">Спорт</a></li>
            </ul>
        </nav>
        <!-- Поиск можно тоже обернуть в форму, но для примера оставим так -->
        <input type="search" placeholder="Поиск по новостям...">
    </header>

    <main>
        <section> <!-- Раздел "Главные новости" -->
            <h1>Последние новости</h1>
            <article>
                <h2>Новый прорыв в ИИ: GPT-5 уже здесь?</h2>
                <p>Автор: А. Иванов, <time datetime="2023-10-26T10:00">26 октября 2023, 10:00</time></p>
                <p>Ученые из лаборатории Yasha Labs анонсировали новую модель искусственного интеллекта...</p>
                <a href="/news/ai-breakthrough">Читать далее...</a>
            </article>
            <article>
                <h2>Экологи обнаружили редкий вид бабочек</h2>
                <p>Автор: М. Петрова, <time datetime="2023-10-26T09:30">26 октября 2023, 09:30</time></p>
                <p>В ходе экспедиции в Сибири был найден уникальный экземпляр...</p>
                <a href="/news/rare-butterfly">Читать далее...</a>
            </article>
        </section>

        <aside> <!-- Боковая панель с дополнительным контентом -->
            <nav aria-label="Связанные рубрики">
                <h3>Связанные новости</h3>
                <ul>
                    <li><a href="/tech/future-of-ai">Будущее ИИ</a></li>
                    <li><a href="/environment/conservation">Сохранение природы</a></li>
                </ul>
            </nav>
            <section>
                <h3>Реклама</h3>
                <p>Посетите наш спонсорский сайт <a href="http://example.com">Example.com</a>!</p>
            </section>
        </aside>
    </main>

    <footer>
        <nav aria-label="Дополнительная информация">
            <ul>
                <li><a href="/privacy">Политика конфиденциальности</a></li>
                <li><a href="/terms">Условия использования</a></li>
            </ul>
        </nav>
        <address>
            <p>Наши контакты: <a href="mailto:[email protected]">[email protected]</a></p>
        </address>
        <p><small>&copy; 2023 Yasha News. Все права защищены.</small></p>
    </footer>
</body>
</html>

Обратите внимание на использование aria-label для <nav> — это помогает скринридерам понимать, что это за навигация.

Типичные ошибки

div-itis: Чрезмерное использование <div> там, где можно применить более семантически значимый тег (например, <section>, <article>, <header>).
Игнорирование <main>: Забывать обернуть основное содержимое страницы в <main>.
Неправильное использование <article> и <section>: <article> должен быть самодостаточным, а <section> — это тематический раздел. Не путайте их. <section> не должен быть просто оберткой для стилей; он должен иметь логический заголовок.
Отсутствие заголовков: <section> и <article> почти всегда должны содержать заголовок (<h1> - <h6>) для описания своего содержимого.

🎯 Практика

Разметьте карточку товара: Создайте HTML-разметку для карточки товара (название, описание, цена, изображение). Используйте теги <article>, <h2>, <p>, <img>, <figure>, <figcaption>, <time> (если есть дата добавления/обновления).
Структура профиля пользователя: Разработайте семантическую структуру для страницы профиля пользователя, которая включает имя пользователя, аватар, краткую биографию и список последних действий (например, последние 3 поста). Используйте <main>, <section>, <h2>, <figure>, <figcaption>, <p>, <ul>, <li>.

Переделайте “div-овый” код: Вам дан следующий “не семантический” код. Перепишите его, используя подходящие HTML5 теги:

<div class="header">
    <div class="logo">My Site</div>
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">About</a>
    </div>
</div>
<div class="content">
    <div class="post">
        <h2>Post Title</h2>
        <p>Post content...</p>
    </div>
</div>
<div class="sidebar">
    <div>Related Links</div>
</div>
<div class="footer">
    <p>Copyright</p>
</div>

💡 Совет

Всегда задавайте себе вопрос: “Какой смысл несет этот блок контента?” Прежде чем автоматически ставить <div>, подумайте, нет ли более подходящего семантического тега, который лучше описывает содержимое. Привыкайте мыслить семантически, и ваш код станет намного лучше!