HTML тег <main>
Тег <main> в HTML5 определяет основное содержимое документа. Описание тега, атрибуты и примеры.
Тег <main> — это блочный элемент, введённый в спецификации HTML5. Он оборачивает основное содержимое элемента <body> документа — контент, уникальный для данной страницы и не повторяющийся на других страницах сайта, например заголовок сайта, меню навигации, боковая панель, строка поиска или подвал.
На этой странице рассматривается назначение <main>, его место в полной структуре документа рядом с <header>, <nav> и <footer>, его роль в ссылках «перейти к содержимому», а также правила использования нескольких элементов <main> на одной странице.
Где можно и нельзя размещать <main>
Элемент <main> не должен помещаться внутрь <article>, <aside>, <footer>, <header> или <nav> — <main> является элементом верхнего уровня, поэтому такие обёртки к нему неприменимы.
Этот элемент входит в дерево DOM, но исключён из структуры документа, в отличие от заголовочных элементов <h1> — <h6>, которые вносят вклад в эту структуру.
Доступность и ориентир main
<main> представляет ARIA-ориентир main. Вспомогательные технологии, такие как программы чтения с экрана, предоставляют пользователям доступ к ориентирам, позволяя переходить непосредственно к основным разделам страницы. Предпочтительнее использовать элемент <main>, а не добавлять role="main" к обобщённому элементу вроде <div>, поскольку <main> несёт эту роль неявно.
На каждой странице должен быть ровно один ориентир main. Пользователи клавиатуры и программ чтения с экрана могут также пропускать повторяющийся контент (навигацию, баннеры, рекламу) с помощью техники «пропустить навигацию». Если задать элементу <main> атрибут id, этот id станет целевым объектом ссылки-пропуска — см. пример ниже.
Синтаксис
Тег <main> используется парно. Содержимое записывается между открывающим (<main>) и закрывающим (</main>) тегами.
Пример HTML-тега <main>:
HTML-тег <main>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>
Languages HTML and CSS are intended for site layout.
</p>
<article>
<h2>HTML</h2>
<p>
HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>
CSS is a language of styles, defining the display of HTML documents.
</p>
<p>... </p>
</article>
</main>
</body>
</html><main> в полной структуре документа
На реальной странице <main> соседствует с другими элементами-ориентирами. Шапка, навигация и подвал повторяются на всех страницах, поэтому они остаются за пределами <main>; внутри него размещается только уникальный для страницы контент.
<!DOCTYPE html>
<html>
<head>
<title>Programming languages</title>
</head>
<body>
<header>
<h1>My Web Tutorials</h1>
</header>
<nav>
<a href="/html">HTML</a> |
<a href="/css">CSS</a> |
<a href="/js">JavaScript</a>
</nav>
<main>
<h2>Programming languages</h2>
<p>HTML and CSS are intended for site layout.</p>
</main>
<footer>
<p>© 2026 My Web Tutorials</p>
</footer>
</body>
</html>Добавление ссылки «перейти к основному содержимому»
Ссылка-пропуск позволяет пользователям клавиатуры и программ чтения с экрана перейти непосредственно мимо повторяющейся навигации. Значение атрибута href ссылки должно совпадать с id элемента <main>:
<body>
<a href="#main-content">Skip to main content</a>
<header>
<h1>My Web Tutorials</h1>
</header>
<nav>
<a href="/html">HTML</a> |
<a href="/css">CSS</a>
</nav>
<main id="main-content">
<h2>Programming languages</h2>
<p>HTML and CSS are intended for site layout.</p>
</main>
</body>Активация ссылки перемещает фокус на #main-content, и пользователь сразу попадает на основное содержимое страницы.
Использование нескольких элементов <main> с атрибутом hidden
Страница может содержать только один видимый элемент <main>. Все дополнительные элементы <main> должны иметь атрибут hidden. Это удобно в одностраничных приложениях (SPA), где несколько «представлений» одновременно присутствуют в DOM, но отображается только активное представление:
<main>
<h2>Home view</h2>
<p>This view is visible.</p>
</main>
<main hidden>
<h2>Settings view</h2>
<p>This view is in the DOM but hidden until activated.</p>
</main>Когда пользователь переключает представления, скрипт меняет атрибут hidden так, чтобы в любой момент был виден ровно один элемент <main>.
Атрибуты
Тег <main> поддерживает глобальные атрибуты и атрибуты событий.
Стилизация элемента <main>
<main> — это просто структурный контейнер, поэтому стилизуйте его как любой блочный элемент. Поскольку он содержит основной контент страницы, это естественное место для задания общей ширины текста, отступов и интервалов:
main {
display: block; /* ensures block layout in older browsers */
max-width: 800px;
margin: 0 auto; /* center the content column */
padding: 20px;
background-color: #f9f9f9;
}