4.3 ~section

【この訳に固有の表記規約】

この訳の,~algoの記述に利用されている各種記号(ε, ~LET, ~IF, ~RET, 等々)の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。

4.3.1. `body^e 要素

`分類$
`~sectioning根$。 ◎ Sectioning root.
`この要素を利用できる文脈$
`html$e 要素の 2 個目の要素として。 ◎ As the second element in an html element.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
`body$e 要素の`開始tag$は、[ 要素が空であるか, または 要素の内側にある最初のものが 次のいずれでもない ]ならば、省略できる ⇒ `~ASCII空白$ / `~comment$ / [ `meta$e / `link$e / `script$e / `style$e / `template$e ]要素 ◎ A body element's start tag can be omitted if the element is empty, or if the first thing inside the body element is not ASCII whitespace or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
`body$e 要素の`終了tag$は、直後に`~comment$がある場合を除いて,省略できる。 ◎ A body element's end tag can be omitted if the body element is not immediately followed by a comment.
`内容~属性$
`大域~属性$ ◎ Global attributes
`onafterprint$m
`onbeforeprint$m
`onbeforeunload$m
`onhashchange$m
`onlanguagechange$m
`onmessage$m
`onmessageerror$m
`onoffline$m
`ononline$m
`onpagehide$m
`onpageshow$m
`onpopstate$m
`onrejectionhandled$m
`onstorage$m
`onunhandledrejection$m
`onunload$m
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$I]
interface `HTMLBodyElement@I : `HTMLElement$I {};

`HTMLBodyElement$I includes `WindowEventHandlers$I;

`body$e 要素は、文書の内容を`表現-$する。 ◎ The body element represents the content of the document.

適合~文書においては、 `body$e 要素は 1 個に限られる。 `body$m ~IDL属性は、~scriptから 文書の `body$e 要素への容易~accessを供する。 ◎ In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document's body element.

注記: ~DOM演算には、 “`~body要素$” に基づいて定義されるものもある(例えば、`~DnD$~modelの一部を成すもの)。 これは、任意の `body$e 要素ではなく,その用語の定義に従って,~DOM内の特定0の要素を指す。 ◎ Some DOM operations (for example, parts of the drag and drop model) are defined in terms of "the body element". This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element.

`body$e 要素は、いくつかの `Window$I ~objの`~event~handler$を,`~event~handler内容~属性$として公開する。 また、それらの`~event~handler~IDL属性$を~mirrorする。 ◎ The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.

