1. 4.3 セクション
      1. 4.3.1 body要素
      2. 4.3.2 article要素
      3. 4.3.3 section要素
      4. 4.3.4 nav要素
      5. 4.3.5 aside要素
      6. 4.3.6 h1h2h3h4h5h6要素
      7. 4.3.7 hgroup要素
      8. 4.3.8 header要素
      9. 4.3.9 footer要素
      10. 4.3.10 address要素
      11. 4.3.11 見出しとセクション
        1. 4.3.11.1 アウトラインの作成
        2. 4.3.11.2 サンプルアウトライン
        3. 4.3.11.3 ユーザーにアウトラインを公開する
      12. 4.3.12 使用方法の概要
        1. 4.3.12.1 Articleかsectionか?

4.3 セクション

Support: html5semanticChrome for Android 59+Chrome 26+UC Browser for Android (limited) 11.4+iOS Safari 7.0+Firefox 21+IE (limited) 9+Samsung Internet 4+Opera Mini (limited) all+Safari 6.1+Edge 12+Android Browser 4.4+Opera 15+

Source: caniuse.com

4.3.1 body要素

カテゴリー
セクショニングルート
この要素を使用できるコンテキスト
html要素の2番目の要素として。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
要素が空である場合、またはbody要素内の最初のものがASCII空白文字またはコメントでない場合、body要素の開始タグは省略することができる。ただし、body要素内の最初のものがmetalinkscriptstyle、またはtemplateである場合を除く。
body要素の直前がコメントでない場合、body要素の終了タグは省略してすることができる。
コンテンツ属性
グローバル属性
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
DOMインターフェイス
[HTMLConstructor]
interface HTMLBodyElement : HTMLElement {};

HTMLBodyElement implements WindowEventHandlers;

body要素は、文書の主要コンテンツを表す

適合文書では、1つのbody要素のみが存在する。document.body IDL属性は、文書のbody要素に簡単にアクセスできるスクリプトを提供する。

一部のDOM操作(たとえば、ドラッグアンドドロップモデルの一部)は、"body要素"という用語で定義される。これは用語の定義に従って、DOMにおける特定の要素を参照し、任意のbody要素を参照しない。

body要素は、Windowオブジェクトのイベントハンドラーの数をイベントハンドラーコンテンツ属性として公開する。また、それらのイベントハンドラーIDL属性を反映する。

body要素で公開されるWindowオブジェクトのonbluronerroronfocusonloadonresizeおよびonscrollイベントハンドラーは、通常HTML要素によってサポートされる同じ名前をもつ汎用イベントハンドラーに取って代わる。

したがって、たとえば、Documentbody要素の子で送出されたわき出るerrorイベントは、要素のonerrorイベントハンドラーコンテンツ属性を最初にもたらし、それからルートhtml要素のイベントハンドラーコンテンツ属性、その後にbody要素のonerrorイベントハンドラーコンテンツ属性をもたらすだろう。これは、イベントがターゲットから、bodyhtmlDocumentWindow、およびbodyでないWindowを見ているbody上のイベントハンドラーへわき出るためである。しかし、イベントがbodyを通してわき出し、かつイベントがWindowオブジェクトに到達しない場合、addEventListener()を使用するbodyに属する通常のイベントリスナーが実行されるだろう。

このページは、ユーザーがオンラインであるかどうかを表示するインジケーターを更新する:

<!DOCTYPE HTML>
<html lang="en">
 <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要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、インタラクティブなウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。

article要素がネストされる場合、原則的に内側のarticle要素が外側の記事の内容に関連する記事を表す。たとえば、ユーザーの投稿コメントを受け付けるサイトのブログのエントリーは、ブログのエントリーのarticle要素内にネストされたarticle要素としてコメントを表すことができる。

article要素に関連付けられている著者の情報(address要素を参照のこと)は、ネストされたarticle要素には適用されない。

シンジケーションで再配布されるコンテンツとともに明確に使用された場合、article要素は、Atomでのentry要素の目的と類似性がある。[ATOM]

schema.orgマイクロ語彙は、CreativeWorkサブタイプのいずれかを使用して、article要素の公表日を提供するために使用できる。

