Как пользоваться секционными элементами HTML5

Как пользоваться секционными элементами HTML5

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

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

Элемент main

Элемент main должен содержать основной контент вашей веб-страницы. Ему следует быть единственным в своем роде для отдельной страницы, и он не должен появляться на сайте где-то еще. Любой контент, повторяющийся на нескольких страницах (логотипы, поля поиска, ссылки нижнего колонтитула и пр.), помещать в элемент main нельзя.

В нижеприведенном примере элемент main применяется для представления основного содержимого страницы.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Заметьте: мы применили здесь атрибут ARIA role=”main” для указания на значимость этого элемента для программ, которые пока не поддерживают элемент main (таких как некоторые screen reader-ы).

На странице следует использовать всего один элемент main, и его нельзя размещать внутри элементов article, aside, header, footer или nav.

Элемент article

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

Элементы article можно размещать один в другом. В данном случае подразумевается, что вложенные элемент связаны с внешним элементом article.

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

Элемент section

Элемент section применяется для представления группы связанного содержимого. Он аналогичен элементу article с тем лишь отличием, что содержимому внутри элемента section не обязательно иметь смысл вне контекста страницы.

Для определения темы раздела советуем пользоваться элементом заголовков (h1 – h6).

Воспользуемся данным постом блога как примером: можно взять элементы section, представляющие внутри поста каждый раздел по отдельности.

Здесь мы применили элемент article, чтобы представить пост как одно целое, а затем множеством элементов section, чтобы представить каждый из обсуждаемых в посте подразделов. Если вам нужно просто сгруппировать содержимое с целью назначения ему стилей, вам следует воспользоваться элементом div, а не section.

Элемент nav

Элемент nav применяется для разметки набора ссылок на внешние страницы или разделы внутри текущей страницы. Применяемый для основной навигации веб-сайта, элемент nav также отлично подходит для оглавления или просмотра списка блогов.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Элемент aside

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

В этом примере для разметки информации о Google внутри новостной статьи мы воспользовались элементом aside. Пользователь может счесть информацию о компании в aside полезной, но с новостями она напрямую не связана.

Элемент header

Элемент header применяется для представления вводного содержимого к статье или веб-странице. Обычно он содержит элемент заголовка, а также существенные для содержимого метаданные, такие как дата поста или новостной статьи, например. В нем также может содержаться оглавление (в элементе nav) более длинного документа.

Элемент header будет связан с ближайшим элементом секционирования, обычно это прямой родительский элемент страничной структуры.

В данном примере элемент header содержит заголовок и дату новостной статьи.

Элемент footer

Элемент footer используется для представления информации о разделе: автор, копирайт или ссылки на связанные веб-страницы.

Как и в случае с header, элемент footer связывается с ближайшим элементом секционирования.

Элемент address

Элемент address — один из самых неверно понимаемых элементов HTML. Он предназначен не для разметки почтового адреса, а для представления контактной информации статьи или веб-страницы. Это может быть ссылка на сайт автора или его электронный адрес.

Этот элемент часто используется внутри footer для article.

Последние размышления об элементах секционирования

Из этого поста вы узнали, как пользоваться элементами секционирования HTML5 при разметке веб-страниц. Их применение гарантирует массу преимуществ. Одно из основных – передача определенным областям страницы более семантического значения, создание возможности для компьютерных программ идентифицировать ключевые элементы, такие как основной контент и страничная навигация. Эта информация чрезвычайно важна для таких приложений, как screen reader-ы.

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

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

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

Автор: Matt West

Источник: http://blog.teamtreehouse.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. SkyNoSky

    » что вы думаете об элементах секционирования HTML5.» Я думаю это давно должно было произойти. С ними код становится ещё более читабельным и благородным, и как автор статьи заметил «оно заставляет разработчиков лучше обдумывать структуру своих веб-страниц.».
    Соответственно наверное наступила пора, изменять\публиковать статьи и уроки используя новые элементы. Сам использую и это действительно удобно.

  2. Евгений

    Сейчас применение новых тегов уже состоявшаяся действительность. Особенно удручало написание доктайпов в xhtml. У меня кстати уже все переведено на хтмл5.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree