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

Дополнительные сведения из спецификации 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

way to go. Mmmmmm, scones!

Поддерживающие данные элементы браузеры обычно добавляют некоторое исходное стилевое оформление, чтобы указать на возможность открытия панели. В данном случае в браузере Chrome (а также Safari) будет выведен темный тре­угольник открытия. Чтобы выключить это оформление, нужно воспользоваться фирменным для WebKit псевдоселектором:

summary::-webkit-details-marker {

display: none;

}

Разумеется, этот же селектор можно использовать для другого стилевого оформления маркера.

В данный момент способ анимации открытия и закрытия отсутствует. Не существует также (без использования кода JavaScript) способа закрытия других панелей подробностей (отображаемых на том же уровне) при открытии какой-нибудь другой панели. Я не уверен в том, что какое-либо из этих пожеланий когда-нибудь будет (или должно быть) воплощено в жизнь. Это следует воспринимать в основном как способ подсказать, что можно было бы сделать с помощью свойства display: none;, переключаемого с помощью кода JavaScript.

К сожалению, на момент работы над этим текстом (в середине 2015 года) поддержка этих элементов в Firefox или Internet Explorer отсутствовала (они просто выводили оба элемента в качестве линейных). Есть, правда, полифиллы (https://mathias\bynens.be/notes/html5-details-jquery), но я надеюсь, что вскоре появится и полноценная поддержка.

Элемент

На практике элемент

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

примечание

Узнать, что говорится об элементе

в спецификации W3C HTML5, можно по адресу http://www.w3.org/TR/html5/sections.html#the-header-element.

Элемент

Элемент

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

примечание

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