HTML-элемент <main> предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправте нам «pull request» (предложение изменения кода в чужом репозитории).
Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden.
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Содержимое элемента <main> должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые формы, не должно добавляться, за исключением формы поиска, если она является основной функцией страницы.
<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body>, заголовков, таких как <h3> и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.
Пример
<!-- другой контент -->
<main>
<h2>Яблоки</h2>
<p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p>
<article>
<h3>Сорт "Ред Делишес"</h3>
<p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h3>Сорт "Гренни Смит";/h3>
<p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- другой контент -->
Результат
Проблемы доступности
Ориентир
Элемент <main> ведет себя как роль-ориентир main. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role="main", если не нужна поддержка старых браузеров.
Пропуск навигации
Пропуск навигации, также известный как «skipnav», это техника которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов повторяющегося контента (главная навигация, информационные баннеры и т.д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.
Добавление атрибута id в элемент <main> позволяет ему становится целью для ссылки пропуска навигации.
<body>
<a href="#main-content">Перейти к основному контенту</a>
<!-- навигация и заголовок контента -->
<main>
<!-- основной контент страницы -->
</main>
</body>
Режим чтения
Функционально режим чтения браузера будет искать наличие элемента <main>, а также элементов заголовка и секционных элементов, которые преобразовывают контент в специальный вид для чтения.
Спецификации
Поддержка браузерами
Элемент <main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA "main" в элемент <main>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <main> после добавления атрибута role).
<main role="main">
...
</main>
Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам «pull request» (предложение изменения кода в чужом репозитории). Update compatibility data on GitHub
Компьютеры
Мобильные
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome для Android
Firefox для Android
Opera для Android
Safari on iOS
Samsung Internet
main
Chrome Полная поддержка 26
Edge Полная поддержка 12
Firefox Полная поддержка 21
IE Нет поддержки Нет
Opera Полная поддержка 16
Safari Полная поддержка 7
WebView Android Полная поддержка Да
Chrome Android Полная поддержка Да
Firefox Android Полная поддержка 21
Opera Android Полная поддержка Да
Safari iOS Полная поддержка 7
Samsung Internet Android Полная поддержка Да
Легенда
Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Смотрите также
| HTML | WebReference
Элемент <main> (от англ. main — основной, главный) предназначен для основного содержимого документа. На странице может быть только один <main> и он не должен располагаться внутри элементов <article>, <aside>, <footer>, <header>, <nav> или <section>.
Элемент <main> включает в себя содержимое, которое является уникальным для данного документа, и не должен включать повторяющиеся разделы сайта, такие как навигация, название сайта, логотип, поисковая форма, баннеры и др.
Закрывающий тег
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>main</title>
</head>
<body>
<h2>Следы невиданных зверей</h2>
<main>
История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.
</main>
</body>
</html>
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Элемент | htmlbook.ru
Оригинал: http://html5doctor.com/the-main-element
Перевод: Влад Мержевич
Недавно <main> был официально добавлен в спецификацию W3C HTML. Теперь, когда осела пыль, настало время погрузиться и узнать, где и когда будет уместно использовать <main>. Давайте начнём.
История
Включение элемента <main> (или подобного) уже давно обсуждается в рабочих группах с авторами и часто возникал вопрос, почему мы добавили новые элементы вроде <header>, <article> и <footer>, но нет элемента, который бы точно описывал основное содержимое страницы.
Стив Фолкнер, консультант по удобству подхода и наш новый автор, взял на себя трудную работу по исследованию, сбору данных и применению, а также поговорил с заинтересованными разработчиками. Как объясняет сам Стив, он говорил…
…со многими разработчиками (разработчиками браузеров и разработчиками удобства подхода), веб-разработчиками, авторами и пользователями и получил от них информацию и рекомендации. Я был там, где болтается множество людей: на IRC-каналах, в списках рассылки, Твиттере, блогах, конференциях — везде.
Стив Фолкнер
Это привело к тому, что он написал расширение спецификации для <main> и тщательно обосновал варианты применения.
Предложение было принято в ноябре 2012 года и затем <main> вошёл в спецификацию HTML5.1. Недавно он был добавлен в спецификации HTML5 и это не вызвало никаких возражений. Давайте посмотрим на то, как спецификация описывает <main>.
Спецификация W3C
Основная цель <main> — выступать основным элементом в HTML в карте ролей ARIA (Accessible Rich Internet Applications Suite). Это поможет скринридерам и другим услужливым технологиям понять, где начинается основное содержимое. Спецификации W3C описывает <main> так.
Основное содержимое документа или приложения. Область основного содержимого состоит из контента, который напрямую расширяет центральную тему документа или центральную функциональность приложения или зависит от них.
W3C HTML Editors Draft
Поскольку элемент <main> теперь включен в спецификацию HTML, элемент <body> в HTML4 изменил своё определение.
Элемент body представляет собой содержимое документа.
W3C HTML Editors Draft
Подробнее
Важным аспектом <main> является то, что он может быть использован на странице только один раз. Джереми Кит написал в рабочую группу, чтобы понять, почему это так (вернее, допускается ли несколько <main>). Хотя я не буду останавливаться на этом, обсуждение прочитать интересно.
Согласно спецификации валидатор W3C выдаст сообщение об ошибке если вы попытаетесь использовать несколько элементов <main> в документе.
Другим условием <main> является то, что он не может быть использован как дочерний у элемента <article>, <aside>, <footer>, <header> или <nav>.
Поскольку <main> не относится к структурным элементам, он не влияет на структуру документа подобно <article>, <nav> или <section>.
Отправная то
| Справочник HTML
Элемент <main> (от англ. «main» ‒ «главный, основной») определяет основное содержимое документа (его информационную часть).
Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное).
Элемент <main> не должен располагаться внутри элементов <article>, <aside>, <footer>, <header> или <nav>.
Примечание: Допускается использование элемента <main> только один раз в одном документе.
Синтаксис
<main>...</main>
Закрывающий тег
Обязателен.
Атрибуты
Элемент поддерживает глобальные атрибуты и события.
Стилизация по умолчанию
Нет.
Различия между HTML 4.01 и HTML5
Тег <main> был добавлен в HTML5.
Пример использования:
Пример HTML:
Попробуй сам
<main>
<h2>Основная тема документа</h2>
<p>Коротко об основной теме.</p><br>
<article>
<h3>Тема 1</h3>
<p>Текст по теме 1.</p>
</article>
<hr>
<article>
<h3>Тема 2</h3>
<p>Текст по теме 2.</p>
</article>
</main>
Спецификации
Поддержка браузерами
Элемент
<main>
12+
26+
15+
Да
6.1+
21+
Элемент
<main>
4.4+
2.1+
15+
7.1+
Учебник HTML
HTML уроки: HTML Элементы
Тег | HTML Справочник
Основное содержание текста:
Пример
Веб браузеры Google Chrome, Firefox и Internet Explorer сегодня наиболее используемые браузеры .
<article> <h2>Google Chrome</h2> <p>Google Chrome — бесплатный веб браузер с открытым исходным кодом, разработанный Google, выпущен в 2008.</p> </article>
<article> <h2>Internet Explorer</h2> <p>Internet Explorer свободный браузер от Майкрософт, выпущенный в 1995.</p> </article>
<article> <h2>Mozilla Firefox</h2> <p>Firefox — бесплатный веб браузер с открытым исходным кодом от Mozilla, выпущенный в 2004.</p> </article> </main>
Попробуйте сами »
Определение и использование
Tег <main> определяет основное содержание документа.
Содержимое элемента <main> должно быть уникальным для документа.
Элемент не должен содержать никакого контента, который повторяется между документами,
такими как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайтов и формы поиска.
Примечание: В документе должно быть не более одного элемента <main>.
Тег <main> не должен быть потомком элементов <article>, <aside>, <footer>, <header> или <nav>.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
Элемент
<main>
6.0
12.0
4.0
5.0
11.1
Различий между HTML 4.01 и HTML5
Tег <main> новый в HTML5.
Глобальные атрибуты
Tег <main> также поддерживает Глобальный атрибут в HTML.
Атрибуты событий
Tег <main> также поддерживает Атрибуты событий в HTML.
— Веб-технологии для разработчиков
HTML-элемент для основного контента (содержимого) документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https: // github.com / mdn / interactive-examples и отправте нам «запрос на перенос» (предложение кода в чужом репозитории).
Документ не должен иметь более одного элемента <основной> у которого не указан атрибут скрыто .
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Содержимое элемента должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые, не должно добавляться формы за исключением формы поиска, если она является основной функцией страницы.
не вносит вклад в текст документа; то есть, в отличие от таких элементов, как , заголовков, таких как
и т.п., не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.
Пример
<основной>
Яблоки
Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.
<статья>
Сорт "Ред Делишес"
Эти ярко-красные яблоки являются одними из самых популярных в Штатах.
...
...
<статья>
Сорт "Гренни Смит"; / h3>
Эти сочные, зеленые яблоки являются одними из самых популярных в мире.
...
...
Результат
Проблемы доступности
Ориентир
Элемент ведет себя как роль-ориентир main .Ориентиры по поиску навигации по большому разделам документа. Предпочтительно использовать элемент вместо объявления role = "main" , если не нужна поддержка старых браузеров.
Пропуск навигации
Пропуск навигации, также известный как «skipnav», это система, которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов цифрового контента (главная навигация, информационные баннеры и т.д.). Это позволяет получить доступ к основному контенту страницы быстрее.
Добавление атрибута id в элемент позволяет ему становится целью ссылки пропуска навигации.
Функционально режим чтения будет искать наличие элемента , а также элементы заголовка и секционных элементов, которые преобразовывают контент в специальный вид для чтения.
Спецификации
браузерами
Элемент широко поддерживается. Для Internet Explorer 11 предлагается добавить роль ARIA "main" в элемент , чтобы обеспечить его доступность (для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, могут понять семантическое значение) элемента после добавления атрибута роль ).
...
Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в эти данные, проверьте https://github.com/mdn/browser-compat-data и отправьте нам «запрос на извлечение» (предложение изменения кода в чужом репозитории). Обновить данные о совместимости на GitHub
Компьютеры
Мобильные
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome для Android
Firefox для Android
Opera для Android
Safari на iOS
Samsung Internet
основной
Chrome Полная поддержка 26
Кромка Полная поддержка 12
Firefox Полная поддержка 21
IE Нет поддержки Нет
Opera Полная поддержка 16
Safari Полная поддержка 7
WebView Android Полная поддержка Да
Chrome Android Полная поддержка Да
Firefox Android Полная поддержка 21
Опера Android Полная поддержка Да
Safari iOS Полная поддержка 7
Samsung Internet Android Полная поддержка Да
Легенда
Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Смотрите также
.
Тег | HTML-справочник
HTML теги
Значение и применение
Тег для основного содержимого документа (основной контент).
Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное).
Допускается использование элемента только один раз в одном документе.
Пример размещения тега на странице.
Обращаю Ваше внимание, что тег не должен быть потомком таких блоков как (не должен быть вложен в них):
Тег
имеет довольно общий характер — это просто элемент на уровне блока, использование для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов. Рис. 43 Человек, который использует только тег
.
HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».
Поддержка браузерами
Пример использования
Пример разметки страницы с использованием элемента
<основной>
<рисунок>
Ничоси 1
<рисунок>
Ничоси 2
Результат нашего примера:
Пример разметки страницы с использованием элемента.
Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.
Разметка страницы
Верхний колонтитул (тег )
Главный заголовок сайта
Основное содержимое (тег )
Заголовок второго уровня
Раздел 1 (тег )
Заголовок второго уровня
Раздел 2 (тег )
Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный стиль CSS, применение встроенных стилей не
является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.
И так по порядку, что мы сделали в этом документе:
Для элемента (верхний колонтитул) мы задали цвет заднего фона хаки и установили высоту элемента равную 100 пикселей.
Следующим на странице мы разместили элемент (навигация), для которого задали те же встроенные свойства CSS, но указали цвет заднего фона коралл , а высота элемента 75 пикселей.
Далее мы разместили элемент
Добавили на страницу элемент в который мы добавили заголовок первого уровня (тег
). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
Внутри элемента мы добавили два тематических раздела (тег), поместили внутри этих элементов заголовки второго уровня (тег
), задали им цвет заднего фона серого и высоту блоков по 75 пикселей.
После основного содержимого мы разместили элемент <нижний колонтитул> (нижний колонтитул), по аналогии с предыдущими элементами задали цвет заднего фона ( хаки ) и высоту (80 пикселей). Внутри него разместили тег <адрес>, в котором указали контактные данные, которые по умолчанию установлен курсивом.
Результат нашего примера:
Разметка страницы на HTML 5.
Значение CSS по умолчанию
Нет.
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги .
| HTML | WebReference
Элемент (от англ. main — основное, главное предназначение) для основного содержимого документа. На странице может быть только один и он не должен располагаться внутри элементов,
Элемент включает в себя содержимое, которое уникально для данного документа, такие как навигация, название сайта, логотип, поисковая форма, баннеры и др.
Закрывающий тег
Пример
main
Следы невиданных зверей
<основной> История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Рекомендация (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Кандидат в рекомендацию (совместимая рекомендация) — группа разработчиков по стандарту, удовлетворяющая своим целям, но требуется помощь сообщества разработчиков по стандартам.
Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Проект (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров используются следующие обозначения.
— элемент полностью поддерживаемый браузером;
— элемент браузером не воспринимается и игнорируется;
— при возможном появлении различных ошибок, либо элемент связанных с условиями работы.
Число указывает браузреа, начиная с которой устанавливается элемент.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
.
| Справочник HTML
Элемент (от англ. «Main» — «главный, основной») содержит основное содержимое документа (его информационную часть).
Контент внутри элемента должен быть уникальным для всего документа и должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, поиска и тому подобное).
Элемент не должен располагаться внутри элементов,
Примечание: Допускается использование элемента только один раз в одном документе.
Синтаксис
...
Закрывающий тег
Обязателен.
Атрибуты
Элемент поддерживает глобальные атрибуты и события .