`Window$I ~objの`~event~handler$[ `onblur$m / `onerror$m / `onfocus$m / `onload$m / `onresize$m / `onscroll$m ]は、 `body$e 要素~上に公開され、`~HTML要素$で通常~supportされる同じ名前の汎用的 `~event~handler$を置換する。 ◎ The onblur, onerror, onfocus, onload, onresize, and onscroll event handlers of the Window object, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements.

例えば、 `Document$I ~objの`~body要素$の子 %E に向けて配送される `error$et ~eventは、浮上していく間に,各~target上の`onerror$m `~event~handler内容~属性$を[ %E 上のそれ, 根 `html$e 要素~上のそれ ]の順に誘発した後に、 `body$e 要素~上のそれを誘発する。 ~eventは,[ %E, ..., `body$e, `html$e, `Document$I, `Window$I, ]の順に浮上するが、 `body$e 上の`~event~handler$は, `body$e ではなく `Window$I を注視しているので。 しかしながら,[ `addEventListener()^m を利用して `body$e に~~登録された正規の~event~listener ]は、 `Window$I ~objに達したときでなく,~eventが浮上して `body$e を通るときに走ることになる。 ◎ Thus, for example, a bubbling error event dispatched on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to the body, to the html, to the Document, to the Window, and the event handler on the body is watching the Window not the body. A regular event listener attached to the body using addEventListener(), however, would be run when the event bubbled through the body and not when it reaches the Window object.

次の例では、頁は,利用者が~onlineにあるかどうかを示す指示子( `id="status"^c )を更新する: ◎ This page updates an indicator to show whether or not the user is online:

`body-1^xCode

4.3.2. `article^e 要素

`分類$
`~flow内容$/`~sectioning内容$/`可触~内容$。 ◎ Flow content. ◎ Sectioning content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`article$e 要素は、[ 文書/頁/~app/~site ]内の,完全な または自己完結的な 構成であって、原則的に,独立に頒布-可能なもの, または — 例えば,~syndication( Web syndication )において — 再利用-可能なものを`表現-$する。 例えば: ~forum投稿 / 雑誌や新聞の記事 / ~blog~entry / 利用者が寄稿した~comment / 対話的な~widgetや~gadget / その他の独立な~itemからなる内容。 ◎ The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

複数の `article$e 要素が入子にされている場合、内縁の `article$e 要素は、原則的に,外縁の記事( “article” )の内容に関係するような,記事を表現する。 具体例として、ある~siteの~blog~entryが利用者が寄稿した~commentを受容するならば、各~commentを,[[ ~blog~entryを表現している `article$e 要素 ]の中に入子にした `article$e 要素 ]として表現することもできる。 ◎ When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

`article$e 要素に結付けられている作者~情報( `address$e 要素を見よ)は、入子にされた `article$e 要素には適用されない。 ◎ Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

注記: `article$e 要素が,特に~syndicationにて再~頒布される内容に利用された場合、その目的は `ATOM$r における `entry^e 要素に類似する。 ◎ When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]

注記: `article$e 要素に対する公開日を供するときは、 `schema.org^c ~microdata語彙を利用できる — CreativeWork 下位型のいずれかを利用して。 ◎ The schema.org microdata vocabulary can be used to provide the publication date for an article element, using one of the CreativeWork subtypes.

頁の主な内容(すなわち、~footer, ~header, ~navi~block, ~sidebarを除外した部分)すべてが,全体として単独の自己完結的な構成になるとき、それを `article$e で~markすることは — そうしてもよいが — 技術的には冗長になる(それは単独の文書を成し,頁が単独の構成であることは自明になるので)。 ◎ When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article, but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).

次の例の~blog投稿は、 `schema.org^c 注釈が伴われた `article$e 要素を利用している: ◎ This example shows a blog post using the article element, with some schema.org annotations:

`article-1^xCode

上と同じ~blog投稿であるが、寄せられた~commentも示されている: ◎ Here is that same blog post, but showing some of the comments:

`article-2^xCode

各~commentには情報(誰がいつ書いたか)を与える `footer$e も利用されていることに注意されたし: `footer$e 要素は、この事例のように,適切になるときは その~sectionの始めにも現れ得る。 ( この事例に `header$e を利用しても間違いではない — それは 著作~上の選好に係ることである。) ◎ Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)

次の例の `article$e 要素は、~portal頁~上の~widgetを~hostするために用いられている。 各~widgetは、~styleや~scriptによる特定の挙動を得るため,`~custom化された組込みの要素$として実装されている。 ◎ In this example, article elements are used to host widgets on a portal page. The widgets are implemented as customized built-in elements in order to get specific styling and scripted behavior.

`article-3^xCode

4.3.3. `section^e 要素

`分類$
`~flow内容$/`~sectioning内容$/`可触~内容$。 ◎ Flow content. ◎ Sectioning content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`section$e 要素は、文書や~appの汎用~sectionを`表現-$する。 この文脈における~sectionとは、~thema的に~group化された内容であり, 概して見出しを伴う。 ◎ The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

~sectionには、例えば[ 章 / ~tab付き~dialog~box内の種々の~tab付き頁 / 論文の番号付き~section ]などが挙げられる。 頁は、いくつかの~section — 序論, ~news~item, 連絡先情報など — に分割することもできる。 ◎ Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

注記: 作者には、要素の内容を~syndicationに頒布することに~~意味があるときは, `section$e 要素に代えて `article$e 要素を利用することが奨励される。 ◎ Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

注記: `section$e 要素は、汎用的な容器ではない。 作者には、[ ~styleをあてがう目的 / ~script~~処理の都合 ]にのみ必要になる要素には,代わりに `div$e 要素を利用することが奨励される。 一般に `section$e 要素は、その内容を明示的に文書の`~outline$に含めるような場合に限り,適切になる。 ◎ The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

次の例は、(より大きい頁の一部である)リンゴについての記事( `article^e )であり、 2 個の短い~section( `section^e )を包含している: ◎ In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.

`section-1^xCode

`section$e の利用により、作者は,特定0の~sectionがどの~levelにあるかどうか気にせず,一律に `h1$e 要素を利用できるようになる。 ◎ Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

次の例は、卒業式典の進行表であり, 2 個の~section — 式典の記述と, 卒業生の~list — が伴われている: ◎ Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element whitespace.)

`section-2^xCode

次の例では、各~sectionは 章( `class="chapter"^c ), または付録( `class="appendix"^c )として~mark-upされており、それに応じて,各~sectionの `h1^e に異なる~CSS~styleをあてがっている。 ◎ In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently.

`section-3^xCode

4.3.4. `nav^e 要素

`分類$
`~flow内容$/`~sectioning内容$/`可触~内容$。 ◎ Flow content. ◎ Sectioning content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`nav$e 要素は、他の頁や当の頁の中の各部位への~linkを有するような,頁の~section — すなわち~navi~linkたちを伴う~section — を`表現-$する。 ◎ The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

注記: 頁~上の ~link群すべてを `nav$e 要素~内に置く必要はない — この要素は、第一に,主だった~navi~blockを成す~section用に意図されている。 特に、~footerが ~siteの種々の頁 — ~service利用規約, ~home頁, 著作権~頁など — への~linkからなる短い~listを有することは共通してある。 そのような事例では, `footer$e 要素のみで足る。 が、`nav$e 要素も利用できる — 通例的には不要であるが。 ◎ Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

注記: [ 初期~時の具現化において~navi情報が省略される / ~navi情報が直ぐに可用になる ]ことから便益を得られる利用者~向けの~UA(~screen-readerなど)は、この要素を利用して,[ 頁~上のどの内容が,要請に応じて初期~時に飛ばす/供する(または両者)か ]を決定できる。 ◎ User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

次の例には、 2 個の `nav$e 要素 — ~siteを巡るための首~naviと, 頁~自身を巡るための副~navi — がある。 ◎ In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.

`nav-1^xCode

次の例では、頁~内の各所に~link群が在るが、うち一つだけが~navi~sectionと見なされる。 ◎ In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

`nav-2^xCode

上の例では、~blog投稿の公開日や他の~metadataを供するために `schema.org^c 語彙を利用する~microdataによる注釈も見られる。 ◎ You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.

`nav$e 要素は、~list以外の種類の内容も包含できる。 次の~navi~blockでは、~link群は,注釈文~内に供されている: ◎ A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

`nav-3^xCode

次の例では、~e-mail~app内に,利用者が~folderを切替えるための `nav$e が利用されている: ◎ In this example, nav is used in an e-mail application, to let the user switch folders:

`nav-4^xCode

4.3.5. `aside^e 要素

`分類$
`~flow内容$/`~sectioning内容$/`可触~内容$。 ◎ Flow content. ◎ Sectioning content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`aside$e 要素は、[ `aside$e 要素の周りの内容から別々と見なせる,本線から外れた内容 ]からなる,頁の~sectionを`表現-$する。 そのような~sectionは、印刷面では~sidebarとして表現されることが多い。 ◎ The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

この要素は、例えば[ 注目引用や~sidebarの様な印刷上の効果を得るため / 広告~用 / `nav$e 要素の~group用 ]その他,頁の主な内容から別々と見なせような内容に利用できる。 ◎ The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

注記: 単なる挿入句に `aside$e 要素を利用するのは適切でない — それらは、文書の主な~flowを成すので。 ◎ It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

`aside^e を利用して、ずっと長い欧州の報道記事にて,ある国の背景情報を~mark-upする例: ◎ The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.

`aside-1^xCode

`aside^e を利用して,より長い記事~内の注目引用を~mark-upする例: ◎ The following example shows how an aside is used to mark up a pull quote in a longer article.

`aside-2^xCode

~blog内の~blogrollその他の~side内容に `aside$e を利用する例: ◎ The following extract shows how aside can be used for blogrolls and other side content on a blog:

<body>
 <header>
  <h1>僕のすばら~blog</h1>
  <p>僕の~tagline</p>
 </header>
 <aside>
  <!-- 
この `aside^e 内容には頁の本線から外れた 2 個の~section
— 他の~blogへの~link群, この~blogから他の~blog投稿への~link群 —
がある。
 -->
  <nav>
   <h1>僕の~blogroll</h1>
   <ul>
    <li><a href="https://blog.example.com/">~blog例</a>
   </ul>
  </nav>
  <nav>
   <h1>~archive</h1>
   <ol reversed>
    <li><a href="/last-post">僕の最後の投稿</a>
    <li><a href="/first-post">僕の最初の投稿</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- 
この `aside^e も頁の本線から外れており、~blog作者からの~twitter~messageを包含する。
 -->
  <h1>~twitter~feed</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   休暇中なので~blogを書いている。
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   もうすぐ休暇に入る。
  </blockquote>
 </aside>
 <article>
  <!-- 
これは~blog投稿
 -->
  <h1>僕の最後の投稿</h1>
  <p>これは最後の投稿。</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- 
これも~blog投稿
 -->
  <h1>僕の最初の投稿</h1>
  <p>これは最初の投稿。</p>
  <aside>
   <!-- 
この `aside^e は、~blog投稿についてである
— `article^e 要素の内側にあるので。
例えばここに~blogrollを置くことは間違いになる
— ~blogrollは頁~全体に関係するものであり、特にこの投稿に関係するわけではないので。
 -->
   <h1>投稿すること</h1>
   <p>それについて考えている。何か言おう。投稿するのは楽しいんだ。</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">~archive</a> —
   <a href="/about">僕について</a> —
   <a href="/copyright">著作権</a>
  </nav>
 </footer>
