Элемент <main>
Элемент <main>
(от англ. main — основной, главный) используется в качестве контейнера для основного содержимого документа.
На странице может быть только один элемент <main>
. Однако спецификация уточняет: «в документе не должно быть больше одного элемента <main>
, у которого не указан атрибут hidden
». Это означает, что в документе можно иметь и другие элементы <main hidden>
. Такая возможность сделана специально для навигации в одностраничных сайтах/приложениях.
Содержимое элемента <main>
должно быть уникальным для документа. Он не должен содержать никакого контента, который повторяется в разных документах, например, боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта и поисковые формы.
К допустимым родительским элементам для <main>
относятся: <html>
(если элемент <body>
опущен), <body>
, <div>
, <form>
.
Категории | Потоковое содержимое, явное содержимое. |
---|---|
Синтаксис | <main>...</main> |
Опускание тегов | Начальный и конечный теги обязательны. |
Модель содержимого | Потоковое содержимое. |
Атрибуты
Для элемента <main>
доступны глобальные атрибуты и события.
Стиль по умолчанию
Стиль по умолчанию для элемента <main>
, определённый в спецификации HTML:
main { display: block; }
Примеры
<body>
<main>
<h1>Кошки</h1>
<p>Кошки — один из видов домашних животных.</p>
<article>
<h2>Порода «Сиамская кошка»</h2>
<p>Текст статьи...</p>
</article>
<article>
<h2>Порода «Персидская кошка»</h2>
<p>Текст статьи...</p>
</article>
</main>
<footer>
<p>Copyright © 1991 Пример сайта</p>
</footer>
</body>
Результат
Кошки
Кошки — один из видов домашних животных.
Порода «Сиамская кошка»
Текст статьи...
Порода «Персидская кошка»
Текст статьи...
Copyright © 1991 Пример сайта
В следующем примере используются несколько элементов <main>
и скрипт, позволяющий осуществлять навигацию без обращения к серверу:
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
<script src="spa.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#introduction">Введение</a></li>
<li><a href="#chapter1">Глава 1</a></li>
<li><a href="#chapter2">Глава 2</a></li>
</ul>
</nav>
<main id="introduction">
<h1>Введение</h1>
<p>Остальное содержимое...</p>
</main>
<main hidden id="chapter1">
<h1>Глава 1</h1>
<p>Остальное содержимое...</p>
</main>
<main hidden id="chapter2">
<h1>Глава 2</h1>
<p>Остальное содержимое...</p>
</main>
<footer>
<p>Copyright © 1991 Пример сайта</p>
</footer>
</body>
Результат
Введение
Остальное содержимое...
Глава 1
Остальное содержимое...
Глава 2
Остальное содержимое...
Copyright © 1991 Пример сайта