4.3 Секции.

Опубликовано: 28 июля 2014      Перевод:

Перевод спецификации HTML Living Standard, параграф: 4.3 Sections.

Статус: Живой стандарт.

4.3 Секции

4.3.1 Элемент body

IDL
interface  HTMLBodyElement  :  HTMLElement  {
//имеет также устаревшие компоненты
};
HTMLBodyElement  реализует  WindowEventHandlers;

Элемент body представляет основной контент документа.

В отвечающих спецификации документах присутствует только один элемент body. IDL атрибут document.body предоставляет скриптам простой удобный доступ к элементу body документа.

Некоторые DOM операции (например, те, которые предусмотрены drag and drop моделью) определяются в рамках "body элемента". В этом случае имеется в виду конкретный элемент структуры DOM, полностью отвечающий определению данного термина, а не любой другой случайный элемент body.

Элемент body представляет ряд обработчиков событий объекта Window, которые реализованы в виде контентных атрибутов обработчиков событий. Он также дублирует соответствующие им IDL атрибуты обработчиков событий.

Такие обработчики событий объекта Window как onblur, onerror, onfocus, onload, onresize и onscroll распространяются и на элемент body, переопределяя при этом типичные обработчики событий с теми же именами, которые обычно поддерживаются HTML элементами.

Так, к примеру, в ситуации, когда всплывающее событие error передается потомку элемента body документа Document, то сначала оно активирует контентный атрибут обработчика события onerror целевого элемента, потом одноименный атрибут корневого html элемента и лишь после этого воздействует на контентный атрибут обработчика события  onerror элемента body. Так происходит потому, что хотя событие всплывает вверх начиная с целевого элемента и далее к элементу body, к html элементу, к объекту Document и к объекту Window, но обработчик события элемента body следит за объектом Window, а не за самим элементом body. Однако в том случае, если к элементу body привязан обычный слушатель события с помощью метода addEventListener(), то определяемый таким образом обработчик события будет запускаться сразу же после достижения объектом события элемента body в процессе его всплытия по DOM структуре, а не тогда, когда оно достигнет объекта Window.

На этой странице реализован индикатор, который показывает пользователю находится ли он в сети или нет:

<!DOCTYPE HTML>
<html>
<head>
<title>Online or offline?</title>
<script>
function update(online) {
document.getElementById('status').textContent =
online ? 'Online' : 'Offline';
}
</script>
</head>
<body ononline="update(true)"
onoffline="update(false)"
onload="update(navigator.onLine)">
<p>You are: <span id="status">(Unknown)</span></p>
</body>
</html>

4.3.2 Элемент article

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

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

Авторская информация, ассоциированная с элементом article (смотри элемент address) не распространяется на вложенные в него article элементы.

Когда данный элемент специально используется для содержания контента, который предназначен для распространения посредством синдикации, элемент article выполняет ту же роль, что и entry элемент, предусмотренный форматом синдикации Atom. [ATOM]

Указать дату публикации для элемента article можно с помощью микроданных schema.org, применяя для этого подтипы CreativeWork.

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

В этом примере показан пост блога, который реализован в виде элемента article с включением нескольких schema.org аннотаций:

<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<p><time itemprop="datePublished" datetime="2009-10-09">
3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
<p>If there's a microphone anywhere near you, assume it's
hot and sending whatever you're saying to the world.
Seriously.</p>
<p>…</p>
<footer>
<a itemprop="discussionUrl" href="?comments=1">
Show comments…</a>
</footer>
</article>

А вот тот же пост, но содержащий несколько комментариев:

<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<p><time itemprop="datePublished" datetime="2009-10-09">
3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
<p>If there's a microphone anywhere near you, assume it's
hot and sending whatever you're saying to the world.
Seriously.</p>
<p>…</p>
<section>
<h1>Comments</h1>
<article itemprop="comment" itemscope
itemtype="http://schema.org/UserComments"
id="c1">
<link itemprop="url" href="#c1">
<footer>
<p>Posted by: <span itemprop="creator" itemscope
itemtype="http://schema.org/Person">
<span itemprop="name">George Washington</span>
</span></p>
<p><time itemprop="commentTime" datetime="2009-10-10">
15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist
friends!</p>
</article>
<article itemprop="comment" itemscope
itemtype="http://schema.org/UserComments"
id="c2">
<link itemprop="url" href="#c2">
<footer>
<p>Posted by: <span itemprop="creator" itemscope
itemtype="http://schema.org/Person">
<span itemprop="name">George Hammond</span>
</span></p>
<p><time itemprop="commentTime" datetime="2009-10-10">
5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>

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

Следующий пример показывает как используются элементы article для размещения виджетов на портальной странице.

