Тема 6. Как создавать семантическую разметку в HTML?

Семантическая разметка делает код понятнее и улучшает SEO. Здесь мы рассмотрим, как структурировать страницу с помощью семантических тегов.

6.1. Как сделать шапку сайта?

Пример кода:

<header>
<h1>Название сайта</h1>
<nav>
<a href="index.html">Главная</a>
<a href="about.html">О нас</a>
<a href="contact.html">Контакты</a>
</nav>
</header>

Подробный разбор:

• <header>:
  Оборачивает верхнюю часть сайта, включая логотип и навигационное меню.
• <nav>:
  Создаёт область для навигационных ссылок.

Советы:

• Используйте семантическую разметку для повышения доступности.
• Стилизация шапки через CSS помогает создать единый дизайн.

6.2. Как сделать навигационное меню?

Пример кода:

<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="services.html">Услуги</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>

Подробный разбор:

• <nav>:
  Обозначает область навигации.
• <ul> и <li>:
  Организуют список ссылок.

Советы:

• Используйте CSS для стилизации меню (цвета, отступы, hover-эффекты).
• Обеспечьте удобство навигации для пользователей и поисковиков.

6.3. Как сделать основное содержимое с <main> и <article>?

Пример кода:

<main>
<article>
<h2>Заголовок статьи</h2>
<p>Основной текст статьи...</p>
</article>
</main>

Подробный разбор:

• <main>:
  Отмечает основное содержимое страницы.
• <article>:
  Используется для независимых блоков контента, таких как статьи или посты.

Советы:

• Используйте <article> для автономного контента, который может быть переиспользован или распространён.
• Правильное использование <main> улучшает индексацию.

6.4. Как сделать боковую панель с <aside>?

Пример кода:

<aside>
<h3>Полезные ссылки</h3>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</aside>

Подробный разбор:

• <aside>:
  Предназначен для дополнительного контента, не являющегося основным.
• Преимущества:
  Улучшает структуру страницы и предоставляет вспомогательную информацию.

Советы:

• Боковая панель может включать рекламу, виджеты или списки статей.
• Стилизуйте через CSS для гармоничного оформления.

6.5. Как сделать подвал сайта с <footer>?

Пример кода:

<footer>
<p>&copy; 2025 Мой сайт. Все права защищены.</p>
<p><a href="privacy.html">Политика конфиденциальности</a></p>
</footer>

Подробный разбор:

• <footer>:
  Отвечает за нижнюю часть страницы, где располагаются копирайт и контактная информация.
• Советы:Стилизуйте футер через CSS, чтобы он соответствовал общему дизайну сайта.
  Включайте ссылки на юридическую информацию и контакты.