HTML <main> тег

  • Предыдущая страница <link>
  • Следующая страница <map>

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

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

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

Примечание:В документе не может быть нескольких Элемент <main>. Элемент <main> не может быть <article>и<aside>и<footer>и<header> или <nav> Дочерние элементы элемента.

Пример

Пример 1

Определение основного содержимого документа:

<main>
  <h1>Популярные браузеры</h1>
  <p>Chrome, Firefox и Edge являются наиболее часто используемыми браузерами сегодня.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome — интернет-браузер, разработанный компанией Google, был выпущен в 2008 году......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox - это开源 веб-браузер, разработанный Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge - это веб-браузер, разработанный Microsoft и выпущенный в 2015 году......&</p>
  </article>
</main>

Попробуйте сами

Пример 2

Использование CSS для настройки <main> Стиль элементов:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>Популярные браузеры</h1>
  <p>Chrome, Firefox и Edge являются наиболее часто используемыми браузерами сегодня.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome — интернет-браузер, разработанный компанией Google, был выпущен в 2008 году......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox - это开源 веб-браузер, разработанный Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge - это веб-браузер, разработанный Microsoft и выпущенный в 2015 году......&</p>
  </article>
</main>
</body>
</html>

Попробуйте сами

Глобальные свойства

<main> Этот тег также поддерживает Глобальные свойства в HTML.

Свойства событий

<main> Этот тег также поддерживает Свойства событий в HTML.

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот тег.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0
  • Предыдущая страница <link>
  • Следующая страница <map>