<!DOCTYPE HTML>
<title>eHome Portal</title>
<link rel=stylesheet href="/styles/main.css">
<article>
<style scoped> @import url(/widgets/stocks/look.css); </style>
<script src="/widgets/stocks/core.js"></script>
<h1>Stocks</h1>
<table>
<thead> <tr> <th> Stock <th> Value <th> Delta
<tbody> <template> <tr> <td> <td> <td> </template>
</table>
<p> <input type=button value="Refresh" onclick="stocks.refresh()">
</article>
<article>
<style scoped> @import url(/widgets/news/look.css); </style>
<script src="/widgets/news/core.js"></script>
<h1>News</h1>
<ul>
<template>
<li>
<p><img> <strong></strong>
<p>
</template>
</ul>
<p> <input type=button value="Refresh" onclick="news.refresh()">
</article>

4.3.3 Элемент section

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

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

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

В приведенном ниже примере можно увидеть статью (которая является частью бóльшей веб-страницы) о яблоках, которая включает две небольшие секции.

<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>

Обратите внимание, что применение элементов section подразумевает то, что разработчики могут везде использовать элемент h1, не принимая во внимание то, какой уровень вложенности представляет определенная секция – верхний, второй третий и т.д.

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

<!DOCTYPE Html>
<Html
><Head
><Title
>Graduation Ceremony Summer 2022</Title
></Head
><Body
><H1
>Graduation</H1
><Section
><H1
>Ceremony</H1
><P
>Opening Procession</P
><P
>Speech by Validactorian</P
><P
>Speech by Class President</P
><P
>Presentation of Diplomas</P
><P
>Closing Speech by Headmaster</P
></Section
><Section
><H1
>Graduates</H1
><Ul
><Li
>Molly Carpenter</Li
><Li
>Anastasia Luccio</Li
><Li
>Ebenezar McCoy</Li
><Li
>Karrin Murphy</Li
><Li
>Thomas Raith</Li
><Li
>Susan Rodriguez</Li
></Ul
></Section
></Body
></Html>

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

<article class="book">
<style>
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue,
sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto,
Helvetica Neue,
sans-serif; }
</style>
<header>
<hgroup>
<h1>My Book</h1>
<h2>A sample with not much content</h2>
</hgroup>
<p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
<h1>My First Chapter</h1>
<p>This is the first of my chapters. It doesn't say
much.</p>
<p>But it has two paragraphs!</p>
</section>
<section class="chapter">
<h1>It Continutes: The Second Chapter</h1>
<p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
<h1>Chapter Three: A Further Example</h1>
<p>It's not like a battle between brightness and
earthtones would go unnoticed.</p>
<p>But it might ruin my story.</p>
</section>
<section class="appendix">
<h1>Appendix A: Overview of Examples</h1>
<p>These are demonstrations.</p>
</section>
<section class="appendix">
<h1>Appendix B: Some Closing Remarks</h1>
<p>Hopefully this long example shows that you
<em>can</em> style sections, so long as
they are used to indicate actual sections.</p>
</section>
</article>

4.3.4 Элемент nav

Элементnav представляет секцию документа, ведущую на другие страницы или в другие области текущей страницы: секцию, содержащую навигационные ссылки.

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

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

<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> —
<a href="blog.html">Blog</a> —
<a href="forums.html">Forums</a></p>
<p>Last Modified: <span itemprop="dateModified">
2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a>
</li>
<li><a href="today.html">Things sheeple need to wake up for
today</a></li>
<li><a href="successes.html">Sheeple we have managed to
wake</a></li>
</ul>
</nav>
</header>
<main>
<article itemprop="blogPosts" itemscope
itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
<div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
…more content…
</div>
<footer>
<p>Posted <time itemprop="datePublished"
datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
…more blog posts…
</main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
<span itemprop="copyrightHolder">The Example Company</span>
</p>
<p><a href="about.html">About</a> —
<a href="policy.html">Privacy Policy</a> —
<a href="contact.html">Contact Us</a></p>
</footer>
</body>

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

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

В этом примере имеется два nav элемента, один для главной навигации по сайту, а другой для вспомогательной навигации в рамках текущей страницы.

<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
…more…
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
…more…
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>…more…</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>…more…</p>
</section>
…more…
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a>
| <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>

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

<nav>
<h1>Navigation</h1>
<p>You are on my home page. To the north lies <a href="/blog">
my blog</a>, from whence the sounds of battle can be heard.
To the east you can see a large mountain, upon which many <a
href="/school">school papers</a> are littered. Far up thus
mountain you can spy a little figure who appears to be me,
desperately scribbling a <a href="/school/thesis">thesis</a>.
</p>
<p>To the west are several exits. One fun-looking exit is
labeled <a href="http://games.example.com/">"games"</a>.
Another more boring-looking exit is labeled <a
href="http://isp.example.net/">ISP™</a>.
</p>
<p>To the south lies a dark and dank <a href="/about">
contacts page</a>. Cobwebs cover its disused entrance, and at
one point you see a rat run quickly out of the page.</p>
</nav>

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

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
<h1>Folders</h1>
<ul>
<li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
<li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
<li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
<li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
<li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
</ul>
</nav>

4.3.5 Элемент aside

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

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

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

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

<aside>
<h1>Switzerland</h1>
<p>Switzerland, a land-locked country in the middle of
geographic Europe, has not joined the geopolitical European
Union, though it is a signatory to a number of European
treaties.</p>
</aside>

