HTML :: Тег <main>

В HTML тег <main> (от англ. main – главный, основной) предназначен для выделения основного содержимого веб-страницы. На странице разрешается использовать только один элемент <main>, внутри которого нужно размещать уникальную информацию текущей страницы, а не повторяющиеся разделы вроде поисковой или навигационной панели сайта.

Запрещается располагать элемент <main> внутри элементов header, footer, section, article, nav или aside.

Элемент <main> носит исключительно информативный характер и не вносит вклад в структуру документа (в отличие от таких элементов, как <body> или <h1>).

Синтаксис

	<main>
		...	
	</main>	      
	
	Закрывающий тег: обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/main

Примеры

HTML

htmlCodes

<!DOCTYPE html>
<html>

<!-- Раздел служебной информации -->
<head>
  <!--  Соощаем браузеру кодировку документа -->
  <meta charset="utf-8">  
  <!-- Задаем базовый адрес текущего документа -->
  <base href="http://fruits.comm/">
  <!-- Заголовок страницы -->
  <title>Пример №1</title>
  <!-- Подключаем таблицу стилей CSS -->
  <link href="css/styles.css" rel="stylesheet">
  <!-- Подключаем внешний js-скрипт -->
  <script src="javascript/scripts.js"></script>
</head>

<body>

<!-- -------------- Шапка сайта ----------------------- -->
<header class="site_header">
   
  <!-- Имя сайта делаем заголовком верхнего уровня -->
  <h1 class="site_name">fruits.comm</h1>
   
  <!-- Другое содержимое шапки сайта  -->
  Логотип, поисковая панель и др. информация    
   
  <!--  Панель навигации по сайту  -->
  <nav class="site_nav"> 
    <!-- Ссылки на страницы сайта -->
    <a href="apples.html">Яблоки</a>
    <a href="oranges.html">Апельсины</a>
  </nav>
   
</header> 
     
<!-- -------- Боковая панель -------------------- -->
<aside class="site_aside">
   
  <div class="adv_block" id="adv1">
    Например, 1-й блок для сопутствующей рекламы.
  </div>
   
  <div class="adv_block" id="adv2">
    Например, 2-й блок для сопутствующей рекламы.
  </div>
   
</aside>
 
<!-- ----------- Уникальный контент страницы -------------- -->
<main>
   
  <!-- Делаем разметку для статьи о яблоках -->  
  <article>
     
    <!-- Собственная шапка -->
    <header>
      <!-- Задаем собственный заголовок 2-го уровня -->
      <h2>Красные или зеленые яблоки?</h2>
       
      <!-- Внутренняя навигация по статье -->
      <nav>
        <ul>
          <li><a href="#red_apples">О красных сортах яблок</a></li>
          <li><a href="#green_apples">О зеленых сортах яблок</a></li>
        </ul>
      </nav>
    </header>
     
    <!-- ----------- 1-й раздел статьи ---------- -->
    <section id="red_apples">
      <!-- Задаем собственный заголовок 3-го уровня -->
      <h3>О красных сортах яблок</h3>
      <p>
        Не для кого не секрет, что красные сорта яблок...
      </p>
    </section>
     
    <!-- ---------- 2-й раздел статьи ----------- -->
    <section id="green_apples">
      <!-- Задаем собственный заголовок 3-го уровня -->
      <h3>О зеленых сортах яблок</h3>
      <p>
        Зеленые сорта яблок...
      </p>
    </section>
         
    <!-- ---------- «Подвал» всей статьи ----------------------- -->
    <footer class="site_footer">
       
      <p>
        Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
        </p>
       
      <!-- Информация об авторе -->
      <address>
        Автор: Иванов Иван Иванович<br>
        Тел. +375-444-44-44 (до 23-00)
      </address> 
    </footer>
  </article>
   
  <!-- ... и другие статьи, например, о пирогах с яблоками -->
   
</main>
 
<!-- ---------- «Подвал» сайта ----------------------- -->
<footer class="site_footer">
  <!-- Информация о владельце -->
  <address>Петр Романовский, Минск, 2016-2099.</address> 
</footer>	
	
</body>
</html>

Пример №1