Блог студии веб-дизайна «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 и некоторых других.




	
	main
 

	

main

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

Элемент article

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




	
	article
 

	

article

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

Элемент section

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




	
	section
 

	

section

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

section

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

section

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

Элемент nav

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




	
	nav
 

	

nav

Элемент aside

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




	
	aside
 

	

aside

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

Элемент header

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




	
	header
 

	

header

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

Элемент footer

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




	
	footer
 

	

footer

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

Элемент address

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




	
	address
 

	

address

Я сам сделал этот сайт и являюсь его полноправным владельцем. Вася Пупкин.

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

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

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

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





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

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

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



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

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

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