Тег main задает основное содержимое страницы (контент) в HTML5. Современный аналог конструкции <div id="content">. В одном документе допустимо использовать только один тег main. Содержимое тега должно быть уникальным и не включать однотипные блоки вроде шапки сайта (хедера), подвала (футера), менюшек, сайдбаров (боковых панелей) и так далее.

Разница между тегами main и article: article на странице может быть несколько, например, каждый пост на главной странице блога обернуть в article. Тег main же может быть только один.

В HTML5 были добавлены новые теги, представляющие собой отдельные блоки макета сайта, которые раньше делались на тегах div и имели более-менее стандартные названия. Это такие блоки как хедер (header), контент (content), сайдбар (sidebar), футер (footer). Для этих блоков были соответственно добавлены теги header, main (контент), aside (сайдбар), footer.

Был также добавлен новый тег nav для меню (аналог <div id="menu">).

Рекомендую также посмотреть новые теги section и article, которые задают разделы документа.

Если вы не ориентируетесь в стандартных названиях частей HTML страницы, я рекомендую вам посмотреть статью про макеты сайта.

Примеры

Пример . Структура макета в стиле HTML5

В данном примере вы видите структуру сайта в стиле HTML4:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div id="menu">
					<ul>...</ul>
				</div>
			</div>
			<div id="sidebar">
				...
			</div>
			<div id="content">
				...
			</div>
			<div id="footer">
				...
			</div>
		</div>
	</body>
</html>

А вот так выглядит этот же код в стиле HTML5:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<nav>
					<ul>...</ul>
				</nav>
			</header>
			<aside>
				...
			</aside>
			<main>
				...
			</main>
			<footer>
				...
			</footer>
		</div>
	</body>
</html>