Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Секционные элементы в HTML5

Одна из особенностей стандарта HTML5 заключается в появлении так называемых секционных элементов. Их основная задача — добавить еще больше семантики тем или иным блокам страницы сайта (под семантикой мы понимаем смысловую нагрузку).

Секционные элементы в HTML5
Содержание статьи

Зачем нужны секционные элементы HTML5

HTML5Слово «секционные» в названии элементов говорит о том, что они используются для выделения в структуре страницы отдельных секций или блоков. Как мы знаем, раньше эту задачу приходилось решать элементу div. В чем же заключается основной недостаток div-а? Почему же разработчики HTML5 решили внедрить целый ряд новых элементов, которые в теории должны вытеснить его? Виной всему малая информативность стандартного блока div. Да, у него есть атрибут title, внутрь которого можно засунуть релевантное название, однако этого все равно недостаточно.

Секционные элементы, если можно так выразиться, являются более узкопрофильными и специализированными (у каждого из них есть какое-то определенное предназначение).

Список самых распространенных секционных элементов в HTML5

Ниже мы приведем список самых распространенных секционных элементов в HTML5, благодаря которым осуществляется более детальная семантическая разметка страниц.

Элемент main

Как правило, данный тег используется в качестве контейнера для блока с основным контентом страницы. Крайне желательно, чтобы данный контент присутствовал лишь на текущей странице (не повторялся на других страницах ресурса). Внутрь main можно вполне легально засунуть какие-то другие секционные элементы (article, section), а также стандартные теги HTML – p, h и другие. Одна страница сайта не должна содержать больше одного элемента main. В свою очередь, сам main нельзя помещать внутрь таких секционных элементов, как footer, header, article и некоторых других.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>main</title>
</head> 
<body>
	<h1>main</h1>
	<main>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</main>
</body> 
</html>

Элемент article

С английского переводится как «статья». Внутрь данного элемента обычно помещают какой-то фрагмент самодостаточной информации, к примеру, статью (это понятно из перевода), новостную заметку, комментарий, пост на форуме, статью вместе с комментариями и так далее. Другими словами, данная информация может быть безболезненно вырвана из контекста страницы (хотя на практике такое делается далеко не всегда). Элемент article может содержать в себе почти те же элементы, что и main – section, h, p и даже другой article. В последнем случае получится дополнительная вложенность элементов.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>article</title>
</head> 
<body>
	<header>
		<h1>article</h1>
	</header>
	<article>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</article>
</body> 
</html>

Элемент section

Обычно этим элементом обозначают некий абстрактный блок основного контента страницы (наблюдается небольшая схожесть с div-ом). Также у section есть много общего с article. Правда, за исключением одной важной детали – блок section не может быть вырван из контекста страницы. Он довольно жестко привязан к нему. Как правило, в тег section обрамляют отдельные абзацы текста (или сразу несколько абзацев). Помимо тега p секция может включать в себя теги подзаголовков разных уровней.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>section</title>
</head> 
<body>
	<section>
		<h1>section</h1>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</section>
	<section>
		<h1>section</h1>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</section>
	<section>
		<h1>section</h1>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</section>
</body> 
</html>

Элемент nav

Название данного элемента является сокращением от слова navigation. Исходя из этого, можно сделать вывод, что он предназначен для разметки (обособления) блоков с навигационными ссылками. Как правило, nav используют при выделении блока ссылок главного или второстепенного меню сайта, ссылок из навигации по конкретным разделам и т.д. Внутрь nav никакие дополнительные секционные элементы не вкладываются. Что касается обычных HTML-тегов, то здесь можно использовать практически все, что угодно – списки, подзаголовки, ссылки и т.д.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>nav</title>
</head> 
<body>
	<header>
		<h1>nav</h1>
	</header>
	<nav>
		<ul>
			<li><a href="first-link.html">Первая ссылка</a></li>
			<li><a href="second-link.html">Вторая ссылка</a></li>
			<li><a href="third-link.html">Третья ссылка</a></li>
		</ul>
	</nav>
</body> 
</html>

Элемент aside

Обычно данный тег используют для обрамления дополнительного контента страницы (который не связан с основным контентом напрямую). К примеру, в aside часто вставляется какая-то статистическая информация, сноски, цитаты и т.д. Сам текст может быть выровнен по центру или по правому краю страницы.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>aside</title>
</head> 
<body>
	<header>
		<h1>aside</h1>
	</header>
	<aside>
		Содержимое сайдбара
	</aside>
	<article>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</article>
</body> 
</html>

Элемент header

Это так называемый головной элемент страницы сайта. Как правило, он содержит в себе заголовок h1. Также здесь может быть размещена вся мета-информация (к примеру, теги title и description). Кроме того, сюда вполне легально можно впихнуть обычный текст, обрамленный тегом p, заголовки более низких уровней и другие элементы.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>header</title>
</head> 
<body>
	<header>
		<h1>header</h1>
	</header>
	<article>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</article>
</body> 
</html>

Элемент footer

Обычно используется для обрамления и группировки элементов, расположенных в подвале (нижней части) страницы. Здесь могут находиться текстовые абзацы, разнообразные копирайты, ссылки и так далее.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>footer</title>
</head> 
<body>
	<header>
		<h1>footer</h1>
	</header>
	<article>
		В чашах юга жилбы цитрус да но фальшивый экземпляр.
	</article>
	<footer>
		&copy; Все права кем-то и от кого-то защищены.
	</footer>
</body> 
</html>

Элемент address

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>address</title>
</head> 
<body>
	<header>
		<h1>address</h1>
	</header>
	<address>
		Я сам сделал этот сайт и являюсь его полноправным владельцем. Вася Пупкин.
	</address>
</body> 
</html>

Применение элементов HTML5

html5-elementsНу а теперь, когда вы в общих чертах представляете себе предназначение основных секционных элементов, которые нам подарил замечательный HTML5, мы рассмотрим небольшой пример их применения при составлении семантической разметки страницы.

Как видно из примера, в самом верху у нас, как обычно, расположена шапка сайта, которая обозначается тегом header. В левой колонке у нас с вами будет навигационное меню, поэтому был использован специально предназначенный для этого контейнер nav. В правой же колонке будут различные виджеты (календарь, облако тегов, форма подписки на обновления и другие), поэтому используется контейнер aside. Контент страницы оборачивается в тег section и также имеет свою собственную шапку и подвал. Самым главным содержимым страницы является статья, поэтому она заключается в тег article. Ну а завершается вся эта нехитрая семантическая разметка страницы, как всегда подвалом, для которого используется элемент footer.

На рисунке представлено лишь схематичное изображение элементов и умышленно не указаны закрывающие теги. Ну а вы же, когда будете верстать страницу, используя теги HTML5, конечно же не забудете закрыть их в нужном месте.



Предыдущая статья:
Сквозные ссылки на сайте: отличия от обычных ссылок и польза в продвижении

Читайте также:
Использование стандартных и нестандартных шрифтов на сайте

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»