В этом примере изображен случай использования элемента aside с целью разметки броской цитаты в рамках бóльшей статьи.

<p>He later joined a large company, continuing on the same
work. <q>I love my job. People ask me what I do for fun when
I'm not at work. But I'm paid to do my hobby, so I never
know what to answer. Some people wonder what they would do if
they didn't have to work… but I know what I would do,
because I was unemployed for a year, and I filled that time
doing exactly what I do now.</q></p>

<aside>
<q> People ask me what I do for fun when I'm not at work.
But I'm paid to do my hobby, so I never know what to answer.
</q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

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

<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<!–– this aside contains two sections that are tangentially
related to the page, namely, links to other blogs, and links
to blog posts from this blog ––>
<nav>
<h1>My blogroll</h1>
<ul>
<li><a href="http://blog.example.com/">Example Blog</a>
</ul>
</nav>
<nav>
<h1>Archives</h1>
<ol reversed>
<li><a href="/last-post">My last post</a>
<li><a href="/first-post">My first post</a>
</ol>
</nav>
</aside>
<aside>
<!–– this aside is tangentially related to the page also, it
contains twitter messages from the blog author ––>
<h1>Twitter Feed</h1>
<blockquote cite="http://twitter.example.net/t31351234">
I'm on vacation, writing my blog.
</blockquote>
<blockquote cite="http://twitter.example.net/t31219752">
I'm going to go on vacation soon.
</blockquote>
</aside>
<article>
<!–– this is a blog post ––>
<h1>My last post</h1>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Permalink</a>
</footer>
</article>
<article>
<!–– this is also a blog post ––>
<h1>My first post</h1>
<p>This is my first post.</p>
<aside>
<!–– this aside is about the blog post, since it's inside
the <article> element; it would be wrong, for instance,
to put the blogroll here, since the blogroll isn't really
related to this post specifically, only to the page
as a whole ––>
<h1>Posting</h1>
<p>While I'm thinking about it, I wanted to say something
about posting. Posting is fun!</p>
</aside>
<footer>
<p><a href="/first-post" rel=bookmark>Permalink</a>
</footer>
</article>
<footer>
<nav>
<a href="/archives">Archives</a> —
<a href="/about">About me</a> —
<a href="/copyright">Copyright</a>
</nav>
</footer>
</body>

4.3.6 Элементы h1, h2, h3, h4, h5 и h6.

IDL

interface  HTMLHeadingElement  :  HTMLElement  {
//имеет также устаревшие компоненты
};

Эти элементы представляют заголовки своих секций.

Семантика и назначение этих элементов определены в параграфе о заголовках и секциях.

Эти элементы подразумевают иерархию, уровень которой определяется цифрой, содержащейся в имени элемента. Считается, что элемент h1 представляет высший уровень в иерархии заголовков, h6 — самый низкий, а два одноименных элемента имеют один уровень.

Если судить по генерируемым документами структурам (в первом случае создаваемой заголовками, во втором – секционными элементами), то оба представленных ниже сниппета семантически эквивалентны:

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>

<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h1>Diving in</h1>
</section>
<section>
<h1>Simple shapes</h1>
</section>
<section>
<h1>Canvas coordinates</h1>
<section>
<h1>Canvas coordinates diagram</h1>
</section>
</section>
<section>
<h1>Paths</h1>
</section>
</body>

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

4.3.7 Элемент hgroup

Элемент hgroup представляет заголовочную часть секции. Этот элемент используется для группировки ряда h1h6 элементов в том случае, если заголовок предусматривает несколько уровней, в роли которых могут выступать подзаголовки, альтернативные названия или слоганы.

Иерархический уровень элемента hgroup соответствует наивысшему уровню представленному одним из h1h6 элементов, являющихся дочерними по отношению к hgroup элементу, если таковые имеются или же эквивалентен уровню предусмотренному h1 элементом (то есть наивысшему уровню). Другие элементы заголовочного контента в рамках hroup элемента указывают на подзаголовки или дополнительные заголовки.

В разделе заголовки и секции определяется то, каким образом элементы hgroup присваиваются отдельным секциям.

Здесь приводятся несколько допустимых вариантов заголовочных фрагментов:

<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup>

<hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

В представленных выше примерах элементы hgroup используются с целью маскирования h2 элемента (который выполняет роль второстепенного заголовка) от алгоритма определения структуры документа.

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

The reality dysfunction: Space is not the only void

Или же он может выглядеть вот так:

The reality dysfunction (Space is not the only void)

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

The reality dysfunction
Space is not the only void

В приведенном ниже примере элемент hgroup используется для разметки двухуровневых заголовков в диалоговом окне, подобном «помощнику» работы с приложением:

<dialog onclose="walletSetup.continue(this.returnValue)">
<hgroup>
<h1>Wallet Setup</h1>
<h2>Configure your Wallet funding source</h2>
</hgroup>
<p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
salesmen you may find in the dungeons, and to pay for mercenaries.</p>
<p>We support two payment sources:</p>
<form method=dialog>
<fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
<legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
<p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
<p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
<p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label>
<p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label>
</fieldset>
<fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
<legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend>
<p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label>
<p><label>Routing number: <input name=bank2 inputmode=numeric></label>
<p><label>Account number: <input name=bank3 inputmode=numeric></label>
</fieldset>
<button type=submit value="back"> < Back </button> <button type=submit value="next"> Next > </button>
</form>
</dialog>