</body>

4.3.6 `h1^e, `h2^e, `h3^e, `h4^e, `h5^e, `h6^e 要素

`分類$
`~flow内容$/`見出し内容$/`可触~内容$。 ◎ Flow content. ◎ Heading content. ◎ Palpable content.
`この要素を利用できる文脈$
`hgroup$e 要素の子として。 ◎ As a child of an hgroup element.
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`句内容$。 ◎ Phrasing content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$I]
interface `HTMLHeadingElement@I : `HTMLElement$I {};

これらの要素は、~sectionに対する見出しを`表現-$し、その意味論と意味は,`見出しと~section節$に定義される。 ◎ These elements represent headings for their sections. ◎ The semantics and meaning of these elements are defined in the section on headings and sections.

これらの要素は、それらの名前~内の数に基づく `階級@ で~~順位付けられる。 `h1$e 要素の階級が最高, `h6$e 要素の階級が最低とされ,名前が同じ 2 個の要素の階級は等しいとされる。 ◎ These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

次の 2 個の~code片は、文書の~outline(見出しと~sectionが成す構造)に関する限り,意味論的に等価になる: ◎ As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:

`hX-1^xCode `hX-2^xCode

作者は,[ 簡素さをとって前者の方式 / ~~頻繁な編集時の都合で 後者の方式 ]を選好するかもしれないが、どちらが最善かは,もっぱら選好される著作~方式の課題である。 ◎ Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style.

上の 2 つの方式を組合せることもできる — 旧来の~toolとの互換性を保ちつつ,互換性が最早~必要なくなったときの備えとして。 次の~code片の~outlineもまた、前の 2 つと同じになる: ◎ The two styles can be combined, for compatibility with legacy tools while still future-proofing for when that compatibility is no longer needed. This third snippet again has the same outline as the previous two:

`hX-3^xCode

4.3.7. `hgroup^e 要素

`分類$
`~flow内容$/`見出し内容$/`可触~内容$。 ◎ Flow content. ◎ Heading content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
1 個以上の[ `h1$e / `h2$e / `h3$e / `h4$e / `h5$e / `h6$e / `template$e ]要素。 加えて、これらの要素の前後には,任意個数の`~scriptを~supportする要素$があってよい。 ◎ One or more h1, h2, h3, h4, h5, h6 elements, optionally intermixed with script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`hgroup$e 要素は、[ その子であるすべての `h1$e 〜 `h6$e 要素からなる ]ような,~sectionの見出しを`表現-$する。 この要素は、複数の~levelの見出し — 副見出し / 別title / 標語 — があるときに,一連の[ `~h1-6$ ]要素を~group化するために利用される。 ◎ The hgroup element represents the heading of a section, which consists of all the h1–h6 element children of the hgroup element. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

`hgroup$e 要素の`階級$は、`~h1-6$ 要素があれば,それらの階級のうち最高 / なければ, `h1$e 要素と(最高~階級)同じとされる。 前者の場合の `hgroup$e 要素~内の他の`見出し内容$である `~h1-6$ 要素は[ 副見出し/副title/(副)別title ]を指示する。 ◎ The rank of an hgroup element is the rank of the highest-ranked h1–h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank). Other h1–h6 elements of heading content in the hgroup element indicate subheadings or subtitles or (secondary) alternative titles.

`hgroup$e 要素に個々の~sectionをあてがう方法は、`見出しと~section節$にて定義される。 ◎ The section on headings and sections defines how hgroup elements are assigned to individual sections.

妥当な見出しの例: ◎ Here are some examples of valid headings.

`hgroup-1^xCode `hgroup-2^xCode

これらの例における `hgroup$e 利用の~~要点は、`~outline$において `h2$e に自前の別々の~sectionを作成させなくする代わりに, `h2$e の内容が`~outline$ ~algoの出力~内に具現化されるようにして、[ それは別々の~sectionの~titleではないが,~titleたちが成す~groupにおける副~titleである ]ことを何らかの仕方で指示することである。 ◎ The point of using hgroup in these examples is to prevent the h2 element (which acts as a secondary title) from creating a separate section of its own in any outline and to instead cause the contents of the h2 to be shown in rendered output from the outline algorithm in some way to indicate that it is not the title of a separate section but instead just a secondary title in a group of titles.

~UAが,そのような複数~levelからなる見出しを どのように~UIに公開するか(例: 目次や探索~結果)は、~UIの課題であり,実装者に委ねられる。 上の最初の例は、次のようにも具現化できる: ◎ How a user agent exposes such multi-level headings in user interfaces (e.g. in tables of contents or search results) is left open to implementers, as it is a user interface issue. The first example above could be rendered as:

`hgroup-1a^xView

あるいは、次の様にする別法もある: ◎ Alternatively, it could look like this:

`hgroup-1b^xView

~titleを複数の行に具現化できる~UIにおいては、次のようにも具現化できる — 最初の行の~font-sizeは、大きめにされるであろう: ◎ In interfaces where a title can be rendered on multiple lines, it could be rendered as follows, maybe with the first line in a bigger font size:

`hgroup-1c^xView

`hgroup$e 要素の中で 2 個の `h1$e 見出しを利用して,同じ映画の ~US名と~UK名を~group化する仕方を,次の 2 個の例に示す。 ◎ The following two examples show ways in which two h1 headings could be used within an hgroup element to group the US and UK names for the same movie.

`hgroup-3^xCode

上の 1 個目の例は、~US公開版において映画~名を~group化する方法を示している — ~US名 The Avengers は(首)~titleとして, ~UK名 Avengers Assemble は(副)別titleとして。 上の 2 個目の例は、~UK公開版における それであり、 1 個目の例と逆にされている。 ◎ The first example above shows how the movie names might be grouped in a publication in the US, with the US name The Avengers as the (primary) title, and the UK name Avengers Assemble as the (secondary) alternative title. The second example above shows how the movie names might be grouped in a publication in the UK, with the UK name as the (primary) title, and the US name as the (secondary) alternative title.

両~事例とも重要な点は、 `hgroup$e 要素の利用は,それが~group化している 2 つの~titleが等価でないことを指示することである — 1 個目の `h1$e は、首~titleを与える一方, 2 個目は別title(副~title)を与える。 首~title, 別titleのいずれも `h1$e 要素で~mark-upされているが、 `hgroup$e 内の 2 個目の `h1$e は — `~outline$~algoの出力~内に具現化される~viewにおいては — それが副であることを明瞭に指示するような何らかの仕方で示されることになる — 例えば: ◎ In both cases it is important to note the use of the hgroup element to group the two titles indicates that the titles are not equivalent; instead the first h1 gives the (primary) title while the second gives the (secondary) alternative title. Even though both the title and alternative title are marked up with h1 elements, in a rendered view of output from the outline algorithm, the second h1 in the hgroup will be shown in some way that clearly indicates it is secondary; for example:

~US公開版においては: ◎ In a US publication:

`hgroup-3a^xView

~UK公開版においては: ◎ In a UK publication:

`hgroup-3b^xView

次の例では、 `hgroup$e 要素を利用して,~wizard方式による~dialog~box内で 2 ~levelからなる見出しを~mark-upしている: ◎ In the following example, an hgroup element is used to mark up a two-level heading in a wizard-style dialog box:

`hgroup-4^xCode

4.3.8. `header^e 要素

`分類$
`~flow内容$/`可触~内容$。 ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$であって,子孫に[ `header$e / `footer$e ]要素を含まないもの。 ◎ Flow content, but with no header or footer element descendants.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`header$e 要素は、紹介や前置き, あるいは~naviを援助するための~groupを`表現-$する。 ◎ The header element represents a group of introductory or navigational aids.

注記: `header$e 要素は、通例的に,当の~sectionの見出し( `~h1-6$ 要素や `hgroup$e 要素)を包含するものと意図されるが、要求されるわけではない。 `header$e 要素は[ ~sectionの目次 / 探索~form / 関連する~logo ]を包装するためにも利用できる。 ◎ A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

いくつかの~header見本を以下に示す。 先ずは~game用のそれ: ◎ Here are some sample headers. This first one is for a game:

`header-1^xCode

仕様の~headerを~mark-upするときの用例: ◎ The following snippet shows how the element can be used to mark up a specification's header:

`header-2^xCode

注記: `header$e 要素は`~sectioning内容$ではない — それが新たな~sectionを導入することはない。 ◎ The header element is not sectioning content; it doesn't introduce a new section.

次の例では、頁には `h1$e 要素による見出しがあり, `h2$e 要素による見出しを有する 2 個の下位sectionもある。 `header$e 要素の後にある内容は、依然として `header$e 要素~内から開始している最後の下位sectionの一部である — `header$e 要素は、`~outline$~algoには関わらないので。 ◎ In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn't take part in the outline algorithm.

<body>
 <header>
  <h1>ポッケマン</h1>
  <nav>
   <ul>
    <li><a href="/games">ゲーム</a>
    <li><a href="/forum">フォーラム</a>
    <li><a href="/download">ダウンロード</a>
   </ul>
  </nav>
  <h2>重要なニュース</h2> <!-- 
これは、 2 個目の下位sectionを開始する
 -->
  <!-- 
ここは、下位section "重要なニュース" の一部になる
 -->
  <p>今日のゲームで遊ぶためにはクライアントを更新する必要があります。</p>
  <h2>ゲーム</h2> <!-- 
これは、 3 個目の下位sectionを開始する
 -->
 </header>
 <p>あなたは~~現在 3 種類のゲームで遊べます:</p>
 <!-- 
ここは依然として、下位section "ゲーム" の一部である
 -->
 ...

4.3.10. `address^e 要素

`分類$
`~flow内容$/`可触~内容$。 ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$であって,子孫に次を含まないもの ⇒ `見出し内容$ / `~sectioning内容$ / [ `header$e / `footer$e / `address$e ]要素 ◎ Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`address$e 要素は、要素に最も近い,先祖[ `article$e / `body$e ]要素に対する連絡先情報を`表現-$する。 それが`~body要素$である場合、連絡先情報が適用されるのは,一体としての文書になる。 ◎ The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

W3C ~Web~siteの~HTML仕様に関係する頁に、連絡先情報を含ませる例: ◎ For example, a page at the W3C Web site related to HTML might include the following contact information:

`address-1^xCode

