4.3 セクション

4.3.1 body要素

カテゴリ
セクショニングルート
この要素を使用できるコンテキスト
html要素の2番目の要素として。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onstorage
onunload
text/htmlにおけるタグ省略
要素が空である場合、またはbody要素内の最初のものが空白文字またはコメントでない場合、body要素の開始タグは省略してもよい。ただし、body要素内の最初のものがmetalinkscriptstyle、またはtemplateである場合を除く。
body要素の直前がコメントでない場合、body要素の終了タグは省略してもよい。
許可されるARIAロール属性値:
documentロール (デフォルト - 競設定しない)、application
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLBodyElement : HTMLElement {
};
HTMLBodyElement implements WindowEventHandlers;

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

適合文書では、1つのbody要素のみが存在する。document.bodyIDL属性は、文書の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>
 <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要素

カテゴリ
フローコンテンツ、ただしmain要素を子孫にもたない。
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
article (デフォルト - 設定しない)、 applicationdocumentまたはmain
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

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

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

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

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

ページの主要コンテンツ(すなわちフッター、ヘッダー、ナビゲーションブロック、およびサイドバーを除く)が、すべて単一の自己完結型の構成物である場合、コンテンツはmain要素でマークアップされるべきであり、かつコンテンツはまた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の使用は、どちらも間違っていないだろう。これは主にオーサリングの好みの問題である。)

4.3.3 section要素

カテゴリ
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
regionロール (デフォルト - 設定しない)、 alertalertdialogapplicationcontentinfodialogdocumentlogmainmarqueepresentationsearchまたはstatus
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈においてセクションは、主題を表すコンテンツのグループである。各sectionの主題は、section要素の子として見出し(h1-h6要素)を含むことによって一般に識別されるべきである。

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

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

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

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

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

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

<!DOCTYPE Html>
<Html
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H2
       >Ceremony</H2
     ><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
     ><H2
       >Graduates</H2
     ><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を使用している。全体の本は、他の本を含むより大きな文書の一部としてarticle要素に包まれる。

<article class="book">
 <style>
  section { border: double medium; margin: 2em; }
  section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
  section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
 </style>
 <header>
   <h2>My Book</h2>
   <p>A sample with not much content</p>
  <p><small>Published by Dummy Publicorp Ltd.</small></p>
 </header>
  
 <section class="chapter">
  <h3>My First Chapter</h3>
  <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">
  <h3>It Continutes: The Second Chapter</h3>
  <p>Bla dee bla, dee bla dee bla. Boom.</p>
 </section>
 <section class="chapter">
  <h3>Chapter Three: A Further Example</h3>
  <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">
  <h3>Appendix A: Overview of Examples</h3>
  <p>These are demonstrations.</p>
 </section>
 <section class="appendix">
  <h3>Appendix B: Some Closing Remarks</h3>
  <p>Hopefully this long example shows that you <em>can</em> style
  sections, so long as they are used to indicate actual sections.</p>
 </section>
</article>

4.3.4 nav要素

カテゴリ
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしmain要素を子孫にもたない。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
navigationロール(デフォルト - 設定しない)またはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

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

nav要素のコンテンツが項目のリストを表す場合、理解とナビゲーションを支援するために、リストのマークアップを使用する。

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

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

次の例において、ページはリンクが存在する複数の場所を持つが、そのうちの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>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

ページの主要コンテンツを包むために使用されているmain要素に注目する。この場合、ページヘッダーとフッター以外の全てのコンテンツとなる。

ブログの記事について、公開日およびその他のメタデータを提供するためにschema.orgの語彙を使用する上記の例で、マイクロデータの注釈も見ることができる。

次の例において、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>
 <main>
  <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>
 </main>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

nav要素はリストを含める必要はなく、同様に他の種類のコンテンツを含むことができる。このナビゲーションブロックにおいて、リンクは文で提供されている:

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

4.3.5 aside要素

カテゴリ
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしmain要素を子孫にもたない。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
complementaryロール(デフォルト - 設定しない)、notesearchまたはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

4.3.6 h1h2h3h4h5h6要素

カテゴリ
フローコンテンツ
ヘディングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
headingロール(デフォルト - 設定しない)、tabまたはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLHeadingElement : HTMLElement {};

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

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

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

新しいセクションまたはサブセクションの見出しであることを意図する場合を除き、小見出し、字幕、代替タイトルやキャッチフレーズをマークアップするためにh1h6要素を使用してはならない。代わりに、仕様の専用要素なしで共通イディオムの節におけるマークアップパターンを使用する。

それぞれの文書のアウトライン(その見出しとセクションの構造)が関係する限りにおいて、次の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>

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

4.3.7 header要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしheaderfooter、またはmain要素の子孫を除く。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
bannerロール(デフォルト - 設定しない)またはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

header要素は、その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するヘッダーを表すheaderは要素は典型的に、前置きまたはナビゲーション補助のグループを含む。

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

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

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

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

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

<header>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <p>W3C Working Draft 27 October 2004</p>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

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

この例は、ページがh1要素で与えられたページ見出しと、h2要素によって与えられた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" -->
 ...
カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしheaderfooter、またはmain要素の子孫を除く。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
contentinfoロール(デフォルト - 設定しない)またはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

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

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

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

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

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

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

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

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

これは、サイト全体のフッターとセクションフッターの両方に使用されているfooter要素を示す例である。

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<MAIN>
 <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>
</MAIN>
<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.9 address要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしヘディングコンテンツの子孫、セクショニングコンテンツの子孫、およびheaderfooteraddress要素の子孫を除く。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
contentinfoロール。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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要素で他の情報と一緒に含まれるだろう。

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 Document has a body element

The contact information of node is the same as the contact information of the body element of the Document.

そうでなければ

There is no contact information for node.

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>
 <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.10 見出しとセクション

h1h6要素は見出しである。

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

新しいセクションまたはサブセクションの見出しであることを意図する場合を除き、小見出し、字幕、代替タイトルやキャッチフレーズをマークアップするためにh1h6要素を使用してはならない。代わりに、仕様の専用要素なしで共通イディオムの節におけるマークアップパターンを使用する。

blockquote要素とtd要素を含む特定の要素は、セクショニングルートであると言われている。これらの要素は、自分のアウトラインを持つことができるが、要素の内側のセクションと見出しは祖先のアウトラインに寄与しない。

セクショニングコンテンツ要素は、他の見出しが作成する暗黙のセクションであるかに関わらず、最も近い祖先セクショニングルートまたは最も近いセクショニングコンテンツの祖先要素の、最も近い方のサブセクションと常にみなされる。

次の断片の場合:

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

構造は次のようになる:

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

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

セクションは、任意のランクの見出しを含んでもよく、かつ著者はセクションのネストレベルに適切なランクの見出しを使用するよう強く推奨される。

著者はまた、セクショニングコンテンツの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.10.1 アウトラインの作成

アルゴリズムが適合性チェッカーのような他のソフトウェアに実装されるが、グラフィカルブラウザや支援技術のユーザエージェントにおけるアウトラインアルゴリズムの既知の実装は、現在存在しない。したがってアウトラインアルゴリズムは、ユーザーに文書の構造を伝えるために依存することができない。著者は、文書構造を伝えるために見出しのランクh1-h6)を使用するよう勧める。

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.

セクショニングコンテンツ要素またはセクショニングルート要素に対するアウトラインは、1つ以上の潜在的にネストされたセクションのリストで構成される。セクションは、元のDOMツリーで一部のノードに対応するコンテナである。各セクションは、セクションに関連付けられた1つの見出しを持つことができ、さらにネストされた任意の数のセクションを含むことができる。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.)

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

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

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

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

    見出し"A"を関連付けられている。

    また、段落"B"を関連付けられている。

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

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

      見出し"C"を関連付けられている。

      また、段落"D"を関連付けられている。

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

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

      見出し"E"を関連付けられている。

      また、段落"F"を関連付けられている。

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

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:

  1. Let current outline target be null. (It holds the element whose outline is being created.)

  2. 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. Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.

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

    When exiting an element, if that element is the element at the top of the stack

    The element being exited is a heading content element or an element with a hidden attribute.

    Pop that element from the stack.

    If the top of the stack is a heading content element or an element with a hidden attribute

    何もしない。

    When entering an element with a hidden attribute

    Push the element being entered onto the stack. (This causes the algorithm to skip that element and any descendants of the element.)

    When entering a sectioning content element

    Run these steps:

    1. If current outline target is not null, run these substeps:

      1. If the current section has no heading, create an implied heading and let that be the heading for the current section.

      2. Push current outline target onto the stack.

    2. Let current outline target be the element that is being entered.

    3. Let current section be a newly created section for the current outline target element.

    4. Associate current outline target with current section.

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

    When exiting a sectioning content element, if the stack is not empty

    Run these steps:

    1. If the current section has no heading, create an implied heading and let that be the heading for the current section.

    2. Pop the top element from the stack, and let the current outline target be that element.

    3. Let current section be the last section in the outline of the current outline target element.

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

    When entering a sectioning root element

    Run these steps:

    1. If current outline target is not null, push current outline target onto the stack.

    2. Let current outline target be the element that is being entered.

    3. Let current outline target's parent section be current section.

    4. Let current section be a newly created section for the current outline target element.

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

    When exiting a sectioning root element, if the stack is not empty

    Run these steps:

    1. If the current section has no heading, create an implied heading and let that be the heading for the current section.

    2. Let current section be current outline target's parent section.

    3. Pop the top element from the stack, and let the current outline target be that element.

    When exiting a sectioning content element or a sectioning root element (when the stack is empty)

    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.

    If the current section has no heading, create an implied heading and let that be the heading for the current section.

    Skip to the next step in the overall set of steps. (The walk is over.)

    When entering a heading content element

    If the current section has no heading, let the element being entered be the heading for the current 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.

    Otherwise, run these substeps:

    1. Let candidate section be current section.

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

    3. Let new candidate section be the section that contains candidate section in the outline of current outline target.

    4. Let candidate section be new candidate section.

    5. Return to the step labeled heading loop.

    Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)

    Recall that h1 has the highest rank, and h6 has the lowest rank.

    そうでなければ

    何もしない。

    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.

  5. Associate all nodes with the heading of the section with which they are associated, if any.

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.

The outline created for the body element of a Document is the outline of the entire document.

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.

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.

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.

User agents should provide default headings for sections that do not have explicit section headings.

Consider the following snippet:

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

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. Untitled document
    1. Navigation
    2. Sidebar

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 implementor's preferences, etc.

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. [ECMA262]

function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node == root) {
        node = null;
      } else if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      } else {
        node = node.parentNode;
      }
    }
  }
}
4.3.10.2 サンプルアウトライン

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

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

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

この本は、以下のアウトラインを形成するだろう:

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

title要素はアウトラインに関係しないことに注意する。

これは類似の文書があるが、今回は同じ効果を得るためにsection要素を使用している:

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

この本は、同じアウトラインを形成するだろう:

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

文書は、複数のトップレベルの見出しを含めることができる:

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

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

  1. Apples
  2. Bananas
  3. Carambola

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

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

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

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

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

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

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

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

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

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

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

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

このように、article要素がnavブロックで始まりかつ単に後でその見出しを持つ場合、結果はnavブロックがアウトラインで残りのarticle部分と同じセクションの一部ではないものである。たとえば、次の文書を取る:

<!DOCTYPE HTML>
<title>We're adopting a child! — Ray's blog</title>
...

<h1>Ray's blog</h1>

<main>
 <article>
<header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav> 
</header>
  <h2>We're adopting a child!</h2>

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

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

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

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

4.3.11 使用方法の概要

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

要素 目的
body
<!DOCTYPE HTML>
<html>
 <head> <title>Steve Hill's Home Page</title> </head>
 <body> <p>Hard Trance is My Life.</p> </body>
</html>
article
<article>
 <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
 <p>My fave Masif tee so far!</p>
 <footer>Posted 2 days ago</footer>
</article>
<article>
 <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
 <p>Happy 2nd birthday Masif Saturdays!!!</p>
 <footer>Posted 3 weeks ago</footer>
</article>
section
<h1>Biography</h1>
<section>
 <h1>The facts</h1>
 <p>1500+ shows, 14+ countries</p>
</section>
<section>
 <h1>2010/2011 figures per year</h1>
 <p>100+ shows, 8+ countries</p>
</section>
nav
<nav>
 <ul>
  <li><a href="/">Home</a>
  <li><a href="/biog.html">Bio</a>
  <li><a href="/discog.html">Discog</a>
 </ul>
</nav>
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>
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.11.1 Articleかsectionか?

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

sectionは、何か別のものの一部を形成する。articleは自分自身である。しかし、どっちがどっちか分かるだろうか?たいてい真の答えは"著者の意図に依存する"である。

たとえば、"これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる"とだけ述べた"グラニースミス"の章のある本を想像してみよう。(多分)他のリンゴの種類の章が多数あるため、これはsectionだろう。

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

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