4.3.8 Элемент header

Элемент header представляет блок вспомогательной навигационной или вводной информации.

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

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

<header>
<p>Welcome to…</p>
<h1>Voidwars!</h1>
</header>

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

<header>
<hgroup>
<h1>Scalable Vector Graphics (SVG) 1.2</h1>
<h2>W3C Working Draft 27 October 2004</h2>
</hgroup>
<dl>
<dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2004/WD-SVG12-
20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
<dt>Previous version:</dt>
<dd><a href="http://www.w3.org/TR/2004/WD-SVG12-
20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
<dt>Latest version of SVG 1.2:</dt>
<dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org
/TR/SVG12/</a></dd>
<dt>Latest SVG Recommendation:</dt>
<dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org
/TR/SVG/</a></dd>
<dt>Editor:</dt>
<dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">
dean@w3.org</a></dd>
<dt>Authors:</dt>
<dd>See <a href="#authors">Author List</a></dd>
</dl>
<p class="copyright"><a
href="http://www.w3.org/Consortium/Legal/ipr-notic …
</header>
Элемент header не является секционным контентом и не представляет отдельную секцию.

В этом примере у страницы есть основной заголовок, представленный элементом h1 и два подраздела, чьи заголовки представлены h2 элементами. Контент, находящийся за элементом header по-прежнему принадлежит последнему подразделу, который начинается в рамках элемента header, поскольку элемент header не учитывается алгоритмом построения структуры документа.

<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li><a href="/games">Games</a>
<li><a href="/forum">Forum</a>
<li><a href="/download">Download</a>
</ul>
</nav>
<h2>Important News</h2> <!–– здесь начинается второй подраздел ––>
<!–– этот фрагмент является частью подраздела под наименованием "Important News" ––>
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!–– здесь начинается третий подраздел ––>
</header>
<p>You have three active games:</p>
<!–– этот абзац все еще является частью подраздела под именем "Games" ––>

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

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

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

Присутствие завершителей в конце секции совсем необязательно, хотя зачастую они там располагаются.

Когда его ближайшим родительским элементом секционного контента или секционным корневым элементом является body элемент, тогда он относится ко всей странице.

Элемент footer не является секционным контентом и не образует отдельную секцию.

Вот страница, с двумя завершителями, один из них размещен сверху, а другой снизу и в них содержится одинаковый контент:

<body>
<footer><a href="../">Back to index…</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<footer><a href="../">Back to index…</a></footer>
</body>

В следующем примере показано одновременное использование элемента footer как для подвала сайта в целом, так и для завершителя раздела:

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
<H1>Episode 15</H1>
<VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
<P><A HREF="/fm/015.ogv">Download video</A>.</P>
</VIDEO>
<FOOTER> <!–– footer for article ––>
<P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21
at 6:26pm</TIME></P>
</FOOTER>
</ARTICLE>
<ARTICLE>
<H1>My Favorite Trains</H1>
<P>I love my trains. My favorite train of all time is a Kof.</P>
<P>It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</P>
<FOOTER> <!–– footer for article ––>
<P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15
at 2:54pm</TIME></P>
</FOOTER>
</ARTICLE>
<FOOTER> <!–– site wide footer ––>
<NAV>
<P><A HREF="/credits.html">Credits</A> —
<A HREF="/tos.html">Terms of Service</A> —
<A HREF="/index.html">Blog Index</A></P>
</NAV>
<P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

Дизайны некоторых сайтов предусматривают наличие того, что иногда именуется «объемными завершителями» — подвалы, которые содержат массу информации: изображения; ссылки на другие статьи; ссылки на страницы обратной связи, специальных предложений и т.п., вмещая, таким образом, практически целую главную страницу в ее подвальной части.

Этот фрагмент демонстрирует нижнюю часть страницы сайта с «объемным завершителем»:


<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · <a href="articles/somersaults/1">Part 2</a></p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!–– sic ––>? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more…</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? <a
href="articles/crisps/1">Read more…</a></p>
</section>
<ul>
<li> <a href="/about">About us…</a>
<li> <a href="/feedback">Send feedback!</a>
<li> <a href="/sitemap">Sitemap</a>
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
<a href="/tos">Terms of Service</a></small></p>
</footer>
</body>

4.3.10 Элемент address

Элемент address представляет контактную информацию, относящуюся к ближайшему article или body родительскому элементу. Если им является элемент body, то контактная информация относится к документу в целом.

Например, страница с сайта W3C, принадлежащая главе, описывающей HTML, должна включать следующую контактную информацию:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

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

Элемент address не должен содержать любую другую информацию за исключением контактной.

Вот пример несоответствующего спецификации варианта использования элемента address:

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

В принципе, элемент address предполагается включать в элемент footer наряду с другой, соответствующей информацией.

