Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Стоит также отметить, что на странице не может быть более одной основной области (в конечном счете у вас же не может быть двух частей основного содержимого) и она не может быть использована в качестве потомка некоторых других семантических элементов HTML5, таких как article, aside, header, footer, nav или header. А вот они могут находиться внутри элемента main.

примечание

Официальные положения, касающиеся элемента main, можно найти на сайте http://www.w3.org/TR/html5/grouping-content.html#the-main-element.

Элемент

Элемент

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

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

Для себя можно также решить, будет ли элемент section использоваться там, где разделяемое содержимое имеет внутри себя естественный заголовок (например, h1). Если такого заголовка нет, то лучше, наверное, будет воспользоваться div-контейнером.

примечание

Чтобы посмотреть, что об элементе

говорится в спецификации W3C HTML5, обратитесь по адресу http://www.w3.org/TR/html5/sections.html#the-section-element.

Элемент

Элемент

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

Если вы обычно размечаете свои элементы навигации в виде неупорядоченного списка (

) и набора списочных тегов (li), то вместо этого вам могут больше подойти элемент nav и несколько вложенных тегов .

примечание

Чтобы посмотреть, что об элементе

говорится в спецификации W3C HTML5, перейдите в браузере по адресу http://www.w3.org/TR/html5/sections.html#the-nav-element.

Элемент

Элемент

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

примечание

Чтобы узнать, что говорится в спецификации W3C HTML5 об элементе

, нужно зайти на сайт http://www.w3.org/TR/html5/sections.html#the-article-element.

Элемент

Элемент

используется для содержимого, которое косвенно касается окружающего его контента. На практике я часто пользуюсь им для боковых панелей (когда в них содержится подходящий контент). Этот элемент также считается подходящим для цитат, рекламных вставок и групп элементов навигации. В основном в качестве содержимого элемента aside вполне подойдет все, что не имеет прямого отношения к основному содержимому. Полагаю, что при использовании сайта электронной торговли первейшими кандидатами для вполне могут стать области типа «клиенты, купившие этот товар, приобрели также…».

примечание

Дополнительные сведения из спецификации W3C HTML5 относительно элемента

можно найти по адресу http://www.w3.org/TR/html5/sections.html#the-aside-element.

Элементы

и

В спецификации, относящейся к элементу

, говорится следующее:

«...таким образом, он может использоваться для аннотации иллюстраций, диаграмм, фотографий листингов кода и т. д.».

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

Incredible scones, picture from

Wikipedia

Как видите, элемент

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

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

примечание

Спецификацию, касающуюся элемента

, можно найти по адресу http://www.w3.org/TR/html5/grouping-content.html#the-figure-element.

А спецификация на

находится по адресу http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element.

Элементы

и



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

и .



Рассмотрим следующую разметку (для ее практической проверки можно открыть пример, находящийся в файле example3.html, входящем в каталог кода для данной главы):

I ate 15 scones in one day

Of course I didn't. It would probably kill me if I did. What a

way to go. Mmmmmm, scones!

Этот файл, открытый в браузере Chrome без добавления какого-либо стиля, покажет изначально только текст элемента summary.



При щелчке на любом месте текста элемента

открывается панель. При повторном щелчке эта панель закрывается. Если нужно чтобы изначально панель была открыта, к элементу можно добавить атрибут open: I ate 15 scones in one day

Of course I didn't. It would probably kill me if I did. What a

Читать дальше