<main> основной элемент HTML

Элемент <main> HTML представляет основное содержимое элемента <body> документа. Основная область содержимого состоит из контента, непосредственно связанного с центральной темой документа или расширяющего её, либо с основными функциями приложения.

Попробуйте

<header>Gecko facts</header>

<main>
  <p>
    Geckos are a group of usually small, usually nocturnal lizards. They are
    found on every continent except Antarctica.
  </p>

  <p>
    Many species of gecko have adhesive toe pads which enable them to climb
    walls and even windows.
  </p>
</main>

header {
  font:
    bold 7vw "Arial",
    sans-serif;
}

В документе не должно быть более одного элемента <main>, у которого не указан атрибут hidden.

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

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

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

<main> не влияет на структуру документа; то есть, в отличие от таких элементов, как <body>, заголовки, например h2, и другие подобные элементы, <main> не влияет на представление структуры страницы в DOM. Этот элемент носит исключительно информативный характер.

Доступность

Ориентир

Элемент <main> соответствует роли ориентира main. Вспомогательные технологии могут использовать ориентиры, чтобы быстро находить крупные разделы документа и переходить к ним. Предпочтительно использовать элемент <main> вместо объявления роли role="main", если только этому не препятствует необходимость поддержки устаревших браузеров.

Пропуск навигации

Пропуск навигации, также известный как «skipnav», — это метод, позволяющий пользователю вспомогательных технологий быстро пропустить большие повторяющиеся разделы (основную навигацию, информационные баннеры и т. д.). Это позволяет пользователю быстрее перейти к основному содержимому страницы.

Добавление атрибута id к элементу <main> позволяет использовать его в качестве цели ссылки для пропуска навигации.

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

• WebAIM: ссылки «Пропустить навигацию»

Режим чтения

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

• Создание сайтов для режима чтения Safari и других приложений для чтения.

Примеры

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>…</p>
    <p>…</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>…</p>
    <p>…</p>
  </article>
</main>

<!-- other content -->

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Основные структурные элементы: <html>, <head>, <body>
• Элементы, связанные с разделами: <article>, <aside>, <footer>, <header> или <nav>
• ARIA: роль main