`address$e 要素は、任意の~address(例: 住所)を表現するために利用されては~MUST_NOT — その~addressが,~~実際に関連する連絡先情報でない限り。 (一般に、住所を~mark-upするときは `p$e 要素が適切になる。) ◎ The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

`address$e 要素は、連絡先情報~以外の情報を包含しては~MUST_NOT。 ◎ The address element must not contain information other than contact information.

例えば、 `address$e 要素を次のように利用するのは不適合である: ◎ For example, the following is non-conforming use of the address element:

`address-2^xCode

`address$e 要素は、概して, `footer$e 要素~内の他の情報とともに含められる。 ◎ Typically, the address element would be included along with other information in a footer element.

所与の~node %~node の連絡先情報は、 %~node が `属する^i 要素があれば、それに `属する^i `address$e 要素たちからなる~collectionであり,なければ存在しない(空) — ここでの `属する^i という関係は、次で定義される ⇒ 所与の %~node に対し、[ %~node 自身または %~node の先祖 ]からなる集合~内に[ `article$e / `body$e ]要素があるならば、 %~node は[ それらのうち %~node に最も近いもの ]に `属する^i とされる。

◎ The contact information for a node node is a collection of address elements defined by the first applicable entry from the following list: • If node is an article element • If node is a body element •• The contact information consists of all the address elements that have node as an ancestor and do not have another body or article element ancestor that is a descendant of node. • If node has an ancestor element that is an article element • If node has an ancestor element that is a body element •• The contact information of node is the same as the contact information of the nearest article or body element ancestor, whichever is nearest. • If node's node document has a body element •• The contact information of node is the same as the contact information of the body element of the Document. • Otherwise •• There is no contact information for node.

~UAは、~nodeの連絡先情報を,利用者に公開する その他の目的に利用して~MAY — 各~sectionの連絡先情報に基づいて,一連の~sectionからなる索引を~~生成するなど。 ◎ User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.

次の例には、連絡先情報と著作権~~告知を包含する~footerがある: ◎ In this example the footer contains contact information and a copyright notice.

`address-3^xCode

4.3.11 見出しと~section

`~h1-6$ 要素 / `hgroup$e 要素 が見出しである。 ◎ The h1–h6 elements and the hgroup element are headings.

`~sectioning内容$を与える要素~内の`見出し内容$を与える最初の要素は、その~sectionに対する見出しを`表現-$する。 後続の見出し — %H とする — は、新たな暗黙の~section — %S とする — を開始し, %S の見出しを`表現-$する。 %H の`階級$が前0~section %S0 の見出しの`階級$より低い場合、 %S は %S0 の一部を成す下位sectionになる。 ◎ The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

ある種の要素 — 下に挙げるもの — は、 `~sectioning根@ とされる。 この種の要素は、自前の~outlineを有し,その内側にある~sectionと見出しを 先祖の~outlineに供与しない。 ◎ Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

  • `blockquote$e
  • `body$e
  • `details$e
  • `dialog$e
  • `fieldset$e
  • `figure$e
  • `td$e

`~sectioning内容$ 要素は、常に,[ その先祖である[ `~sectioning根$ / `~sectioning内容$ ]要素のうち,最も近傍のもの ]の下位sectionと見なされる — 他の見出しにより,暗黙の~sectionが作成されるかどうかにかかわらず。 ◎ Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.

