html.okpython.net
HTML и CSS для начинающих

HTML :: Подробнее о структуре html-документа

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

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

HTML htmlCodes
<!-- Указываем тип документа -->
<!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="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. Использование элементов структурной разметки

«Шапка» сайта, тег <header>

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

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

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

«Подвал» сайта, тег <footer>

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

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

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

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

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

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

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

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

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

Быстрый переход к другим страницам