Элемент main

Последнее обновление: 08.04.2016

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

Используем элемент main:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Семантическая разметка в HTML5</title>
	</head>
	<body>
		<main>
		  <h1>Модели на Snapdragon 808</h1>
		  <p>Смартфоны, оснащенные процессором Snapdragon 808</p>
		  
		  <article>
			<h2>Google Nexus 5X</h2>
			<p>Nexus 5X представляет компактное и надежное устройство для решения повседневных задач. 
			Оснащенный 5,2-дюймовым экраном и шестиядерный процессор Snapdragon 808...</p>
		  </article>

		  <article>
			<h2>Microsoft Lumia 950</h2>
			<p>С помощью Microsoft Display Dock ваш смартфон Lumia 950 Dual SIM с внешним монитором, 
				клавиатурой и мышью превращается в полноценный компьютер...</p>
		  </article>
		</main>
	</body>
</html>
Элемент main в HTML5

Не стоит думать, что абсолютно все содержимое надо обязательно помещать в элемент main. Нет мы также можем использовать вне его другие элементы, например, header и footer:

<body>
	<header>
		..............
	</header>
	<main>
		.................	
	</main>
	<footer>
		.................	
	</footer>
</body>

Однако надо помнить, что элемент main не может быть вложенным в такие элементы, как article, aside, footer, header, nav. Кроме того, на веб-странице допустимо наличие только одного элемента main.

Также стоит отметить, что на данный момент есть небольшие проблемы с поддержкой этого элемента в браузерах. В частности, IE 11 не поддерживает данный элемент (в остальных браузерах полная поддержка), поэтому в этом случае стоит использовать атрибут роли:

<main role="main">
  ...
</main>

Указание роли позволит IE11 и более старшим версиям IE должным образом интерпретировать элемент.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850