Структура страницы

На нашей странице уже довольно много частей: ссылки на другие страницы, заголовок с фотографией, оглавление, разделы с текстом, видео и ссылка на источник. Но в коде многие из них выглядят одинаково. Элемент div лишь группирует элементы, а о том, что это за элементы, ничего не говорит.

Поэтому в HTML есть элементы, которые сообщают, чем является каждая часть страницы:

• header — вводная часть в верхней части страницы, с главным заголовком, а часто и с логотипом или ссылками,
• nav (от navigation — «навигация») — группа ссылок для перемещения по сайту или странице,
• main — основное содержимое страницы,
• section — одна часть содержимого на одну тему, обычно со своим заголовком,
• footer — конец страницы с дополнительными сведениями, например об авторе, контактами или источниками.

В окне предпросмотра они выглядят так же, как div. Разница в том, что браузеры, программы чтения с экрана и поисковые системы по ним понимают, что это за часть страницы. Например, программа чтения с экрана может сразу перейти к основному содержимому или к навигации.

Страница, построенная из них, может выглядеть так:

<body>
	<header>
		<nav>...</nav>
		<h1>...</h1>
	</header>
	<main>
		<section>...</section>
		<section>...</section>
	</main>
	<footer>...</footer>
</body>

На странице может быть несколько элементов nav. У нас их будет два: один со ссылками на другие страницы, другой с оглавлением. В этом упражнении мы добавим на страницу header, nav и footer, а в следующем — main и section.

Совет: когда вы оборачиваете элементы в новый, сдвигайте их на один уровень вправо, чтобы код оставался удобным для чтения. Для этого выделите строки и нажмите Tab.