§7. Подробнее о структуре html-документа
http://belarusweb.net
Основы создания сайтов

§7. Подробнее о структуре html-документа

Основные элементы разметки html-документа.

Как мы уже знаем, любой html-документ содержит заголовок документа 'head', предназначенный для хранения служебной информации, и тело документа 'body', в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: 'header', 'main', 'footer', 'aside', 'nav', 'section', 'article' (см. пример. 7.1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.

<!-- Указываем тип документа -->
<!DOCTYPE html>

<!-- Начало документа --> 
<html>

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

<!-- Тело документа -->
<body>
		
<!-- -------------- Шапка сайта ----------------------- -->
<header class="siteHeader">
	
	<!-- Имя сайта делаем заголовком верхнего уровня -->
	<h1 class="siteName">fruits.comm</h1>
	
	<!-- Другое содержимое шапки сайта  -->
	Логотип, поисковая панель и др. информация		
	
	<!--  Панель навигации по сайту  -->
	<nav class="siteNav"> 
		<!-- Ссылки на страницы сайта -->
		<a href="apples.html">Яблоки</a>
		<a href="oranges.html">Апельсины</a>
	</nav>
	
</header> 
		
<!-- -------- Боковая панель -------------------- -->
<aside class="siteAside">
			
	<div class="advBlock" id="adv1">
		Например, 1-й блок для сопутствующей рекламы.
	</div>
	
	<div class="advBlock" id="adv2">
		Например, 2-й блок для сопутствующей рекламы.
	</div>		
</aside>

<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h2>Красные или зеленые яблоки?</h2>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#redApples">О красных сортах яблок</a></li>
					<li><a href="#greenApples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section id="redApples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О красных сортах яблок</h3>
			<p>
				Не для кого не секрет, что красные сорта яблок...
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section id="greenApples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О зеленых сортах яблок</h3>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
		
	</article>
	
	<!-- ... и другие статьи, например, о пирогах с яблоками -->
	
</main>

<!-- ---------- 'Подвал' сайта ----------------------- -->
<footer class="siteFooter">
	<!-- Информация о владельце -->
	<address>Петр Романовский, Минск, 2016-2018.</address> 
</footer>
</body>
</html>

Пример 7.1. Использование элементов структурной разметки

'Шапка' сайта. Тег <header>.

Элемент 'header' формируется парным тегом <header> и устанавливает заголовок ('шапку') веб-страницы или раздела. Если он выступает в роли 'шапки' сайта, то в нем обычно располагаются имя сайта, логотип, меню, поисковая панель или дополнительная информация (см. пример 7.1). Кроме того, он может формировать заголовки разделов (секций) html-страницы. Внутри данного элемента запрещается располагать элемент 'main', 'footer', 'address' или другие элементы 'header'.

Основное содержимое страницы. Тег <main>.

Элемент 'main' формируется парным тегом <main> и предназначен для выделения основного содержимого веб-страницы (см. пример 7.1). На странице разрешается использовать только один элемент 'main', внутри которого нужно размещать уникальную информацию текущей страницы, а не повторяющиеся разделы вроде поисковой или навигационной панели сайта. Кроме того, запрещается располагать элемент внутри элементов 'header', 'footer', 'section', 'article', 'nav' или 'aside'.

'Подвал' сайта. Тег <footer>.

Для размещения сведений об авторских правах, контактной информации, даты последнего обновления документа или раздела, дополнительной навигации и прочей информации, относящейся к служебной информации всего сайта или раздела, а не к основному контенту страницы или раздела, используется элемент 'footer', который формируется соответствующим парным тегом <footer>. На жаргоне веб-разработчиков элемент 'footer' называют 'подвалом' сайта или раздела (см. пример 7.1).

Боковая панель сайта. Тег <aside>.

Элемент 'aside' формируется парным тегом <aside> и устанавливает боковую панель ('сайдбар') веб-страницы. Боковая панель предназначается для размещения сопутствующей, дополнительной информации, которую можно удалить без ущерба для понимания основного содержимого всей страницы или раздела, но в тоже время косвенно связанной с этим содержимым (см. пример 7.1). Например, боковая панель может содержать блок категорий, рубрик или ссылок по данной теме, блок ссылок на архив или может содержать рекламу, тематически связанную с содержимым страницы или раздела, или даже полноценную статью. Главное, повторимся, что удаление содержимого боковой панели не должно наносить вред пониманию основного содержимого, но вместе с тем, должно быть связано с основным содержимым. При этом не рекомендуется, хоть и допускается, использовать элемент 'aside' в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент 'nav', который описывается в следующем пункте.

Создание блоков навигации. Тег <nav>.

Элемент 'nav' (от англ. navigation) формируется парным тегом <nav> и применяется для создания блока навигации, ссылки которого могут указывать как на разделы самого сайта, так и на внешние ресурсы (см. пример 7.1). Самих блоков может быть несколько и расположены они могут быть в любом месте тела документа, за исключением элемента 'address'. При этом рекомендуется использовать его именно в качестве основного меню, чтобы пользователи могли с его помощью свободно перемещаться по разделам сайта. Также элемент 'nav' хорошо подходит для навигации по очень большой (длинной) статье, пусть даже и расположенной на одной странице, но содержащей много разделов и заголовков различных уровней.

Создание тематических разделов. Тег <section>.

Для того, чтобы можно было разбить веб-страницу на тематические разделы, в HTML был введен еще один элемент разметки 'section'. Формируется он соответствующим парным тегом <section>. Данные тематические разделы подразумевают, как правило, наличие собственных заголовков. В качестве тематических разделов могут выступать, например, пункты данного параграфа, главы содержимого страницы или блоки с кратким описанием разделов сайта на домашней странице (см. пример 7.1). Отметим, что данный элемент должен применяться для явного разделения страницы на разделы, чтобы они различались по содержанию и смыслу. Разрешается использовать одни элементы 'section' внутри других.

Выделение раздела для новости или статьи. Тег <article>.

Элемент 'article' выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Формируется элемент при помощи соответствующего парного тега <article>. В данных элементах обязательно должен присутствовать собственный заголовок одного из уровней h1-h6, а также могут присутствовать собственные локальные элементы 'header', 'footer', 'section', 'nav' или 'aside' (см. пример 7.1). Более того, разрешается использовать одни элементы 'article' внутри других.