Контактная информация для любого узла node — это совокупность address элементов, определенных в первом подходящем из перечисленных ниже условий:

  • Если node является элементом article
  • Если node является элементом body
    • Контактная информация включает в себя все address элементы, предком которых является node и не имеющие других родительских body или article элементов, которые в свою очередь являются потомками узла node.
  • Если родительским элементом узла node является элемент article
  • Если родительским элементом узла node является body элемент
    • Контактная информация узла node совпадает с контактной информацией ближайшего из элементов article или body.
  • Если документ document, в котором находится node, имеет элемент body
    • Контактная информация узла node совпадает с контактной информацией элемента body настоящего документа document.
  • В других случаях
    • Контактная информация для узла node отсутствует.

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

В этом примере завершитель содержит контактную информацию и уведомление об авторских правах.

<footer>
<address>
For more details, contact
<a href="mailto:js@example.com">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.11 Заголовки и секции

Элементы h1h6 являются заголовками.

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

Об определенных элементах, включая такие как blockquote и td, говорят, что они являются секционными корневыми элементами. Эти элементы могут иметь собственную структуру, но секции и заголовки, находящиеся внутри этих элементов не участвуют в формировании структур их предков.

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

Для следующего фрагмента документа:

<body>
<h1>Foo</h1>
<h2>Bar</h2>
<blockquote>
<h3>Bla</h3>
</blockquote>
<p>Baz</p>
<h2>Quux</h2>
<section>
<h3>Thud</h3>
</section>
<p>Grunt</p>
</body>

… будет сформирована структура:

1. Foo (заголовок явно определенной секции body, содержащей параграф
"Grunt")
1. Bar (заголовок, начинающий неявную секцию, содержающу элемент
цитату и параграф "Baz")
2. Quux (заголовок, начинающий неявную секцию, не содержащую
контента кроме самого заголовка)
3. Thud (заголовок явно созданной секции section)

Обратите внимание на то, как section завершает предшествующую ей неявную секцию и это приводит к тому, что параграф "Grunt" возвращается в секцию высшего уровня.

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

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

К примеру, следующий документ вполне корректен:

<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter than green ones.</p>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>

Но, все же, этот документ может быть выражен более четко:

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>

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

Третий вариант этого документа тоже семантически идентичен, к тому же он более удобен в сопровождении (к примеру, если в процессе редактирования документа секции зачастую перемещаются и/или заменяются):

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h1>Taste</h1>
<p>They taste lovely.</p>
<section>
<h1>Sweet</h1>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>

Для корректного отображения документа из последнего примера в традиционных браузерах потребуется наличие определенных стилевых настроек. А в устаревших браузерах, в которых нет поддержки CSS, все заголовки этого документа будут отображены как заголовки высшего уровня.

4.3.11.1 Формирование структуры

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

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

Секция — это контейнер, который соответствует определенному количеству узлов исходного DOM дерева. Каждая секция может иметь один ассоциированный с ней заголовок и содержать любое количество других, более глубоко вложенных секций. Алгоритм построения структуры документа также сопоставляет каждый узел DOM дерева с конкретной секцией и потенциально с заголовком. (Секции, представленные в структуре документа, не являются элементами section, хотя некоторые из них могут соответствовать этим элементам, они являются просто концептуальными секциями.)

Следующий фрагмент разметки:

<body>
<h1>A</h1>
<p>B</p>
<h2>C</h2>
<p>D</p>
<h2>E</h2>
<p>F</p>
</body>

…приведет к представленной ниже структуре, созданной для узла body (а следовательно и для документа в целом):

1. Секция созданная для узла body.
Ассоциируется с заголовком "A".
Также ассоциируется с параграфом "B".
Вложенные секции:

