Основной контент (main) [Модуль 8: Семантические элементы HTML5]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этой серии заданий мы сосредоточимся на сердце любой веб-страницы — её основном содержимом. Вы научитесь использовать тег `<main>` для обозначения главной, уникальной информации на странице. Это не просто «обёртка» для текста, а важный сигнал для поисковых систем и вспомогательных технологий, таких как скринридеры. Также мы разберемся, как правильно структурировать этот контент с помощью тегов `<article>`, `<section>` и `<aside>`, чтобы сделать ваш код не только рабочим, но и понятным, логичным и профессиональным. Понимание семантики — это ключ к созданию качественных и доступных веб-сайтов.

Список тем

Обозначаем основной контент

id: 37866_main-sem-1

Перед вами простая структура страницы с шапкой, подвалом и контентом. Ваша задача — обернуть основной контент страницы (заголовок и абзац) в соответствующий семантический тег, чтобы отделить его от шапки и подвала.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}
header, footer {
  background-color: #4a4a4a;
  color: white;
  padding: 10px;
  text-align: center;
}
main {
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ddd;
}

                     <header>
  Шапка сайта
</header>

input1
  <h1>Главная новость дня</h1>
  <p>Это уникальный контент, который не повторяется на других страницах сайта.</p>
input2

<footer>
  Подвал сайта
</footer>

HTML

<header>
  Шапка сайта
</header>

input1
  <h1>Главная новость дня</h1>
  <p>Это уникальный контент, который не повторяется на других страницах сайта.</p>
input2

<footer>
  Подвал сайта
</footer>

Для выделения основного, уникального содержимого документа используется тег `<main>`. Вам нужно поставить открывающий тег `<main>` перед заголовком `<h1>` и закрывающий `</main>` после абзаца `<p>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создаем самостоятельную запись: тег article

id: 37866_main-sem-2

Внутри основного контента находится самостоятельный, законченный фрагмент — статья в блоге. Оберните эту статью в подходящий семантический тег, чтобы показать её независимость от остального содержимого.

CSS

main {
  background-color: #fff;
  padding: 10px;
}
article {
  border: 2px dashed #007bff;
  padding: 15px;
  margin-top: 10px;
}
h2, p {
  margin: 0 0 10px 0;
}

                     <main>
  <h1>Мой блог</h1>
  
  input1
    <h2>Путешествие в горы</h2>
    <p>Наш поход начался ранним утром. Погода была прекрасной, и виды открывались просто невероятные...</p>
  input2
  
</main>

HTML

<main>
  <h1>Мой блог</h1>
  
  input1
    <h2>Путешествие в горы</h2>
    <p>Наш поход начался ранним утром. Погода была прекрасной, и виды открывались просто невероятные...</p>
  input2
  
</main>

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

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Разделяем статью на секции

id: 37866_main-sem-3

Статья о городе состоит из двух логических частей: введения и описания достопримечательностей. Разделите её на тематические блоки с помощью соответствующего тега.

CSS

article {
  border: 1px solid #ccc;
  padding: 10px;
}
section {
  background-color: #f9f9f9;
  border: 1px dotted #999;
  padding: 10px;
  margin-top: 15px;
}
h1, h2, p { margin: 0 0 10px 0; }

                     <main>
  <article>
    <h1>Обзор города N</h1>
    
    <input1>
      <h2>Введение</h2>
      <p>Город N — это исторический центр региона, известный своей архитектурой.</p>
    </input1>
    
    <input2>
      <h2>Достопримечательности</h2>
      <p>Обязательно посетите центральную площадь и старинный замок.</p>
    </input2>
    
  </article>
</main>

HTML

<main>
  <article>
    <h1>Обзор города N</h1>
    
    <input1>
      <h2>Введение</h2>
      <p>Город N — это исторический центр региона, известный своей архитектурой.</p>
    </input1>
    
    <input2>
      <h2>Достопримечательности</h2>
      <p>Обязательно посетите центральную площадь и старинный замок.</p>
    </input2>
    
  </article>
</main>

Тег `<section>` используется для группировки контента по общей теме. В отличие от `<div>`, он несёт семантический смысл. Каждая секция обычно имеет свой заголовок.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавляем боковую панель: тег aside

id: 37866_main-sem-4

На странице есть основная статья и блок с дополнительной информацией (похожие записи), который не является частью статьи. Разместите этот блок в семантически верном теге для боковых панелей.

CSS

main {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
article {
  flex: 3;
  min-width: 200px;
  background: #fff;
  padding: 10px;
}
aside {
  flex: 1;
  min-width: 100px;
  background: #f1f1f1;
  padding: 10px;
  border-left: 3px solid #007bff;
}

                     <main>
  <article>
    <h2>Основная статья</h2>
    <p>Содержимое основной статьи, которое занимает большую часть экрана...</p>
  </article>
  
  input1
    <h3>Похожие записи</h3>
    <ul>
      <li>Запись 1</li>
      <li>Запись 2</li>
    </ul>
  input2
  
</main>

HTML

<main>
  <article>
    <h2>Основная статья</h2>
    <p>Содержимое основной статьи, которое занимает большую часть экрана...</p>
  </article>
  
  input1
    <h3>Похожие записи</h3>
    <ul>
      <li>Запись 1</li>
      <li>Запись 2</li>
    </ul>
  input2
  
</main>

Для контента, который косвенно связан с основным, но не является его частью (например, реклама, ссылки на похожие статьи, биография автора), используется тег `<aside>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Шапка и подвал для статьи