次の~markup片に対しては: ◎ For the following fragment:

`HS-1^xCode

その構造は、次のようになる: ◎ ...the structure would be:

  1. Foo (明示的な `body$e ~sectionの見出しを与える — 段落 "Grunt" を包含している) ◎ Foo (heading of explicit body section, containing the "Grunt" paragraph)

    1. Bar (暗黙の~sectionを開始している見出し — `blockquote^e と段落 "Baz" を包含している) ◎ Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
    2. Quux (暗黙の~sectionを開始している見出し — それ自身以外の内容は伴わない) ◎ Quux (heading starting implied section with no content other than the heading itself)
    3. Thud ( `section$e による明示的な~sectionの見出し ) ◎ Thud (heading of explicit section section)

`section$e が~~先行する暗黙的~sectionを終端させるので、後の段落 ("Grunt")は, `body$e ~sectionに属することに注意されたし。 ◎ Notice how the section ends the earlier implicit section so that a later paragraph ("Grunt") is back at the top level.

~sectionは,任意の`階級$を有する見出しを包含し得るが、作者には,`h1$e 要素のみを利用するか, ~sectionの入子~levelに適切な`階級$を有する要素を利用することが強く奨励される。 ◎ Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

作者には、`~sectioning内容$を与える要素で ~sectionを明示的に包装することも奨励される — `~sectioning内容$与えている要素~内に,複数の見出しを与えることにより,暗黙的に~sectionたちが生成されることに依拠する代わりに。 ◎ Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

例えば、次のものは正しいが: ◎ For example, the following is correct:

`HS-2^xCode

次のようにすれば、同じ文書は,より明瞭に表されることになる: ◎ However, the same document would be more clearly expressed as:

`HS-3^xCode

上の両~文書は,意味論的に互いに一致し、準拠~UAは,同じ~outlineを生産することになる。 ◎ Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

次のようにしても,意味論的に一致する — このようにした場合、より保守し易くなるであろう(例えば、編集時に `section^e を移動することが多い場合): ◎ This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):

`HS-4^xCode

この~~最後の例は、旧来の~browserでも上手く具現化されるためには、明示的な~style規則が必要になる。 それでも,~CSSを~supportしない旧来の~browserは、すべての見出しを~top-level見出しとして具現化することになる。 ◎ This final example would need explicit style rules to be rendered well in legacy browsers. Legacy browsers without CSS support would render all the headings as top-level headings.

4.3.11.1 ~outlineの作成-法

この節では、[ `~sectioning内容$/ `~sectioning根$ ]を与える要素に対し,~outlineを作成するための~algoを定義する。 それは、 ~DOM木の各~nodeを`木~順序$で走査して,その間に訪れる各~node[ に ~enterする / から ~exitする ]ことを通して定義される。 ◎ This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.

[ `~sectioning内容$ / `~sectioning根$ ]要素に対する `~outline@ は、 1 個~以上の,`~section$たちからなる~listである。 `~outline$が作成される要素は、 `~outlineの所有者@ と呼ばれる。 ◎ The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. The element for which an outline is created is said to be the outline's owner.

`~section@ は、元の~DOM木~内の~nodeたちの容器である(この`~section$は、 `section$e 要素ではない — そのような要素に対応することもあるが、これは概念的な~sectionである)。 各 `~section$には見出しが結付けられ、また,いくつかの`~section$を入子にする。 この~outline~algoを走らせた結果として、~DOM木~内の各~nodeは,ある一つの~sectionに属するようになる。 ◎ A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading. (The sections in the outline aren't section elements, though some may correspond to such elements — they are merely conceptual sections.)

次の~markup片に対する: ◎ The following markup fragment:

<body>
  <hgroup id="document-title">
    <h1>`首~見出し^i</h1>
    <h2>`副~見出し^i</h2>
  </hgroup>
  <p>`文書の序文^i</p>
  <h2>`目次^i</h2>
  <ol id=toc>...</ol>
  <h2>`第 1 章^i</h2>
  <p>`第 1 章の序文^i</p>
</body>

による結果, `body$e ~node(したがって文書~全体)に対し作成される~outlineは: ◎ ...results in the following outline being created for the body node (and thus the entire document):

  1. `body$e ~nodeに対し作成される~section: ◎ Section created for body node.

    • [ `首~見出し^i を与える `h1^e, `副~見出し^i を与える `h2^e ]からなる見出し `hgroup^e に結付けられる。 ◎ Associated with heading <hgroup id="document-title">...</hgroup> consisting of primary heading <h1>HTML</h1> and secondary heading <h2>Living Standard — Last Updated 12 August 2016</h2>.
    • また、段落 `文書の序文^i を与える `p^e にも結付けられる(~outlineを具現化した結果には示されないであろうが)。 ◎ Also associated with the paragraph <p>Some intro to the document.</p> (though it likely would not be shown in a rendered view of the outline).

    加えて,次の~sectionを入子にする: ◎ Nested sections:

    1. 1 個目の `h2$e 要素に対し作成される暗黙の~section ◎ Section implied for first h2 element.

      • 見出し `目次^i を与える `h2^e に結付けられる。 ◎ Associated with heading <h2>Table of contents</h2>.
      • また、有順序~list `ol^e にも結付けられる(~outlineを具現化した結果には示されないであろうが)。 ◎ Also associated with the ordered list <ol id=toc>...</ol> (though it likely would not be shown in a rendered view of the outline).

      この~sectionが入子にする~sectionはない。 ◎ No nested sections.

    2. 2 個目の `h2$e 要素に対し作成される暗黙の~section ◎ Section implied for second h2 element.

      • 見出し `第 1 章^i を与える `h2^e に結付けられる。 ◎ Associated with heading <h2>First section</h2>.
      • 段落 `第 1 章の序文^i を与える `p^e にも結付けられる(~outlineを具現化した結果には示されないであろうが)。 ◎ Also associated with the paragraph <p>Some intro to the first section.</p> (though it likely would not be shown in a rendered view of the outline).

      この~sectionが入子にする~sectionはない。 ◎ No nested sections.

次の図式に,~outlineを具現化した結果の~viewがどの様になるかを示す: ◎ The following image shows what a rendered view of the outline might look like.

`首~見出し^i
  1. `目次^i
  2. `第 1 章^i
複数~levelからなる見出したちの具現化を示している,~outline。 ◎ Outline showing rendering of a multi-level heading and other headings.