1. Неявная секция для первого h2 элемента.
Ассоциируется с заголовком "C".
Также ассоциируется с параграфом "D".
Вложенных секций нет.
2. Неявная секция для второго h2 элемента.
Ассоциируется с заголовком "E".
Также ассоциируется с параграфом "F".
Вложенных секций нет.

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

  1. Обнулить значение переменной current outline target. (В ней хранится элемент, чья структура в данный момент формируется.)
  2. Установить значение переменной current section в ноль. (Хранит указатель на секцию, поскольку каждый из имеющихся в DOM элементов может быть ассоциирован с секцией.)
  3. Создать стек для хранения элементов, который используется для контроля вложенности. Инициализировать данный стек пустым.
  4. Выполнить обход DOM в древовидной последовательности, начиная с корня поддерева элемента секционного контента или секционного корневого элемента, структуру которого необходимо создать и в моменты входа в каждый элемент и выхода из него выполнять действия, находящееся в первом подходящем из представленных ниже шагов.
    • При выходе из элемента, который является элементом, находящимся на вершине стека
    • Покидаемый в данном случае элемент — это элемент заголовочного контента или элемент с атрибутом hidden.

      • Вытолкнуть этот элемент из стека.
    • При входе в элемент с атрибутом hidden
      • Вставить в стек элемент, в который выполняется вход. (Таким образом мы заставляем алгоритм пропустить сам элемент и любых имеющихся у него потомков.)
    • При входе в элемент секционного контента
      • Выполнить следующие шаги:
        1. Если значение current outline target не равно нулю выполните следующие шаги:
          1. Если у current section нет заголовка, создать неявный заголовок и назначить его заголовком для current section.
          2. Вставить элемент из current outline target в стек.
        2. Переменной current outline target присвоить элемент, в который выполняется вход.
        3. Переменной current section присвоить значение вновь созданной секции для current outline target элемента.
        4. Ассоциировать current outline target элемент с current section.
        5. Предусмотреть новую структуру для нового current outline target элемента, инициализируя ее с только что созданной current section в качестве единственной секции структуры.
    • При выходе из элемента секционного контента, если стек не пустой
      • Выполнить следующие шаги:
        1. Если у current section нет заголовка, создать неявный заголовок в качестве заголовка для current section.
        2. Определить current section как родительскую секцию для секции элемента из current outline target.
        3. Вытолкнуть верхний элемент из стека и вместо него вставить current outline target элемент.
    • При выходе из элемента секционного контента или секционного корневого элемента (когда стек пустой)
    • Элемент, из которого в данный момент выполняется выход, это current outline target элемент, который является элементом секционного контента или секционным корневым элементом, находящимся в корне поддерева, структура которого в данный момент формируется.
      • Если у current section нет заголовка, создать неявный заголовок в качестве заголовка для current section.

        Перейти к следующему шагу, предусмотренному главным внешним списком шагов алгоритма. (Обход закончен.)

    • При входе в элемент заголовочного контента.
      • Если у current section нет заголовка, назначить элемент, в который выполняется вход заголовком для current section.

        В противном случае, если уровень элемента, в который выполняется вход равен или выше уровня заголовка последней секции структуры, создаваемой для current outline target или же заголовок последней секции структуры current outline target является неявным заголовком — создать новую секцию и добавить ее к структуре current outline target элемента, таким образом, чтобы вновь созданная секция была новой последней секцией этой структуры. Присвоить переменной current section значение вновь созданной секции. Новым заголовком current section назначить элемент, в который выполняется вход.

        В противном случае, выполнить следующие дополнительные действия:

        1. Присвоить переменной candidate section секцию, хранящуюся в current section.
        2. Заголовочный цикл: Если уровень элемента, в который выполняется вход ниже чем уровень заголовка candidate section — создать новую секцию и добавить ее к candidate section. (Эти действия не влияют на последнюю секцию данной структуры, она остается прежней.) Переменной current section присвоить вновь созданную секцию. Назначить элемент, в который выполняется вход заголовком для current section. Прекратить дальнейшее выполнение дополнительных действий, предусмотренных данным списком.
        3. Переменной new candidate section присвоить секцию создаваемой структуры current outline target элемента, в которой содержится candidate section.
        4. Переменной candidate section присвоить секцию, находящуюся в new candidate section.
        5. Вернуться к шагу с меткой 'Заголовочный цикл'.

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

        Не забывайте о том, что заголовок h1 имеет высший уровень, а h6 низший.

    • В противном случае
      • Не предпринимать никаких действий.

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

  5. Ассоциировать все не соответствующие элементам документа узлы, находящиеся в поддереве, структура которого в данный момент формируется, со структурой, с которой ассоциированы их родительские элементы.
  6. Ассоциировать все узлы данного поддерева с заголовком той секции, с которой они ассоциированы, если такие имеются.

Созданное представленным выше алгоритмом дерево секций или его соответствующее подмножество, должно использоваться при генерации структуры документа, например, для построения его содержания.

Структура, созданная для элемента body документа document, является структурой всего документа.

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

По этой причине, при выборе первой секции документа пользователь всегда будет перемещен в его начало, независимо от того, где будет найден первый заголовок элемента body.

Структурная глубина элемента заголовочного контента, ассоциированного с секцией section представляется числом, равным количеству родительских секций секции section, находящихся вплоть до самой внешней структуры, в которой оказывается сама section после формирования структур элементов документа Document, плюс 1. Структурная глубина элемента заголовочного контента, который не ассоциирован с секцией равна 1.

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

Пример кода:

Обратите внимание на следующий сниппет:

<body>
<nav>
<p><a href="/">Home</a></p>
</nav>
<p>Hello world.</p>
<aside>
<p>My cat is cute.</p>
</aside>
</body>

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

1. Untitled document
1. Navigation
2. Sidebar

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

Следующая JavaScript функция демонстрирует как необходимо выполнять обход дерева. Аргумент root нужен для указания корня дерева, обход которого необходимо произвести (им может быть как элемент секционного контента, так и секционный корневой элемент), а аргументы enter и exit используются для указания функций обратного вызова, которые вызываются при наступлении соответствующих событий входа в узлы и выхода из них.[ECMA262]

function (root, enter, exit) {
var node = root;
start: while (node) {
enter (node);
if (node.firstChild) {
node = node.firstChild;
continue start;
}
while (node) {
exit (node);
if (node == root) {
node = null;
} else if (node.nextSibling) {
node = node.nextSibling;
continue start;
} else {
node = node.parentNode;
}
}
}
}
4.3.11.2 Примеры структур

