skip to main content

<main>

html

Кратко 🔗

В блоке <main> лежит главное содержимое страницы: тот основной и уникальный контент, который относится к главной теме страницы.

Пример 🔗

<header>Несколько фактов о Растрелли</header>

<main role="main">
<p>Франческо Растрелли — российский архитектор итальянского происхождения.</p>
<p>Он был ярким представителем елизаветинского барокко.</p>
</main>

Как это понять 🔗

Тег <main> помогает собрать самую важную информацию на странице в одном контейнере. Так тебе будет легче ориентироваться в коде. Этот тег никак не влияет на функционал страницы.

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

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

Как пишется 🔗

На странице может быть только один <main>. Он должен находиться внутри <body>.

Этот тег парный, обязательно закрывать его с помощью </main>.

Атрибуты 🔗

У <main> нет своих атрибутов: к нему можно применить универсальные.

Ещё примеры 🔗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>main</title>
</head>
<body>
<h1>О команде</h1>
<main>
<p>Мы готовим бургеры с 2011 года. Это долго.</p>
</main>
</body>
</html>

В работе 🔗

Владимир 👨‍🔧

🛠 С виду <main> — это обычный <div>, но он семантически более важен для поисковиков. Обычно это блок, в котором расположен самый основной и важный блок страницы, чтобы поисковик индексировал его с повышенным приоритетом.

Алёна,

🛠 Тег main появился в HTML не так давно. Поэтому даже опытные разработчики не всегда понимают его предназначение и не добавляют его в код.

Я всегда оборачиваю в этот тег всё, кроме header, footer и aside. Таким образом поисковый робот быстрее найдёт основную информацию на сайте и лучше его проиндексирует.


Автор: Владимир 👨‍🔧