Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
примечание
Чтобы узнать, что говорится в спецификации W3C HTML5 об элементе <article>, нужно зайти на сайт http://www.w3.org/TR/html5/sections.html#the-article-element.
Элемент <aside>
Элемент <aside> используется для содержимого, которое косвенно касается окружающего его контента. На практике я часто пользуюсь им для боковых панелей (когда в них содержится подходящий контент). Этот элемент также считается подходящим для цитат, рекламных вставок и групп элементов навигации. В основном в качестве содержимого элемента aside вполне подойдет все, что не имеет прямого отношения к основному содержимому. Полагаю, что при использовании сайта электронной торговли первейшими кандидатами для <aside> вполне могут стать области типа «клиенты, купившие этот товар, приобрели также…».
примечание
Дополнительные сведения из спецификации W3C HTML5 относительно элемента <aside> можно найти по адресу http://www.w3.org/TR/html5/sections.html#the-aside-element.
Элементы <figure> и <figcaption>
В спецификации, относящейся к элементу <figure>, говорится следующее:
«...таким образом, он может использоваться для аннотации иллюстраций, диаграмм, фотографий листингов кода и т. д.».
С его помощью корректуру части разметки из первой главы можно выполнить следующим образом:
<figure class="MoneyShot">
<img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" />
<figcaption class="ImageCaption">Incredible scones, picture from
Wikipedia</figcaption>
</figure>
Как видите, элемент <figure> используется в качестве контейнера этого небольшого законченного блока. Внутри него, чтобы предоставить подпись для родительского элемента <figure>, используется элемент <figcaption>.
Этот элемент пригодится тогда, когда изображениям или коду нужны небольшие сопроводительные подписи, которые не будут соответствовать основному тексту содержимого.
примечание
Спецификацию, касающуюся элемента <figure>, можно найти по адресу http://www.w3.org/TR/html5/grouping-content.html#the-figure-element.
А спецификация на <figcaption> находится по адресу http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element.
Элементы <details> и <summary>
Вам, наверное, не раз хотелось создать на странице простой открывающийся и закрывающийся виджет, то есть фрагмент краткого изложения, по щелчку на котором открывается панель с дополнительной информацией. HTML5 облегчает создание такой модели с помощью элементов <details> и <summary>.
Рассмотрим следующую разметку (для ее практической проверки можно открыть пример, находящийся в файле example3.html, входящем в каталог кода для данной главы):
<details>
<summary>I ate 15 scones in one day</summary>
Of course I didn't. It would probably kill me if I did. What a
way to go. Mmmmmm, scones!
</details>
Этот файл, открытый в браузере Chrome без добавления какого-либо стиля, покажет изначально только текст элемента summary.
При щелчке на любом месте текста элемента <summary> открывается панель. При повторном щелчке эта панель закрывается. Если нужно чтобы изначально панель была открыта, к элементу <details> можно добавить атрибут open:
<details open>
<summary>I ate 15 scones in one day</summary>
Of course I didn't. It would probably kill me if I did. What a
way to go. Mmmmmm, scones!
</details>
Поддерживающие данные элементы браузеры обычно добавляют некоторое исходное стилевое оформление, чтобы указать на возможность открытия панели. В данном случае в браузере Chrome (а также Safari) будет выведен темный треугольник открытия. Чтобы выключить это оформление, нужно воспользоваться фирменным для WebKit псевдоселектором:
summary::-webkit-details-marker {
display: none;
}
Разумеется, этот же селектор можно использовать для другого стилевого оформления маркера.
В данный момент способ анимации открытия и закрытия отсутствует. Не существует также (без использования кода JavaScript) способа закрытия других панелей подробностей (отображаемых на том же уровне) при открытии какой-нибудь другой панели. Я не уверен в том, что какое-либо из этих пожеланий когда-нибудь будет (или должно быть) воплощено в жизнь. Это следует воспринимать в основном как способ подсказать, что можно было бы сделать с помощью свойства display: none;, переключаемого с помощью кода JavaScript.
К сожалению, на момент работы над этим текстом (в середине 2015 года) поддержка этих элементов в Firefox или Internet Explorer отсутствовала (они просто выводили оба элемента в качестве линейных). Есть, правда, полифиллы (https://mathiasbynens.be/notes/html5-details-jquery), но я надеюсь, что вскоре появится и полноценная поддержка.
Элемент <header>
На практике элемент <header> может использоваться для области титульных данных заголовка сайта. Он также может использоваться в качестве введения в остальное содержимое, например в раздел, заключенный в элемент <article>. На одной странице его можно использовать столько раз, сколько нужно (к примеру, на вашей странице элемент <header> может быть внутри каждого элемента <section>).
примечание
Узнать, что говорится об элементе <header> в спецификации W3C HTML5, можно по адресу http://www.w3.org/TR/html5/sections.html#the-header-element.
Элемент <footer>
Элемент <footer> нужно использовать для содержания информации о разделе, в котором он находится. В нем могут содержаться ссылки на другие документы или, к примеру, информация об авторском праве. Если нужно, то он, как и элемент <header>, может использоваться на одной странице многократно. Например, его можно использовать для подвала блога, а также как подвальную часть в отдельной публикации блога. Но в спецификации объясняется, что контактная информация автора публикации в блоге должна вместо него помещаться в элемент <address>.
примечание
Все, что говорится в спецификации W3C HTML5 об элементе <footer>, можно найти по адресу http://www.w3.org/TR/html5/sections.html#the-footer-element.
Элемент <address>
Элемент <address> должен использоваться исключительно для разметки контактной информации для своего ближайшего предка, <article> или <body>. Чтобы не возникало путаницы, следует иметь в виду, что он не предназначен для размещения почтовых адресов и тому подобной информации (если только они действительно не будут представлять собой контактные адреса для рассматриваемого содержимого). Почтовые адреса и другая произвольная контактная информация должна заключаться в старые добрые теги
.
Я не сторонник использования элемента <address>, поскольку по собственному опыту знаю, что было бы намного полезнее размещать в собственном элементе именно физический адрес, но это мое личное мнение. Надеюсь, вы сможете найти больше смысла в применении данного элемента.
примечание
Чтобы узнать, что еще говорится в спецификации W3C HTML5 об элементе <address>, обратитесь по адресу http://www.w3.org/TR/html5/sections.html#the-address-element.
Замечания относительно элементов <h1> — <h6>
Только в последнее время я узнал, что для разметки заголовков и подзаголовков использовать теги <h1> — <h6> не рекомендуется. Я имею в виду следующее:
<h1>Scones:</h1>
<h2>The most resplendent of snacks</h2>
А вот цитата из спецификации HTML5:
«Элементы <h1> — <h6> не должны использоваться для разметки подзаголовков, субтитров, альтернативных названий и слоганов, если только они не рассматриваются в качестве заголовка для нового раздела или подраздела».
И это еще не самое неоднозначное положение в спецификации!
Как же нам поступать в подобных случаях? В спецификации этому посвящен целый раздел (http://www.w3.org/TR/html5/common-idioms.html#common-idioms). Лично я отдавал предпочтение устаревшему элементу <hgroup>, но, к сожалению, этот корабль уже уплыл (упоминание о нем можно найти в разделе «Устаревшие функции HTML»). Итак, чтобы последовать совету, данному в спецификации, предыдущий пример должен быть переписан следующим образом:
<h1>Scones:</h1>
The most resplendent of snacks
Семантика HTML5 на текстовом уровне
Кроме уже рассмотренных элементов, определяющих структуру и помогающих сгруппировать данные, в HTML5 предусматривается ряд тегов, которые ранее назывались линейными элементами. Теперь в спецификации HTML5 на эти элементы ссылаются как на элементы семантики на текстовом уровне (http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics). Рассмотрим несколько примеров общего характера.
Элемент <b>
Исторически сложилось так, что элемент <b> означает «выделить жирным шрифтом» (http://www.w3.org/TR/html4/present/graphics.html#edef-B). Это было еще в те давние времена, когда частью разметки считался и выбор стиля. Но теперь официально этот элемент можно использовать только в качестве стилевой привязки в коде CSS, поскольку в текущей спецификации HTML5 об элементе <b> говорится следующее:
