Каждая HTML-страница содержит уникальный контент, который есть только на этой странице. Такая область размечается с помощью парного тега <main>. Это поможет устройствам для людей с ограниченными возможностями и поисковым роботам быстрее понять, где находится основной контент на странице.

Возьмём созданную нами шапку сайта и добавим к ней область с уникальным контентом:

<header>
  <img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

<main>
  <!-- Основной контент страницы. Это может быть статья, описание услуги, данные на странице, контакты, форма заказа услуги -->
</main>

Элемент main является уникальным для одной страницы. Это отражает его семантическое назначение — разметка уникального контента. При оборачивании контента в main важно не включать в него неуникальные области:

• Боковое меню
• Общую навигацию для сайта
• Общую шапку и футер сайта
• Логотип

Размещайте в main именно текстовый/графический контент. Найти такой контент в шаблонах легко — он не дублируется на других страницах.

Внутри элемента main могут находиться свои области навигации, шапки, секции и другие элементы, которые будут изучены в этом модуле.

Создайте шапку сайта. Она состоит из 2-х элементов:

• Логотип
• Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри неё вставьте произвольный контент.

Для картинки используйте следующий код:

<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Code Basics">