ページの主要コンテンツ(すなわち、フッター、ヘッダー、ナビゲーションブロック、およびサイドバーを除くもの)がすべての1つの自己完結型の組成物である場合、そのコンテンツはarticleでマークしてもよいが、その場合に技術的に冗長である(ページが単一の組成物であることは自明であるので、そのまま単一の文書である)。

この例は、schema.org注釈をもつ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>
 <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>
<html lang=en>
<title>eHome Portal</title>
<script src="/scripts/widgets.js">
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <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="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h1>News</h1>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>

4.3.3 section要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。

セクションの例は、章、タブ付きのダイアログボックス内のさまざまなタブ付きページ、または論文の番号付きセクションであろう。ウェブサイトのホームページは、はしがき、ニュース、および連絡先情報のセクションに分けることができるだろう。

要素のコンテンツを配給することが理にかなう場合、著者はsection要素の代わりにarticle要素を使用するよう推奨される。

section要素は包括的なコンテナ要素ではない。要素がスタイル付け目的またはスクリプティングの便宜のために必要になった場合のみ、著者は、代わりにdiv要素を使用するよう推奨される。要素の内容が文書のアウトラインで明示的に記載されるだろう場合のみ、section要素が適切であるというのが一般的なルールである。

次の例において、2つの短いセクションを含む、リンゴについて(大規模なウェブページの一部)の記事を見てみる。

<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要素をあらゆる場所で使用できること意味することに注目する。

これは、2つのセクションをもつ卒業式のプログラムであり、1つは卒業する人のリスト、もう1つは式の説明である。(この例においてマークアップは、要素間の空白の量を最小化するために使用される珍しいスタイルを特徴とする。)

<!DOCTYPE Html>
<Html Lang=En
 ><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>

この例において、本の著者は、章と付録のようないくつかのセクションをマークアップし、異なるセクションの2つのクラスでヘッダーをスタイル付けするためにCSSを使用している。

<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 Continues: 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>

4.3.4 nav要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしmain要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

nav要素は、他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部を表す

ページ上のリンクのグループがnav要素である必要はない―この要素は、主要なナビゲーションブロックから成るセクションを主に対象としている。特に、サービスの条件、ホームページ、著作権ページのような、サイトのさまざまなページへの簡潔なリンクのリストをフッターが持つことは、一般的である。footer要素は単独で、このような場合に対して十分である。一方nav要素は、そのような場合に使用できるが、通常不要である。

初期のレンダリングで省略されているナビゲーション情報から利益を得ることができる、またはすぐに利用可能であるナビゲーション情報から利益を得ることができるユーザーを対象とする(スクリーンリーダーなどの)ユーザーエージェントは、ページ上のどのコンテンツに最初にスキップまたは要求(もしくはその両方)に応じて提供するかを決定する方法として、この要素を使用できる。

次の例において、2つのnav要素がある。1つはサイト周辺の主要なナビゲーションのため、もう1つはページ自身周辺の補助的なナビゲーション用である。

<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>

次の例において、ページはリンクが存在する複数の場所を持つが、そのうちの1つのみがナビゲーションセクションとみなされる。

<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>
   <main itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </main>
   <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要素はリストを含める必要はなく、同様に他の種類のコンテンツを含むことができる。このナビゲーションブロックにおいて、リンクは文で提供されている:

<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="https://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="https://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要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしmain要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

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="https://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="https://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="https://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 h1h2h3h4h5h6要素

カテゴリー
フローコンテンツ
ヘディングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
hgroup要素の子として。
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLHeadingElement : HTMLElement {};

これらの要素は、そのセクションの見出しを表す

セマンティックスとこれらの要素の意味は見出しとセクションの節で定義される。

これらの要素は、要素名の数字で与えられたランクを持つ。h1要素が最も高いランクを持つと言われ、h6要素が最も低いランクを持ち、同じ名前をもつ2つの要素は等しいランクを持つ。

それぞれの文書のアウトライン(その見出しとセクションの構造)が関係する限りにおいて、次の2つの断片は、セマンティックに等価である:

<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>

著者は、その簡潔さのために前者のスタイルを好むかもしれないし、大量の編集を目の前にして利便性のために後者のスタイルを好むかもしれない。どちらが純粋に最良なのかは、オーサリングスタイルの好みの問題である。

もはやその互換性が必要されない場合に、依然として将来のプルーフィングの一方で、レガシーツールとの互換性のために、2つのスタイルを組み合わせることができる。この3つ目のスニペットはもう一度、前の2つと同じアウトラインを持つ:

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

4.3.7 hgroup要素

カテゴリー
フローコンテンツ
ヘディングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
1つ以上のh1h2h3h4h5h6およびtemplate要素
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

hgroup要素は、hgroup要素のすべてのh1h6の子要素で構成する、セクションの見出しを表す。小見出し、代替タイトル、またはキャッチフレーズのような、要素が複数のレベルを持つ場合、見出しは、h1h6要素のグループセットを使用する。

任意のそのような要素が存在する場合、またはそうでなければh1要素(最高ランク)と同じである場合、hgroup要素のランクは、hgroup要素の最高位h1h6要素の子孫のランクである。hgroup要素でヘディングコンテンツのその他のh1h6要素は、小見出しまたは字幕または(補助的な)代替タイトルを示す。

見出しとセクションのセクションは、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要素が任意のアウトラインで独自のセクションを作成するのを防ぎ、代わりに、別のセクションのタイトルではないが、単にタイトルのグループ内の補助的なタイトルであることを示すために、何らかの方法でアウトラインアルゴリズムからレンダリングされた出力で見られる、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

次の2つの例は、2つのh1の見出しが同じ映画に米国と英国の名前をグループするためにhgroup要素内で使用することができる方法を示す。

<hgroup>
 <h1>The Avengers</h1>
 <h1>Avengers Assemble</h1>
</hgroup>

<hgroup>
 <h1>Avengers Assemble</h1>
 <h1>The Avengers</h1>
</hgroup>

上記の最初の例は、映画名が、米国名(主)タイトルとしてThe Avengers、および英国名(補助)代替タイトルとしてAvengers Assembleをもつ、米国の出版でグループ化するだろう方法を示す。上記の2番目の例は、映画名が英国名(主)タイトルとして、および米国名(補助)代替タイトルとしてもつ、英国の出版でグループ化するだろう方法を示す。

両方の場合で、2つのタイトルはタイトルが等価ではないことを示すグループへのhgroup要素の使用に注意することが重要である。最初のh1は(主)タイトルを提供する代わりに、2つ目が(補助)代替タイトルを与える。タイトルと代替タイトルの両方が、h1要素でマークアップされているにもかかわらず、アウトラインアルゴリズム由来の出力のレンダリングされた表示において、hgroupの2つ目のh1は、補助的であることを明確に示す何らかの方法で表示される。たとえば:

米国の出版で:

The Avengers (Avengers Assemble)

英国の出版で:

Avengers Assemble (The Avengers)

次の例では、hgroup要素は、ウィザード形式のダイアログボックス内で2つのレベルの見出しをマークアップするために使用される:

<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要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしheaderfooter、またはmain要素の子孫をもたない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

header要素は、前置きまたはナビゲーション補助のグループを表す

header要素は通常、セクションの見出し(h1h6要素または hgroup要素)を含むように意図されるが、これは必須ではない。header要素はまた、セクションのコンテンツの目録、検索フォーム、または関連するロゴを包むために使用することができる。

サンプルheaderは以下のとおり。この最初のものは、ゲームのために存在する:

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

次の断片は、要素が仕様のヘッダーをマークアップに対して使用できる様子を示す。

<header>
 <hgroup>
  <h1>Fullscreen API</h1>
  <h2>Living Standard — Last Updated 19 October 2015</h2>
 </hgroup>
 <dl>
  <dt>Participate:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>Commits:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

header要素は、セクショニングコンテンツではない。新しいセクションを導入しない。

この例は、ページがh1要素で与えられたページ見出しと、h2要素によって与えられた2つのサブセクションを持つ。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> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

Spec bugs: 12990

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしheaderfooter、またはmain要素の子孫をもたない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

footer要素は、その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッターを表す。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。

footer要素がセクション全体を含む場合、付録、索引、長い奥付、冗長なライセンス契約などのコンテンツを表す

セクションの著者や編集者に対する連絡先情報は、おそらくfooter内側にそれ自身、address要素に属する。headerfooterの両方に適するだろう署名欄およびその他の情報は、いずれか(またはどちらでもない)に配置できる。これらの要素の主な目的は、著者が維持し、スタイルが容易である自明のマークアップを書くためだけである。これら要素は著者に特定の構造を課すことを意図するものではない。

フッターは必ずしも、セクションの最後に出現する必要はない(通常は最後だが)。

最も近い祖先セクショニングコンテンツまたはセクショニングルート要素がbody要素である場合、これはページ全体に適用される。

footer要素は、セクショニングコンテンツではない。新しいセクションを導入しない。

これは、一番上と一番下に2つのフッターを持つ、同じコンテンツのページである:

<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 LANG="en"><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 Köf.</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/2">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要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしヘディングコンテンツの子孫、セクショニングコンテンツの子孫、およびheaderfooteraddress要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

address要素は、最も近いarticleまたはbody要素の祖先の連絡先情報を表す。祖先がbody要素である場合、連絡先情報は、文書全体に適用される。

たとえば、HTMLに関連するW3Cのウェブサイトにあるページは、以下の連絡先情報を含むかもしれない:

<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要素のコレクションである:

nodearticle要素である場合
nodebody要素である場合

連絡先情報は、先祖としてnodeを持ちかつnodeの子孫である別のbodyまたはarticle要素の祖先を持たないすべてのaddress要素から構成される。

nodearticle要素である祖先要素を持つ場合
nodebody要素である祖先要素を持つ場合

nodeの連絡先情報は、最も近いいずれかの、最も近いarticleまたはbody要素の祖先の連絡先情報と同じである。

nodeノード文書body要素を持つ場合

nodeの連絡先情報は、Documentbody要素の連絡先情報と同じである。

そうでなければ

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要素およびhgroup要素は見出しである。

セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。同等以上のランクに属する後続の見出しは、新しい(暗黙の)セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。どちらの場合も、要素は暗黙のセクションの見出しを表す

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 ( "Grunt"段落を含む、明示的なbodyセクションの見出し)
    1. Bar(引用ブロックと"Baz"段落を含む、暗黙のセクションを開始する見出し)
    2. Quux (その見出し自身のみのコンテンツをもつ暗黙のセクションを開始する見出し)
    3. Thud (明示的なsectionセクションの見出し)

後の段落("Grunt")がトップレベルに戻るように、sectionがそれ以前の暗黙のセクションを終了する様子に注目する。

セクションは、任意のランクの見出しを含んでもよいが、著者は、h1要素のみを使用する、またはセクションのネストレベルに対して適切なランクの要素を使用するかのいずれかが強く推奨される。

著者はまた、セクショニングコンテンツの1つの要素に複数の見出しを持つことによって生成される暗黙のセクションに頼る代わりに、セクショニングコンテンツの要素内のセクションを明示的に包むことを推奨される。

たとえば、以下は正しい:

<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>

上記の文書の両方は、セマンティックに同じであり、適合ユーザーエージェントで同じアウトラインを生成する。

この3番目の例はまた、セマンティックに同じであり、(たとえば、セクションが編集で移動される場合)より簡単にメンテナンスできるかもしれない:

<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ツリーのノード上の歩行に関して定義される。

セクショニングコンテンツ要素またはセクショニングルート要素に対するアウトラインは、1つ以上の潜在的にネストされたセクションのリストで構成される。アウトラインが作成された要素は、アウトラインの所有者であると言われる。

セクションは、元のDOMツリーで一部のノードに対応するコンテナである。各セクションは、セクションに関連付けられた1つの見出しを持つことができ、さらにネストされた任意の数のセクションを含むことができる。アウトラインのためのアルゴリズムはまた、特定のセクションおよび潜在的な見出しをもつDOMツリーにおける各ノードを関連付ける。(アウトラインにおけるセクションは、一部はそのような要素に対応してもよいが、section要素ではない―要素は単に概念的なセクションである。)

次のマークアップ断片で:

<body>
  <hgroup id="document-title">
    <h1>HTML</h1>
    <h2>Living Standard — Last Updated 12 August 2016</h2>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

これはbodyノード(そして、全体の文書)に対して作成されている以下のアウトラインをもたらす:

  1. セクションは、bodyノードに対して作成される。

    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>.

    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).

    ネストされたセクション:

    1. セクションは1番目のh2要素を示唆する。

      Associated with heading <h2>Table of contents</h2>.

      Also associated with the ordered list <ol id=toc>...</ol> (though it likely would not be shown in a rendered view of the outline).

      ネストされたセクションはない。

    2. セクションは2番目のh2要素を示唆する。

      Associated with heading <h2>First section</h2>.

      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).

      ネストされたセクションはない。

次の画像は、アウトラインのレンダリングされたビューがどのように見えるかを示す。

Top-level section with the
   multi-level heading "HTML: Living Standard — Last Updated 12 August 2016" and two
   subsections; "Table of contents" and "First section".

その要素のアウトラインを決定するためにセクショニングコンテンツ要素またはセクショニングルート要素でルートとするDOMサブツリーの散歩中に従わなければならないアルゴリズムは次のとおりである:

  1. current outline targetをnullにする。(これは、アウトラインが作成されている要素を保持する。)

  2. current sectionをnullにする。(DOMにおける要素はセクションにすべて関連付けすることができるように、セクションへのポインターを保持する。)

  3. ネストを​処理するために使用される、要素を保持するためのスタックを作成する。このスタックを空に初期化する。

  4. アウトラインが作成されるためのサブツリーのルートでセクショニングコンテンツ要素またはセクショニングルート要素で始まる、ツリー順でDOM上を歩き、散歩が入って出るときに、各要素に対して以下の最初の関連する手順をトリガーする。

    その要素がスタックの最上位の要素である場合、要素を終了する際

    終了しようとする要素は、ヘディングコンテンツ要素またはhidden属性をもつ要素である。

    スタックからその要素をポップする。

    スタックの最上位がヘディングコンテンツ要素またはhidden属性をもつ要素である場合

    Do nothing.

    hidden属性をもつ要素を入力する場合

    スタックに入力されている要素をプッシュする。(これは、要素と要素のいずれかの子孫をスキップするためのアルゴリズムをもたらす。)

    セクショニングコンテンツ要素を入力する場合

    次の手順を実行する:

    1. If current outline target is not null, then:

      1. current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

      2. スタックにcurrent outline targetをプッシュする。

    2. current outline targetを入力されている要素にする。

    3. current sectioncurrent outline target要素に対する新たに作成されるセクションとする。

    4. current outline targetcurrent sectionに関連付ける。

    5. アウトラインにおける唯一のセクションとしてちょうど新しいcurrent sectionで初期化される、新しいcurrent outline targetのための新しいアウトラインとする。

    スタックが空でない場合、セクショニングコンテンツ要素を終了する際

    次の手順を実行する:

    1. current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

    2. スタックから先頭要素をポップし、current outline targetをその要素とする。

    3. current sectioncurrent outline target要素のアウトラインにおける最後のセクションとする。

    4. current sectionに終了しようとしているセクショニングコンテンツ要素のアウトラインを追加する。(これは、アウトラインにおける最後のセクションであるセクションを変更しない。)

    セクショニングルート要素を入力する場合

    次の手順を実行する:

    1. current outline targetがnullでない場合、スタックにcurrent outline targetをプッシュする。

    2. current outline targetを入力されている要素にする。

    3. current outline target親セクションcurrent sectionとする。

    4. current sectioncurrent outline target要素に対する新たに作成されるセクションとする。

    5. アウトラインにおける唯一のセクションとしてちょうど新しいcurrent sectionで初期化される、新しいcurrent outline targetのための新しいアウトラインとする。

    スタックが空でない場合、セクショニングルート要素を終了する際

    次の手順を実行する:

    1. current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

    2. current sectioncurrent outline target親セクションにする。

    3. スタックから先頭要素をポップし、current outline targetをその要素とする。

    セクショニングコンテンツ要素またはセクショニングルート要素を終了する場合(スタックが空である場合)

    current outline targetは終了している要素であり、かつアウトラインが生成されているサブツリーのルートでセクショニングコンテンツ要素またはセクショニングルート要素である。

    current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

    手順の全体的なセットで次の手順にスキップする。(散歩は終わった。)

    ヘディングコンテンツ要素を入力する場合

    current sectionが見出しを持たない場合、入力されている要素をcurrent 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 h1h6 descendant of the hgroup providing the primary heading for the current section, and with other h1h6 descendants of the hgroup providing secondary headings for the current section.

    そうでなければ、入力されている要素がcurrent outline targetアウトラインの最後のセクションの見出し以上のランクを持つ場合、またはcurrent outline targetアウトラインの最後のセクションの見出しが暗黙の見出しである場合、この新しいセクションがそのアウトラインの新しい最後のセクションであるように、新しいセクションを作成して、current outline target要素のアウトラインに追加する。current sectionを新しいセクションとする。入力されている要素をcurrent sectionのための新しい見出しとする。

    そうでなければ、以下のサブ手順を実行する:

    1. candidate sectioncurrent sectionにする。

    2. Heading loop:入力されている要素がcandidate sectionの見出しのランクよりも低いランクを持つ場合、新しいセクションを作成し、candidate sectionに追加する。(これは、アウトラインにおいて最後のセクションであるセクションを変更しない。)current sectionをこの新しいセクションとする。入力されている要素をcurrent sectionのための新しい見出しとする。次のサブ手順を中止する。

    3. new candidate sectioncurrent outline targetアウトラインにおけるcandidate sectionを含むセクションとする。

    4. candidate sectionnew candidate sectionとする。

    5. heading loopにラベル付けされる手順に戻る。

    スタックに入力されている要素をプッシュする。(これは、要素のいずれかの子孫をスキップするためのアルゴリズムをもたらす。)

    h1最高ランクを持ち、h6が最低ランクを持つということを思い出す。

    そうでなければ

    Do nothing.

    さらに、歩行がノードを終了するたびに、上記の手順を行った後、ノードがまだセクションに関連付けられない場合、セクションcurrent sectionにノードを関連付ける。

  5. アウトラインがその親要素が関連付けられているセクションで作成されているサブツリー内にあるすべての非要素ノードを関連付ける。

  6. もしあれば、ノードが関連付けられるセクションの見出しとサブツリーにおけるすべてのノードを関連付ける。

上記のアルゴリズムによって作成されるセクションのツリー、または適切なサブセットは、文書のアウトラインを生成する際に、たとえばコンテンツのテーブルを生成する際に、使用されなければならない。

Documentbody要素に対して作成されるアウトラインは、文書全体のアウトラインである。

コンテンツのインタラクティブなテーブルを作成する際、セクションが元の文書における実際の要素に対して作成された場合、エントリーは関連するセクショニングコンテンツ要素にユーザーをジャンプすべきであり、またはツリー内のセクションが上記プロセスにおける見出しに対して生成された場合、関連するヘディングコンテンツ要素にジャンプすべきである。

したがって、文書の最初のセクションを選択することは常に、bodyにおける最初の見出しが発見される場合に関係なく、ユーザーを文書の先頭に持っていく。

セクションsectionに関連付けられるヘディングコンテンツ要素のアウトライン深さは、1を足す、Documentの要素のアウトラインが作成される際にsectionが自分自身を見つける最も外側のアウトラインにおけるsectionの祖先であるセクションの数である。セクションに関連付けられるヘディングコンテンツ要素のアウトライン深さは1である。

ユーザーエージェントは、明示的なセクションの見出しを持たないセクションに対するデフォルトの見出しを提供すべきである。

次の断片を考えてみる:

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

見出しを含まないが、このスニペットは3つのセクションを持つ:文書(body)と2つのサブセクション(navおよびaside)。次のようにユーザーエージェントはアウトラインを提示することができる:

  1. Untitled document
    1. Navigation
    2. Sidebar

このデフォルトの見出し("Untitled document"、"Navigation"、"Sidebar")はこの仕様で規定されず、ユーザーの言語、ページの言語、ユーザーの好み、ユーザーエージェント実装者の好みなどによって異なるかもしれない。

次のJavaScript関数は、どのようにツリーウォークが実装されることができるかを示す。root引数は(セクショニングコンテンツ要素またはセクショニングルート要素のいずれかを)歩くためのツリーのルートであり、enterおよびexit引数は、開始および終了されるようにノードと呼ばれているコールバックである。[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 サンプルアウトライン

この節は非規範的である。

以下の文書は、アウトラインアルゴリズムの簡単なアプリケーションを示す。最初に、非常に短い章とサブセクションをもつ本の文書を以下に示す:

<!DOCTYPE HTML>
<html lang=en>
<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>
<html lang=en>
<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>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

これは3つのトップレベルのセクションから構成される次のような単純なアウトラインを形成する:

  1. Apples
  2. Bananas
  3. Carambola

事実上、body要素は3つに分割される。

h1h6モデルとsection/h1モデルの両方を混合することは、直感的でない結果をもたらすかもしれない。

正確な前の例だがsectionに包まれた(暗黙の)bodyのコンテンツをもつ、以下の例を考慮してみる:

<!DOCTYPE HTML>
<html lang=en>
<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

1つのsection要素のみがあるにもかかわらず3つのサブセクションが生じるため、この結果は直感的でないものとして記載される。事実上、直前の例で暗黙のbody要素と同様に、sectionは3つに分かれる。

(この例において、明示的な見出しを持たないため、"(untitled page)"は、body要素に対して暗黙的に指定される。)

見出しは、他のセクションを超えてくることはない。したがって、次の例において、最初のh1は、実際にページヘッダーを記述するのではなく、ページの後半のヘッダーについて説明する。

<!DOCTYPE HTML>
<html lang=en>
<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>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<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>
 <main>
  <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>
 </main>
</article>
</html>

アウトラインの結果は次のようになる:

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

また、この例において、headermain要素が文書のアウトラインに何ら影響を与えないことは注目に値する。

hgroup要素は副見出しに対して使用することができる。たとえば:

<!DOCTYPE HTML>
<html lang="en">
<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>
</html>

アウトラインの結果は次のようになる:

  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

ほとんどのインターフェイスの問題として、正確にこれはユーザーエージェントによって表される方法は、実装上の好みの問題として残されるが、重要な部分はhgroupの子孫h1h6要素が、要素の見出し由来のものであるということである。したがって、次は同様に妥当になる:

  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 night

    00:00 to 06:00

4.3.11.3 ユーザーにアウトラインを公開する

ユーザーエージェントは、ユーザーにナビゲーションを支援するためにするためにページのアウトラインを公開することを勧める。これは、スクリーンリーダーなどの非視覚的なメディアに対して特に当てはまる。

しかし、セクショニングコンテンツを誤用する著者から生じる困難を緩和するために、ユーザーエージェントは、単独でヘディングコンテンツを使用してページをナビゲートするモードを提供することも勧める。

たとえば、ユーザーエージェントは、次のように矢印キーを対応付けることができる:

Shift+← Left
前のセクションのサブセクションを含め、前のセクションに移動する
Shift+→ Right
現在のセクションのサブセクションを含め、次のセクションに移動する
Shift+↑ Up
現在のセクションの親セクションに移動する
Shift+↓ Down
現在のセクションのサブセクションを飛ばして、次のセクションに移動する

さらに加えて、ユーザーエージェントは、セクションのアウトラインの深さにかかわらずかつ見出しなしのセクションを無視して、ヘディングコンテンツの前または次の要素にナビゲートするjおよびkキーを対応付けることができる。

4.3.12 使用方法の概要

この節は非規範的である。

要素 目的
body 文書の主要コンテンツ。
<!DOCTYPE HTML>
<html lang="en">
 <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 hgroup要素のすべてのh1h6の子要素で構成する、セクションの見出し。小見出し、代替タイトル、またはキャッチフレーズのような、要素が複数のレベルを持つ場合、見出しは、h1h6要素のグループセットを使用する。
<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だろう。

一方で、つぶやきやredditのコメント、Tumblrのポストや単に広告に分類される新聞を想像してみよう。"グラニースミス。これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる。"全部があったので、articleだろう。

記事におけるコメントはコメントされているarticleの一部ではなく、したがってarticle自身である。