Этот параграф является ненормативным.

Пример кода:

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

<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most
cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will
lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

Эта книга будет иметь следующую структуру:

1. The Tax Book
1. Earning money
1. Getting a job
2. Spending money
1. Cheap things
2. Expensive things
3. Investing money
4. Losing money
1. Poor judgement

Обратите внимание на то, что элемент title не учитывается в структуре.

Пример кода:

Здесь приводится тот же документ, но на этот раз для получения того же результата, в нем используются элементы section:

<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
<h1>Earning money</h1>
<p>Earning money is good.</p>
<section>
<h1>Getting a job</h1>
<p>To earn money you typically need a job.</p>
</section>
</section>
<section>
<h1>Spending money</h1>
<p>Spending is what money is mainly used for.</p>
<section>
<h1>Cheap things</h1>
<p>Buying cheap things often not cost-effective.</p>
</section>
<section>
<h1>Expensive things</h1>
<p>The most expensive thing is often not the most cost-effective
either.</p>
</section>
</section>
<section>
<h1>Investing money</h1>
<p>You can lend your money to other people.</p>
</section>
<section>
<h1>Losing money</h1>
<p>If you spend money or invest money, sooner or later you will
lose money.
<section>
<h1>Poor judgement</h1>
<p>Usually if you lose money it's because you made a mistake.</p>
</section>
</section>

Структура этого варианта разметки книги будет идентичной предыдущей:

1. The Tax Book
1. Earning money
1. Getting a job
2. Spending money
1. Cheap things
2. Expensive things
3. Investing money
4. Losing money
1. Poor judgement

Пример кода:

Документ может содержать несколько заголовков высшего уровня:

<!DOCTYPE HTML>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

Это приведет к формированию следующей простой структуры, состоящей из трех секций высшего уровня:

1. Apples
2. Bananas
3. Carambola

В сущности, один элемент body делится таким образом на три элемента.

Пример кода:

Комбинирование h1h6 и section/h1 моделей построения структуры может привести к непредсказуемым результатам.

Взгляните, допустим, на следующий пример, в котором приведен предыдущий документ, но на этот раз контент (неявного) элемента body заключен в рамки элемента section:

<!DOCTYPE HTML>
<title>Alphabetic Fruit</title>
<section>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>
</section>

В результате получим структуру:

1. (untitled page)
1. Apples
2. Bananas
3. Carambola

Такой результат охарактеризован как не предсказуемый, поскольку он приводит к образованию трех подсекций, хотя в документе присутствует вcего лишь один элемент section. Фактически, элемент section, подобно неявному элементу body из предыдущего примера, разбит на три части.

(Используемый здесь термин "(untitled page)" является неявным заголовком для элемента body, поскольку у него нет явно заданного заголовка.)

Пример кода:

При формировании структуры, элементы заголовки никогда не занимают более высокую позицию, чем предшествующие им другие секции. Так, в следующем примере первый h1 элемент на самом деле не представляет заголовок страницы, он изображает заголовок ее второй половины:

<!DOCTYPE HTML>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
<section>
<h1>A plea from our caretakers</h1>
<p>Please, we beg of you, send help! We're stuck in the server room!</p>
</section>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

Результирующая структура будет выглядеть вот так:

1. (untitled page)
1. A plea from our caretakers
2. Feathers

Пример кода:

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

<!DOCTYPE HTML>
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<main>
<article>
<header>
<nav>
<a href="?t=-1d">Yesterday</a>;
<a href="?t=-7d">Last week</a>;
<a href="?t=-1m">Last month</a>
</nav>
<h1>We're adopting a child!</h1>
</header>

<p>As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
this day for weeks.</p>
</article>
</main>

В результате получим структуру:

1. Ray’s blog
1. Untitled article
1. Untitled navigation section
2. We’re adopting a child!

Еще один момент, на который стоит обратить внимание в этом примере, это то, что элементы header и main никоим образом не влияют на структуру документа.

Элемент ghroup может быть использован для подзаголовков. Вот пример:

<!DOCTYPE HTML>
<title>Chronotype: CS Student</title>
<hgroup>
<h1> The morning </h1>
<h2> 06:00 to 12:00 </h2>
</hgroup>
<p>We sleep.</p>
<hgroup>
<h1> The afternoon </h1>
<h2> 12:00 to 18:00 </h2>
</hgroup>
<p>We study.</p>
<hgroup>
<h2>Additional Commentary</h2>
<h3>Because not all this is necessarily true</h3>
<h6>Ok it$s almost certainly not true</h6>
</hgroup>
<p>Yeah we probably play, rather than study.</p>
<hgroup>
<h1> The evening </h1>
<h2> 18:00 to 00:00 </h2>
</hgroup>
<p>We play.</p>
<hgroup>
<h1> The night </h1>
<h2> 00:00 to 06:00 </h2>
</hgroup>
<p>We play some more.</p>

Результирующая структура в таком случае имела бы следующий вид:

  1. The morning 06:00 to 12:00
  2. The afternoon 12:00 to 18:00
    1. Additional Commentary Because not all this is necessarily true Ok it's almost certainly not true
  3. The evening 18:00 to 00:00
  4. The night 00:00 to 06:00

