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>

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

        way to go. Mmmmmm, scones!</p>

</details>

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

При щелчке на любом месте текста элемента <summary> открывается панель. При повторном щелчке эта панель закрывается. Если нужно чтобы изначально панель была открыта, к элементу <details> можно добавить атрибут open:

<details open>

    <summary>I ate 15 scones in one day</summary>

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

        way to go. Mmmmmm, scones!</p>

</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>. Чтобы не возникало путаницы, следует иметь в виду, что он не предназначен для размещения почтовых адресов и тому подобной информации (если только они действительно не будут представлять собой контактные адреса для рассматриваемого содержимого). Почтовые адреса и другая произвольная контактная информация должна заключаться в старые добрые теги <p>.

Я не сторонник использования элемента <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>

<p>The most resplendent of snacks</p>

Семантика 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> говорится следующее: