HTML тег - main- определение и примеры использования
Меню
Веб-разработка
Тег main HTML

HTML - тег <main> — это новый элемент уровня блока в спецификации HTML5. Тег определяет доминирующее содержимое <body> документа. Содержимое тега <main> должно быть уникальным и не дублировать однотипные блоки, повторяющиеся в других документах.


Тег <main> - синтаксис и код

Тег <main> представлен парами. Содержимое записывается между открывающим (<main>) и закрывающим (</main>) тегами.

Пример разметки основного содержимого HTML документа c CSS стилизацией:

<!DOCTYPE html>
<html>
<head>

<style>
main {
  margin: 0;
  padding: 7px;
  background-color: #00b7ff;
  color: #000
}
main > h2, p, .browser {
  margin: 11px;                                           
  padding: 7px;
}
.browser {
  background: white;
}
.browser > h3, p {
  margin: 5px;
  font-size: 95%;
}
</style>

</head>     
<body>

<main>
 <h2>Самые популярные браузеры</h2>
  <article class="browser">
    <h3>Google Chrome</h3>
    <p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>
  </article>

  <article class="browser">
    <h3>Mozilla Firefox</h3>
    <p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>
  </article>

  <article class="browser">
    <h3>Microsoft Edge</h3>
    <p>Microsoft Edge — веб-браузер, разработанный Microsoft и выпущенный в 2015 году. Microsoft Edge заменил Internet Explorer.</p>
  </article>
</main>

</body>
</html>

Самые популярные браузеры

Google Chrome

Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!

Mozilla Firefox

Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.

Microsoft Edge

Microsoft Edge — веб-браузер, разработанный Microsoft и выпущенный в 2015 году. Microsoft Edge заменил Internet Explorer.


Определение и использование

Тег <main> определяет основное содержимое документа.

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

Этот элемент не влияет на представление DOM о структуре страницы, в отличие от таких элементов, как <body>, <h2> и других.

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

Пользователи вспомогательных технологий могут пропускать большие разделы повторяющегося контента, используя технику "skipnav". Это позволяет легко получить доступ к основному содержимому страницы. Если вы добавите атрибут id к элементу <main>, он станет целью ссылки пропуска навигации.

Примечание: в документе не должно быть более одного элемента <main>. Элемент <main> НЕ должен быть потомком элемента <article>, <aside>, <footer>, <header> или <nav>.

Поддержка <main> браузерами

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Глобальные атрибуты

Тег <main> также поддерживает - глобальные атрибуты в HTML

Атрибуты событий

Тег <main> также поддерживает - атрибуты событий в HTML


Связанные страницы

Руководство по HTML: семантические элементы HTML


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой