Карта сайта

Урок 9: Семантические теги в HTML

/Уроки по HTML/CSS/Урок 9: Семантические теги в HTML
Урок 9: Семантические теги в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

В девятом уроке мы разберем одну из самых важных тем в HTML, это семантические теги.Увидите как сделать ваш код понятным не только браузеру, но и людям и поисковым системам и даже программам для чтения с экрана. Семантика это основа современной верстки и я покажу, как правильно применять теги <header>, <footer>, <main>, <article> и <section>.

Семантические теги это «архитектурные элементы» вашей страницы. Они:

  1. Улучшают доступность для людей с ограниченными возможностями.
  2. Помогают SEO, поисковые системы лучше понимают содержимое страницы.
  3. Делают код читаемым для вас и других разработчиков.

Разбираем семантические теги

1. <header> это шапка сайта

<header> это «шапка» вашего сайта или раздела. Здесь обычно размещают логотип, меню навигации или заголовок.

Пример использования:

<header>  
  <h1>Мой блог о программировании</h1>  
  <nav>  
    <a href="/">Главная</a>  
    <a href="/about">Обо мне</a>  
  </nav>  
</header>
  • <header> можно использовать не только для всей страницы, но и внутри <article> или <section>.
  • Не путайте с <head> — это разные теги!

2. <footer> — подвал сайта

<footer>это «подвал», где размещают контактную информацию, ссылки на соцсети, копирайты.

Пример:

<footer>  
  <p>© 2024 Максим. Все права защищены.</p>  
  <a href="mailto:max@example.com">Написать мне</a>  
</footer>

Где использовать:

  • В конце страницы.
  • Внутри статьи или секции (например, для информации об авторе).

3. <main> — основное содержимое

<main> оборачивает уникальный контент страницы, который не повторяется на других страницах (в отличие от шапки или подвала).

Пример:

<body>  
  <header>...</header>  
  <main>  
    <h2>Последние статьи</h2>  
    <!-- Здесь будет основной контент -->  
  </main>  
  <footer>...</footer>  
</body>
  • На странице должен быть только один <main>.
  • Не используйте его внутри <article>, <aside>, <footer>, <header> или <nav>.

4. <article> — самостоятельный контент

<article>это независимый блок, который имеет смысл даже вне контекста страницы. Например: пост в блоге, новость, комментарий.

Пример:

<article>  
  <h2>Как выучить HTML за неделю</h2>  
  <p>В этой статье я расскажу...</p>  
</article>
  • Внутри <article> можно использовать <header>, <footer>, <section>.
  • Статья может содержать свой заголовок, автора, дату публикации.

5. <section> — секция контента

<section>это тег для группировки связанного контента. Например, глава в статье, блок преимуществ на лендинге.

Пример:

<section>  
  <h2>Преимущества моего курса</h2>  
  <p>Практические задания, поддержка...</p>  
</section>
  • Не используйте <section> просто как замену <div>. У секции должен быть заголовок (хотя бы в коде, даже если он скрыт визуально).
  • Если контент самостоятельный — выбирайте <article>, если часть чего-то большего — <section>.

Практические задачи

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

Сверстайте макет сайта с использованием <header>, <main>, <footer>. Внутри <main> добавьте две <section>: одна — о курсах, вторая — об авторе.

Пример решения:

<body>  
  <header>  
    <h1>Онлайн-курсы по веб-разработке</h1>  
  </header>  
  <main>  
    <section>  
      <h2>Наши курсы</h2>  
      <p>HTML, CSS, JavaScript...</p>  
    </section>  
    <section>  
      <h2>Об авторе</h2>  
      <p>Максим, разработчик с 10-летним опытом...</p>  
    </section>  
  </main>  
  <footer>  
    <p>Свяжитесь с нами: contact@example.com</p>  
  </footer>  
</body>

Задача 2: Разметьте статью

Создайте <article> с заголовком, секцией введения и секцией основного содержания. Добавьте <footer> с информацией об авторе.

Пример:

<article>  
  <header>  
    <h2>Семантика в HTML</h2>  
    <p>Автор: Максим</p>  
  </header>  
  <section>  
    <h3>Введение</h3>  
    <p>Семантические теги делают ваш код...</p>  
  </section>  
  <section>  
    <h3>Основная часть</h3>  
    <p>Рассмотрим теги header, footer...</p>  
  </section>  
  <footer>  
    <p>Опубликовано: 20 мая 2024</p>  
  </footer>  
</article>

Задача 3: Исправьте ошибки

В этом коде замените <div> на подходящие семантические теги:

<div class="top">  
  <div class="menu">...</div>  
</div>  
<div class="content">  
  <div class="post">...</div>  
</div>  
<div class="bottom">...</div>

Ответ:

<header>  
  <nav class="menu">...</nav>  
</header>  
<main>  
  <article class="post">...</article>  
</main>  
<footer class="bottom">...</footer>

Частые ошибки

  1. Избыточное использование <section>.
    Не стоит оборачивать каждый параграф в <section>. Группируйте только логически связанные блоки.
  2. Путаница между <article> и <section>.
    Помните: <article> — самостоятельный контент, <section> — часть чего-то большего.
  3. Несколько <main> на странице.
    <main> должен быть только один!

Семантические теги это необходимость для современной верстки. Они делают ваш код профессиональным, доступным и удобным для работы.

Продолжайте практиковаться. Чем больше вы верстаете, тем лучше запоминаете, где и какой тег использовать.

Полный курс «HTML и CSS для начинающих» доступен здесь — https://max-gabov.ru/html-css-dlya-nachinaushih