[ `~sectioning内容$ / `~sectioning根$ ]要素 %根 の`~outline$を決定するときは、次の~algoに従わ~MUST: ◎ The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element's outline is as follows:

【 ~algoの中で作成される各~outlineと~sectionたちが成す木 との間の関係構造が不明瞭なため、この~algoには解釈がはっきりしない箇所がいくつもあり、和訳できていない。 】

  1. %現~outline所有者 ~LET ε ⇒ これは、作成-中の`~outline$を所有する要素を保持する。 ◎ Let current outline target be null. (It holds the element whose outline is being created.)
  2. %現~section ~LET ε ⇒ ある`~section$を指す。 これは、~DOM内のすべての要素に対し,それぞれが属する`~section$を与えるために利用される。 初期~時には、どの~nodeも属する`~section$はない( ε )とする。 ◎ Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.)
  3. %stack ~LET 空~list ⇒ `~outlineの所有者$からなる~stackであり、入子を取扱うために利用される。 ◎ Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.
  4. %蓋 ~LET ε ⇒ %蓋 が何らかの要素に設定されている間は、~outlineを操作できず,要素とその子孫の処理は飛ばされることになる( %stack は要素で “塞がれている” )。 【この変数は、明快にするためにこの訳に導入している。】
  5. ~DOM内の %根 を 根とする部分木を, %根 から順に`木~順序$で走査して、各 %要素 に[ ~enterする / ~exitする ]度に,[ 下に挙げる条件のうち,最初に該当する段 ]を走らす: ◎ Walk over the DOM in tree order, starting with the sectioning content element or sectioning root element at the root of the subtree for which an outline is to be created, and trigger the first relevant step below for each element as the walk enters and exits it.

    ~exitした ~AND %要素 ~EQ %蓋 ◎ When exiting an element, if that element is the element at the top of the stack
    1. ~Assert: [ %要素 は `見出し内容$である ]~OR[ %要素 は `hidden$a 属性を有する ] ◎ The element being exited is a heading content element or an element with a hidden attribute.
    2. %蓋 ~SET ε ◎ Pop that element from the stack.
    [ ~enterした ~OR ~exitした ]~AND[ %蓋 ~NEQ ε ] ◎ If the top of the stack is a heading content element or an element with a hidden attribute
    何もしない ◎ Do nothing.
    ~enterした ~AND %要素 は `hidden$a 属性を有する: ◎ When entering an element with a hidden attribute
    %蓋 ~SET %要素 ◎ Push the element being entered onto the stack. (This causes the algorithm to skip that element and any descendants of the element.)
    ~enterした ~AND %要素 は`~sectioning内容$である: ◎ When entering a sectioning content element ◎ Run these steps:
    1. ~IF[ %現~outline所有者 ~NEQ ε ]: ◎ If current outline target is not null, then:

      1. ~IF[ %現~section の見出し ~EQ ε ] ⇒ %現~section の見出し ~SET 新たな暗黙の見出し ◎ If the current section has no heading, create an implied heading and let that be the heading for the current section.
      2. %stack に %現~outline所有者 を~pushする ◎ Push current outline target onto the stack.
    2. %現~outline所有者 ~SET %要素 ◎ Let current outline target be the element that is being entered.

    3. %現~section ~SET 新たな`~section$ ◎ Let current section be a newly created section for the current outline target element.
    4. %現~outline所有者 が属する~section ~SET %現~section ◎ Associate current outline target with current section.
    5. %現~outline所有者 の`~outline$ ~SET %現~section のみからなる 新たな`~outline$ 【?】 ◎ Let there be a new outline for the new current outline target, initialized with just the new current section as the only section in the outline.
    ~exitした ~AND %要素 は`~sectioning内容$である ~AND %stack は空でない: ◎ When exiting a sectioning content element, if the stack is not empty ◎ Run these steps:
    1. ~IF[ %現~section の見出し ~EQ ε ] ⇒ %現~section ~SET 新たな暗黙の見出し ◎ If the current section has no heading, create an implied heading and let that be the heading for the current section.
    2. %現~outline所有者 ~SET %stack から上端の要素を~popした結果 ◎ Pop the top element from the stack, and let the current outline target be that element.
    3. %現~section ~SET %現~outline所有者 の`~outline$内の最後の~section ◎ Let current section be the last section in the outline of the current outline target element.
    4. %現~section に %要素 の`~outline$を付加する 【?】 (これは`~outline$における最後の~sectionを変更しない) ◎ Append the outline of the sectioning content element being exited to the current section. (This does not change which section is the last section in the outline.)
    ~enterした ~AND %要素 は`~sectioning根$である: ◎ When entering a sectioning root element ◎ Run these steps:
    1. ~IF[ %現~outline所有者 ~NEQ ε ] ⇒ %stack に %現~outline所有者 を~pushする ◎ If current outline target is not null, push current outline target onto the stack.
    2. %現~outline所有者 ~SET %要素 ◎ Let current outline target be the element that is being entered.
    3. %現~outline所有者 の 親~section ~SET %現~section ◎ Let current outline target's parent section be current section.
    4. %現~section ~SET 新たな`~section$ ◎ Let current section be a newly created section for the current outline target element.
    5. %現~outline所有者 の`~outline$ ~SET %現~section のみからなる 新たな`~outline$ ◎ Let there be a new outline for the new current outline target, initialized with just the new current section as the only section in the outline.
    ~exitした ~AND %要素 は`~sectioning根$である ~AND %stack は空でない: ◎ When exiting a sectioning root element, if the stack is not empty ◎ Run these steps:
    1. ~IF[ %現~section の見出し ~EQ ε ] ⇒ %現~section の見出し ~SET 新たな暗黙の見出し ◎ If the current section has no heading, create an implied heading and let that be the heading for the current section.
    2. %現~section ~SET %現~outline所有者 の 親~section ◎ Let current section be current outline target's parent section.
    3. %現~outline所有者 ~SET %stack から上端の要素を~popした結果 ◎ Pop the top element from the stack, and let the current outline target be that element.
    ~exitした ~AND %要素 は[ `~sectioning内容$ / `~sectioning根$ ]である ~AND %stack は空である ◎ When exiting a sectioning content element or a sectioning root element (when the stack is empty)
    1. ~Assert: %要素 ~EQ %現~outline所有者 ~EQ %根 ◎ The current outline target is the element being exited, and it is the sectioning content element or a sectioning root element at the root of the subtree for which an outline is being generated.
    2. ~IF[ %現~section の見出し ~EQ ε ] ⇒ %現~section の見出し ~SET 新たな暗黙の見出し ◎ If the current section has no heading, create an implied heading and let that be the heading for the current section.
    3. ~GOTO `END^i ◎ Skip to the next step in the overall set of steps. (The walk is over.)
    ~enterした ~AND %要素 は`見出し内容$である: ◎ When entering a heading content element
    1. ~IF[ %現~section の見出し ~EQ ε ] ⇒ %現~section の見出し ~SET %要素 ◎ If the current section has no heading, let the element being entered be the heading for the current section.

      注記: %要素 が `hgroup$e 要素である場合、一体としての %要素 は %現~section に対する複数の見出しを伴い得る — %要素 の子孫 `~h1-6$ のうち,最高 `階級$のもの 【のうち 最初のもの】 が %現~section に対する首~見出しを供し,他のものは %現~section に対する副~見出しを供する。 ◎ If the element being entered is an hgroup element, that hgroup as a whole is a multi-level heading for the current section, with the highest-ranked h1–h6 descendant of the hgroup providing the primary heading for the current section, and with other h1–h6 descendants of the hgroup providing secondary headings for the current section.

    2. ~ELIF[ %現~outline所有者 の`~outline$の最後の~sectionの見出し %H は暗黙の見出しである ]~OR[ %要素 の `階級$ ~GTE %H の`階級$ ]:

      1. %現~section ~SET 新たな`~section$
      2. %現~section の見出し ~SET %要素
      3. %現~outline所有者 の`~outline$に %現~section を最後の~sectionとして付加する
      ◎ Otherwise, if the element being entered has a rank equal to or higher than the heading of the last section of the outline of the current outline target, or if the heading of the last section of the outline of the current outline target is an implied heading, then create a new section and append it to the outline of the current outline target element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section.
    3. ~ELSE:

      1. %候補~section ~LET %現~section
      2. ~WHILE[ %要素 の`階級$ ~GTE %候補~section の見出しの`階級$ ] ⇒ %候補~section ~SET %現~outline所有者 の`~outline$ 内の, %候補~section 包含する`~section$ 【?】
      3. %現~section ~SET 新たな`~section$
      4. %候補~section に %現~section を付加する【?】 (これは~outlineの最後の~sectionを変更しない)
      5. %現~section の見出し ~SET %要素
      ◎ Otherwise, run these substeps: ◎ Let candidate section be current section. ◎ Heading loop: If the element being entered has a rank lower than the rank of the heading of the candidate section, then create a new section, and append it to candidate section. (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section. Abort these substeps. ◎ Let new candidate section be the section that contains candidate section in the outline of current outline target. ◎ Let candidate section be new candidate section. ◎ Return to the step labeled heading loop.
    4. %蓋 ~SET %要素 ◎ Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)

    注記: `h1$e の階級が最高, `h6$e の階級は最低であることに注意。 ◎ Recall that h1 has the highest rank, and h6 has the lowest rank.

    他の場合 ◎ Otherwise
    何もしない。 ◎ Do nothing.

    加えて、上の手続きにおいて~node %~node を~exitした後、[ %~node が属する`~section$ ~EQ ε ]ならば ⇒ %~node が属する`~section$ ~SET %現~section ◎ In addition, whenever the walk exits a node, after doing the steps above, if the node is not associated with a section yet, associate the node with the section current section.

  6. `END^i:
    部分木~内の~EACH ( 非~要素~node %~node ) に対し ⇒ %~node が属する`~section$ ~SET %~node の親~要素が属する`~section$ ◎ Associate all non-element nodes that are in the subtree for which an outline is being created with the section with which their parent element is associated.
  7. 部分木~内の~EACH ( ~node %~node ) に対し ⇒ ~IF[ %~node に対する見出し ~EQ ε ] ⇒ %~node に対する見出し ~SET %~node が属する`~section$の見出し ◎ Associate all nodes in the subtree with the heading of the section with which they are associated, if any.

文書~outlineを生成するとき — 例えば、目次を生成するとき — には、[ 上の~algo または、その適正な下位集合【?】 ]により作成される,~sectionたちが成す木が利用され~MUST。 ◎ The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.

`~body要素$ / `Document$I ~objに対し作成される~outlineは、文書~全体の`~outline$になる。 ◎ The outline created for the body element of a Document is the outline of the entire document.

対話的な目次を作成するときは、利用者が木~内の各 `~section$ %S に対し[ 次で与えられる要素 ]へ~jumpできるようにするべきである:

  • %S が文書~内の実の要素に対し作成されたものであった場合は、関連する`~sectioning内容$
  • %S が上の処理-において`見出し内容$により生成された(暗黙の)~sectionであった場合は,その見出しを与えている要素
◎ When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process.

注記: したがって、利用者が文書の最初の`~section$を選定したときは、 `body$e 要素~内に見出しがあるかどうかにかかわらず,常に文書の上端へ~jumpすることになる。 ◎ Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first heading in the body is to be found.

`見出し内容$要素 %H の `~outlineにおける深さ@ は:

  • %H がどの`~section$にも属さないならば 1 とする。
  • %H がある`~section$ %S に属するならば、 %S の`~node文書$にて`~outline$が作成された後における, %S が属する最外縁の`~outline$ 【?】 内にある[ %S, および %S の先祖`~section$ ]の個数である。
◎ The outline depth of a heading content element associated with a section section is the number of sections that are ancestors of section in the outermost outline that section finds itself in when the outlines of its Document's elements are created, plus 1. The outline depth of a heading content element not associated with a section is 1.

~UAは、明示的な見出しがない~sectionに対しては,既定の見出しを供するべきである。 ◎ User agents should provide default headings for sections that do not have explicit section headings.

次の~code片を考える: ◎ Consider the following snippet:

`outline-2^xCode

この~code片は、見出しを包含していないが, 3 個の ~section — 文書( `body$e ), 2 個の下位section( `nav$e, `aside$e ) — がある。 ~UAは、次の様に~outlineを呈示することもできる: ◎ Although it contains no headings, this snippet has three sections: a document (the body) with two subsections (a nav and an aside). A user agent could present the outline as follows:

  1. `無題~文書^i
    1. `~navi^i
    2. `~sidebar^i

これらの既定の見出し( `無題~文書^i, `~navi^i, `~sidebar^i )は、この仕様では指定されない — それらは、[ 利用者の言語, 頁の言語, 利用者の選好, ~UA実装者の選好, 等々 ]により変わり得る。 ◎ These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user's language, the page's language, the user's preferences, the user agent implementer's preferences, etc.