То, как именно это будет представлено пользовательскими агентами (что обусловлено основными проблемами интерфейса), является вопросом предпочтений определенной реализации, однако, ключевым моментом здесь является то, что элементы потомки ghroup элемента, элементы h1 h2 используются в качестве заголовков элемента. Следующий вариант тоже будет эквивалентен валидному:

  1. The morning — 06:00 to 12:00
  2. The afternoon — 12:00 to 18:00
    1. Additional Commentary — Because not all this is necessarily true — Ok it's almost certainly not true
  3. The evening — 18:00 to 00:00
  4. The night 00:00 to 06:00

Это же касается следующей структуры:

  1. The morning
  2. The afternoon
    1. Additional Commentary
  3. The evening
  4. The night

Хотя представленный ниже вариант может быть менее удобным в большинстве контекстов, он тоже является корректным:

  1. The morning
    06:00 to 12:00
  2. The afternoon
    12:00 to 18:00
    1. Additional Commentary
      Because not all this is necessarily true
      Ok it's almost certainly not true
  3. The evening
    18:00 to 00:00
  4. The morning
    00:00 to 06:00

4.3.12 Аннотация по использованию.

Этот параграф является ненормативным.

Элемент Назначение
Пример
body Основной контент документа.

<!DOCTYPE HTML>
<html>
<head> <title>Steve Hill's Home Page</title> </head>
<body> <p>Hard Trance is My Life.</p> </body>
</html>

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

<article>
<img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
<p>My fave Masif tee so far!</p>
<footer>Posted 2 days ago</footer>
</article>
<article>
<img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
<p>Happy 2nd birthday Masif Saturdays!!!</p>
<footer>Posted 3 weeks ago</footer>
</article>

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

<h1>Biography</h1>
<section>
<h1>The facts</h1>
<p>1500+ shows, 14+ countries</p>
</section>
<section>
<h1>2010/2011 figures per year</h1>
<p>100+ shows, 8+ countries</p>
</section>

nav Секция документа, ведущая на другие страницы или в другие области текущей страницы: секцию, содержащую навигационные ссылки.

<nav>
<p><a href="/">Home</a>
<p><a href="/biog.html">Bio</a>
<p><a href="/discog.html">Discog</a>
</nav>

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

<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>

h1h6 Заголовки секций

<h1>The Guide To Music On The Playa</h1>
<h2>The Main Stage</h2>
<p>If you want to play on a stage, you should bring one.</p>
<h2>Amplified Music</h2>
<p>Amplifiers up to 300W or 90dB are welcome.</p>

hgroup Заголовочная часть секции, в которую входят все h1h6 элементы потомки элемента hgroup. Этот элемент используется для группировки ряда h1h6 элементов в том случае, если заголовок предусматривает несколько уровней, в роли которых могут выступать подзаголовки, альтернативные названия или слоганы.

<article>
<hgroup>
<h1>Burning Music</h1>
<h2>The Guide To Music On The Playa</h2>
</hgroup>
<section>
<hgroup>
<h1>Main Stage</h1>
<h2>The Fiction Of A Music Festival</h2>
</hgroup>
<p>If you want to play on a stage, you should bring one.</p>
</section>
<section>
<hgroup>
<h1>Loudness!</h1>
<h2>Questions About Amplified Music</h2>
</hgroup>
<p>Amplifiers up to 300W or 90dB are welcome.</p>
</section>

header Блок вспомогательной навигационной или вводной информации.

<article>
<header>
<h1>Hard Trance is My Life</h1>
<p>By DJ Steve Hill and Technikal</p>
</header>
<p>The album with the amusing punctuation has red artwork.</p>
</article>

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

<article>
<h1>Hard Trance is My Life</h1>
<p>The album with the amusing punctuation has red artwork.</p>
<footer>
<p>Artists: DJ Steve Hill and Technikal</p>
</footer>
</article>

4.3.12.1 article или section?

Этот параграф является ненормативным.

Элемент section образует часть чего-то еще, а элемент article является целым самодостаточным объектом. Но как понять, какой из них использовать в конкретном случае? В большинстве ситуаций ответ зависит от намерений разработчика.

Так, допустим, кто-нибудь пожелает представить раздел книги, именующийся «Гренни Смитт», в котором, в частности, говорится: «Из этих зеленых сочных яблок получается превосходная начинка для яблочного пирога». В данном случае подходящим элементом будет section, поскольку далее в книге будут представлены много других разделов, (возможно) повествующих о других сортах яблок.

В тоже время другому автору может понадобиться создать, к примеру, tweet или reddit комментарий, tumblr пост или же газетного типа объявление, следующего содержания: «Гренни Смитт. Из этих зеленых сочных яблок получается превосходная начинка для яблочного пирога». Тогда должен использоваться элемент article, так как в этом случае представляется целый, законченный информационный блок.

Любой комментарий к статье не является частью самой статьи article, которую он комментирует, поэтому он является самостоятельным article элементом.