Skip to content

Лабораторная работа: Продвинутое изучение HTML. Семантические теги: <header>, <footer>, <section>, <nav>, <aside>, <main>, <article>

Теоретическая часть

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

Основные семантические теги:
  1. <header>
    Используется для верхней части страницы или раздела. Обычно содержит заголовок, логотип, навигацию или другие вводные элементы.
    Пример:
    ```html

    Мой сайт

```

  1. <footer>
    Используется для нижней части страницы или раздела. Обычно содержит информацию об авторских правах, контакты или ссылки на социальные сети.
    Пример:
    ```html

    © 2023 Мой сайт. Все права защищены.

```

  1. <section>
    Определяет логический раздел документа. Используется для группировки связанного контента.

```html

О нас

Мы команда профессионалов...

```

  1. <nav>
    Используется для навигационных ссылок. Обычно содержит меню сайта.

```html

```

  1. <aside>
    Используется для контента, который косвенно связан с основным содержимым (например, боковая панель).
    Пример:
    ```html

```

  1. <main>
    Определяет основной контент страницы. На странице должен быть только один <main>.

```html

Добро пожаловать на наш сайт

Здесь вы найдете много полезной информации.

```

  1. <article>
    Используется для независимого контента, который может быть использован отдельно (например, новость, статья, запись в блоге).

```html

Заголовок статьи

Текст статьи...

```

Правила расположения тегов

  1. Иерархия тегов:
  2. <header> и <footer> могут использоваться как на уровне всей страницы, так и внутри <article> или <section>.
  3. <main> должен быть единственным на странице и содержать основной контент.
  4. <nav> обычно находится внутри <header>, но может быть и в других местах, если это необходимо.

  5. <aside> чаще всего располагается рядом с <main> или внутри <article>.

  6. Доступность:

  7. Используйте заголовки (<h1>-<h6>) внутри <section>, <article> и других тегов для улучшения структуры.

  8. Убедитесь, что <nav> содержит понятные ссылки для навигации.

  9. SEO:

  10. Используйте <header> для важных заголовков и ключевых слов.
  11. <article> помогает поисковым системам идентифицировать независимый контент.

Практическая часть

Задание 1: Создание структуры страницы

Создайте HTML-документ, используя все изученные теги. Структура страницы должна включать: - <header> с логотипом и навигацией. - <main> с несколькими <section> и одним <article>. - <aside> с дополнительной информацией. - <footer> с контактной информацией.

Пример: 

<!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>
    <header>
        <h1>Мой сайт</h1>
        <nav>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>О нас</h2>
            <p>Мы команда профессионалов...</p>
        </section>
        <article>
            <h2>Новости</h2>
            <p>Сегодня произошло важное событие...</p>
        </article>
    </main>
    <aside>
        <h3>Рекомендуемые статьи</h3>
        <ul>
            <li><a href="#">Статья 1</a></li>
            <li><a href="#">Статья 2</a></li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2025 Мой сайт. Все права защищены.</p>
    </footer>
</body>
</html>
Задание 2: Оптимизация для SEO

Добавьте в созданную страницу: - Мета-теги для описания и ключевых слов. - Атрибуты alt для изображений (если они есть). - Заголовки (<h1>-<h6>) для улучшения структуры.

Задание 3: Доступность

Проверьте страницу с помощью инструментов доступности (например, Lighthouse в Chrome). Убедитесь, что: - Все изображения имеют атрибуты alt. - Навигация доступна с клавиатуры. - Заголовки используются правильно.

Задание 4 Свой шаблон

Сформируйте свой шаблон в HTML сайта резюме или портфолио

Примеры https://www.pixpa.com/ru/blog/best-portfolio-websites

Вопросы для самоконтроля

  1. Какие преимущества дают семантические теги?
  2. Почему важно использовать только один <main> на странице?
  3. Как <article> отличается от <section>?
  4. Какие элементы чаще всего находятся внутри <header>?
  5. Как <aside> может улучшить пользовательский опыт?