注記: 次の~JS関数に,木を走査するための実装を示す。 引数 %root は,走査する木の根([ `~sectioning内容$ / `~sectioning根$ ]要素), 引数[ %enter / %exit ]は、[ ~nodeに~enterする / ~nodeから~exitする ]度に,~nodeを引数に~callされる~callbackである。 `JAVASCRIPT$r ◎ The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [JAVASCRIPT]

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 ~outlineの見本
~INFORMATIVE

`~outline$~algoの素直な応用を,以下に示す。 最初は、ごく短い章や下位sectionを伴う本を表現する文書の例: ◎ The following document shows a straight-forward application of the outline algorithm. First, here is the document, which is a book with very short chapters and subsections:

`outlines-1^xCode

この本は、次の~outlineを形成することになる: ◎ This book would form the following outline:

`outlines-1a^xView

`title$e 要素は、~outlineに関与しないことに注意されたし。 ◎ Notice that the title element does not participate in the outline.

次の例は、上と似た文書であるが,今回は `section$e 要素を利用して同じ効果を得ている: ◎ Here is a similar document, but this time using section elements to get the same effect:

`outlines-2^xCode

この本も前と同じ~outlineを形成することになる: ◎ This book would form the same outline:

`outlines-1a^xView

文書は、複数の~top-level見出しを包含し得る: ◎ A document can contain multiple top-level headings:

`outlines-3^xCode

これは、次の 3 個の~top-level~sectionからなる単純な~outlineを形成することになる: ◎ This would form the following simple outline consisting of three top-level sections:

`outlines-3a^xView

`body$e 要素は、実質的に 3 個に分割される。 ◎ Effectively, the body element is split into three.

[ `~h1-6$ による~model ]と[ `section$e + `h1$e による~model ]の混在は、直感的でない結果をもたらし得る。 ◎ Mixing both the h1–h6 model and the section/h1 model can lead to some unintuitive results.

例えば、次のものを考える — 前と同じ例だが、(暗黙の) `body$e の内容は, `section$e 内に包装されている: ◎ Consider for example the following, which is just the previous example but with the contents of the (implied) body wrapped in a section:

`outlines-4^xCode

結果の~outlineは次のようになる: ◎ The resulting outline would be:

`outlines-4a^xView

この結果は、直感的でない — `section$e 要素は 1 個だけにもかかわらず, 3 個の下位sectionがある。 `section$e は、前の例における 暗黙の `body$e 要素と同様に実質的に 3 個に分割される。 ◎ This result is described as unintuitive because it results in three subsections even though there's only one section element. Effectively, the section is split into three, just like the implied body element in the previous example.

(この例における `body$e 要素には、明示的な見出しがないので、 “(無題)” が暗黙の見出しになる。) ◎ (In this example, "(untitled page)" is the implied heading for the body element, since it has no explicit heading.)

見出しは、他の~sectionの上に昇ることは決してない。 例えば,次の例の最初の `h1$e は、頁に対する~headerにはならず,頁の後半に対する~headerになる: ◎ Headings never rise above other sections. Thus, in the following example, the first h1 does not actually describe the page header; it describes the header for the second half of the page:

`outlines-5^xCode

結果の~outlineは: ◎ The resulting outline would be:

`outlines-5a^xView

したがって、 `article$e 要素が `nav$e ~blockから開始されていて,後者のみが見出しを有するとき、結果の~outlineにおいては: `nav$e ~blockは、 `article$e の他の部分と同じ~sectionの一部を成さない。 具体例として、次の文書に対する: ◎ Thus, when an article element starts with a nav block and only later has its heading, the result is that the nav block is not part of the same section as the rest of the article in the outline. For instance, take this document:

`outlines-6^xCode

結果の~outlineは、次のようになる: ◎ The resulting outline would be:

`outlines-6a^xView

この例でもう一点 注記すべきは、 `header$e 要素は,どうであれ 文書の~outlineに効果を及ぼさないことである。 ◎ Also worthy of note in this example is that the header element has no effect whatsoever on the document outline.

`hgroup$e 要素は、副見出しに利用できる。 例えば: ◎ The hgroup element can be used for subheadings. For example:

`outlines-7^xCode

結果の~outlineは、次のようになる: ◎ The resulting outline would be:

`outlines-7a^xView

これが正確に ~UAによりどう表現されるかは、ほぼ~UIの課題であり,実装の選好に委ねられるが、[ `hgroup$e の見出しは,その子孫 【子?】 である `~h1-6$ 要素が形成する ]ことが要点になる。 したがって、次のものも等しく妥当になる: ◎ Exactly how this is represented by user agents, as most interface issues, is left as a matter of implementation preference, but the key part is that the hgroup's descendant h1–h6 elements are what form the element's heading. Thus, the following would be equally valid:

`outlines-7b^xView

次のものも: ◎ But so would the following:

`outlines-7c^xView

次のものも妥当になる — ほとんどの文脈においては、実用性に劣るであろうが: ◎ The following would also be valid, though maybe less practical in most contexts:

`outlines-7d^xView
4.3.11.3 利用者~向けに~outlineを公開するとき

~UAには、頁の~outlineを利用者に公開して,~naviを援助することが奨励される。 これは とりわけ ~screen-readerなどの非視覚的~媒体に該当する。 ◎ User agents are encouraged to expose page outlines to users to aid in navigation. This is especially true for non-visual media, e.g. screen readers.

しかしながら、作者による`~sectioning内容$の誤用に~~起因する困難を軽減するため、~UAには,`見出し内容$だけを利用して頁を~navigateする~modeを提供することも奨励される。 ◎ However, to mitigate the difficulties that arise from authors misusing sectioning content, user agents are also encouraged to offer a mode that navigates the page using heading content alone.

具体例として、~UAは,各種~矢印~keyを次のように対応付けることもできる: ◎ For instance, a user agent could map the arrow keys as follows:

Shift + ←Left
前0~sectionへ~jumpする — 前0~sectionの下位sectionも含めて ◎ Go to previous section, including subsections of previous sections
Shift + →Right
次0~sectionへ~jumpする — 現在の~sectionの下位sectionも含めて ◎ Go to next section, including subsections of the current section
Shift + ↑Up
現在の~sectionの親~sectionへ~jumpする ◎ Go to parent section of the current section
Shift + ↓Down
次0~sectionへ~jumpする — 現在の~sectionの下位sectionは、飛ばして ◎ Go to next section, skipping subsections of the current section

加えて,~UAは、[ jk ]~keyを,[ 前0/次0 ]の`見出し内容$要素へ~navigateするように対応付けることもできる — ~sectionの`~outlineにおける深さ$にかかわらず、また,見出しのない~sectionは無視して。 ◎ Plus in addition, the user agent could map the j and k keys to navigating to the previous or next element of heading content, regardless of the section's outline depth and ignoring sections with no headings.

4.3.12 用法~要覧

~INFORMATIVE

【 この節の和訳は省略する。 】

4.3.12.1 `article^e か `section^e か?
~INFORMATIVE

`section$e は、何か他のもの一部を形成する。 `article$e はその自前のものである。 が、どっちに該当するかを,どうやって知るか? — およそ現実的な回答は、 “作者の意図に依存する” である。 ◎ A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent".

例えば、章 “紅玉” があって, “艶やかな深紅のリンゴで、やや小玉で酸味が~~強く…” と述べているならば、 `section$e になるであろう — 他にも、他の品種のリンゴについて述べる章が多数あろうから。 ◎ For example, one could imagine a book with a "Granny Smith" chapter that just said "These juicy, green apples make a great filling for apple pies."; that would be a section because there'd be lots of other chapters on (maybe) other kinds of apples.

一方で、 “紅玉は、艶やかな深紅のリンゴで、やや小玉で酸味が~~強く…” と述べている[ tweet / reddit ~comment / tumblr 投稿 / 三行広告 ]であれば、 `article$e になるであろう — それだけで全部になるので。 ◎ On the other hand, one could imagine a tweet or reddit comment or tumblr post or newspaper classified ad that just said "Granny Smith. These juicy, green apples make a great filling for apple pies."; it would then be articles because that was the whole thing.

`article$e に寄せられた~commentは、当の `article^e の一部でないので,自前の `article^e を成す。 ◎ A comment on an article is not part of the article on which it is commenting, therefore it is its own article.