id: 37866_main-sem-5

У статьи есть вводная часть (заголовок, автор) и заключительная (теги). Оберните эти части в соответствующие семантические теги, предназначенные для «шапки» и «подвала» контентного блока.

CSS

article {
  border: 1px solid #ccc;
}
article header {
  background-color: #e9ecef;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
article footer {
  background-color: #f8f9fa;
  padding: 10px;
  border-top: 1px solid #ccc;
  font-size: 0.9em;
}
.content {
  padding: 10px;
}

                     <main>
  <article>
    <input1>
      <h2>Как выбрать хороший кофе</h2>
      <p>Автор: Иван Петров</p>
    </input1>
    
    <div class="content">
      <p>Текст статьи о выборе кофе...</p>
    </div>
    
    <input2>
      <p>Теги: #кофе, #напитки</p>
    </input2>
  </article>
</main>

HTML

<main>
  <article>
    <input1>
      <h2>Как выбрать хороший кофе</h2>
      <p>Автор: Иван Петров</p>
    </input1>
    
    <div class="content">
      <p>Текст статьи о выборе кофе...</p>
    </div>
    
    <input2>
      <p>Теги: #кофе, #напитки</p>
    </input2>
  </article>
</main>

Теги `<header>` и `<footer>` можно использовать не только для всей страницы, но и для отдельных её частей, например, для `<article>`. В `<header>` обычно помещают заголовок и мета-информацию, а в `<footer>` — автора, дату, теги.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Изображение с подписью

id: 37866_main-sem-6

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

CSS

main { padding: 15px; }
figure {
  margin: 0;
  border: 1px solid #ddd;
  background: #f9f9f9;
}
figure img {
  max-width: 100%;
  display: block;
}
figcaption {
  padding: 8px;
  text-align: center;
  font-style: italic;
  color: #555;
}

                     <main>
  <article>
    <h2>Закат на озере</h2>
    <p>Вчера мы наблюдали невероятной красоты закат...</p>
    
    <input1>
      <img src="https://naytikurs.ru/img/4j.jpeg" alt="Закат над озером">
      <input2>Озеро в лучах заходящего солнца</input2>
    </input1>
    
  </article>
</main>

HTML

<main>
  <article>
    <h2>Закат на озере</h2>
    <p>Вчера мы наблюдали невероятной красоты закат...</p>
    
    <input1>
      <img src="https://naytikurs.ru/img/4j.jpeg" alt="Закат над озером">
      <input2>Озеро в лучах заходящего солнца</input2>
    </input1>
    
  </article>
</main>

Для группировки изображения и его подписи используется тег `<figure>`. Внутрь него помещается само изображение (`<img>`) и тег `<figcaption>` с текстом подписи.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комплексная структура страницы

id: 37866_main-sem-7

Теперь соберем все вместе! Перед вами почти пустая страница. Ваша задача — создать полную и семантически верную структуру, используя теги для основного контента, статьи и боковой панели.

CSS

body { font-family: sans-serif; color: #333; }
main {
  padding: 10px;
  background-color: #eee;
}
article {
  background: #fff;
  padding: 15px;
  margin-bottom: 10px;
}
aside {
  background: #e9f5ff;
  padding: 15px;
  border: 1px solid #bce8f1;
}

                     <body>
  <input1>
    
    <input2>
      <h1>Главная тема</h1>
      <p>Основная информация здесь.</p>
    </input2>
    
    <input3>
      <h4>Связанные ссылки</h4>
      <p>Дополнительная информация сбоку.</p>
    </input3>
    
  </input1>
</body>

HTML

<body>
  <input1>
    
    <input2>
      <h1>Главная тема</h1>
      <p>Основная информация здесь.</p>
    </input2>
    
    <input3>
      <h4>Связанные ссылки</h4>
      <p>Дополнительная информация сбоку.</p>
    </input3>
    
  </input1>
</body>

Вспомните все, что вы прошли. Основной контент оборачивается в `<main>`. Внутри него может быть одна или несколько статей (`<article>`) и боковая панель (`<aside>`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку