🔴 Hot News: html/sections.html - สรุปดราม่าล่าสุด

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

一部のDOM操作は、"body要素"という用語で定義される。これは用語の定義に従って、DOMにおける特定の要素を参照し、任意のbody要素を参照しない。

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

4.3.2 article要素

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

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

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

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

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

4.3.4 nav要素

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

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

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

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

4.3.5 aside要素

aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。

この要素はリード文またはサイドバーのような印刷上の効果に対して、navの要素のグループに対して、広告に対して、およびそのページのメインコンテンツとは別に考えられる他のコンテンツに対して使用できる。

これらの文書はメインフローの一部であるので、単に挿入句にaside要素を使用することは適切でない。

4.3.6 h1、h2、h3、h4、h5、h6要素

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

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

4.3.7 header要素

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

4.3.8 footer要素

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

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

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

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

4.3.9 address要素

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

アドレスが実際に関連する連絡先情報でない場合、address要素は、任意のアドレス（たとえば郵便の宛先）を表すために使用してはならない。（p要素は、一般に住所をマークアップするための適切な要素である。）

一般に、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.

4.3.10 見出しとセクション

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

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

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

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

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

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:

Let current outline target be null. (It holds the element whose outline is being created.)
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.)
Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.
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.
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:

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 サンプルアウトライン

見出しは、他のセクションを超えてくることはない。したがって、次の例において、最初の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>

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

(untitled page)
1. A plea from our caretakers
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>
...

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

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

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

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>
`h1`–`h6`	セクションの見出し
<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自身である。

HTML5日本語訳

W3C Recommendation 28 October 2014

4.3 セクション

4.3.1 `body`要素

4.3.2 `article`要素

4.3.3 `section`要素

4.3.4 `nav`要素

4.3.5 `aside`要素

4.3.6 `h1`、`h2`、`h3`、`h4`、`h5`、`h6`要素

4.3.7 `header`要素

4.3.8 `footer`要素

4.3.9 `address`要素

4.3.10 見出しとセクション

4.3.10.1 アウトラインの作成

4.3.10.2 サンプルアウトライン

4.3.11 使用方法の概要

4.3.11.1 Articleかsectionか？

4.3 セクション

4.3.1 body要素

4.3.2 article要素

4.3.3 section要素

4.3.4 nav要素

4.3.5 aside要素

4.3.6 h1、h2、h3、h4、h5、h6要素

4.3.7 header要素

4.3.8 footer要素

4.3.9 address要素

4.3.10 見出しとセクション

4.3.10.1 アウトラインの作成

4.3.10.2 サンプルアウトライン

4.3.11 使用方法の概要

4.3.11.1 Articleかsectionか？

4.3.1 `body`要素

4.3.2 `article`要素

4.3.3 `section`要素

4.3.4 `nav`要素

4.3.5 `aside`要素

4.3.6 `h1`、`h2`、`h3`、`h4`、`h5`、`h6`要素

4.3.7 `header`要素

4.3.8 `footer`要素

4.3.9 `address`要素