HTML

要素が空である場合、またはbody要素内の最初のものがASCII空白文字またはコメントでない場合、body要素の開始タグは省略することができる。ただし、body要素内の最初のものがmeta、noscript、link、script、styleまたはtemplate要素である場合を除く。

body要素の直後がコメントでない場合、body要素の終了タグは省略してすることができる。

コンテンツ属性：

グローバル属性

onafterprint

onbeforeprint

onbeforeunload

onhashchange

onlanguagechange

onmessage

onmessageerror

onoffline

ononline

onpageswap

onpagehide

onpagereveal

onpageshow

onpopstate

onrejectionhandled

onstorage

onunhandledrejection

onunload

[Exposed=Window]
interface HTMLBodyElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

HTMLBodyElement includes WindowEventHandlers;

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

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

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

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

The event handlers of the Window object named by the Window-reflecting body element event handler set, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements.

したがって、たとえば、Documentのbody要素の子で送出されたわき出るerrorイベントは、要素のonerrorイベントハンドラーコンテンツ属性を最初にもたらし、それからルートhtml要素のイベントハンドラーコンテンツ属性、その後にbody要素のonerrorイベントハンドラーコンテンツ属性をもたらすだろう。これは、イベントがターゲットから、body、html、Document、Window、および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`要素

Element/article

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; セクショニングコンテンツ。; パルパブルコンテンツ。
この要素を使用できるコンテキスト：: セクショニングコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
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>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <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>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <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/Comment" 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="dateCreated" 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/Comment" 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="dateCreated" 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"></script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>Stocks</h2>
 <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">
 <h2>News</h2>
 <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`要素

Element/section

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

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

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

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

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

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

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

<article>
 <hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>
 <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 Lang=En
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H2
       >Ceremony</H2
     ><P
       >Opening Procession</P
     ><P
       >Speech by Valedictorian</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を使用している。

<style>
 section { border: double medium; margin: 2em; }
 section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
 <hgroup>
  <h1>My Book</h1>
  <p>A sample with not much content</p>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h2>My First Chapter</h2>
 <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">
 <h2>It Continues: The Second Chapter</h2>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h2>Chapter Three: A Further Example</h2>
 <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">
 <h2>Appendix A: Overview of Examples</h2>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h2>Appendix B: Some Closing Remarks</h2>
 <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`要素

Element/nav

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; セクショニングコンテンツ。; パルパブルコンテンツ。
この要素を使用できるコンテキスト：: セクショニングコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
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>
   <h2>Demos in Exampland</h2>
   <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">
    <h2>Public demonstrations</h2>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h2>Demolitions</h2>
    <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>
   <h2>Navigation</h2>
   <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>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </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>

ブログの記事について、公開日およびその他のメタデータを提供するために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`要素

Element/aside

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

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

aside要素は、aside要素の周囲のコンテンツに付随的に関連するコンテンツから構成され、かつそのコンテンツとは別のものと見なすことができるページのセクションを表す。このようなセクションは、活版印刷でサイドバーとして表現されることがよくある。

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

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

次の例は、asideがヨーロッパのかなり長いニュース記事でスイスの背景素材をマークアップに対して使用される様子を示す。

<aside>
 <h2>Switzerland</h2>
 <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>
   <h2>My blogroll</h2>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h2>Archives</h2>
   <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 -->
  <h2>My last post</h2>
  <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 -->
  <h2>My first post</h2>
  <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 -->
   <h2>Posting</h2>
   <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>
  <p><a href="/archives">Archives</a> -
   <a href="/about">About me</a> -
   <a href="/copyright">Copyright</a></p>
 </footer>
</body>

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

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadingElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

この要素を使用できるコンテキスト：

hgroup要素の子として。

ヘディングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

[Exposed=Window]
interface HTMLHeadingElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

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

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

これらの要素は、要素名の数字で与えられた見出しレベルを持つ。見出しレベルは、ネストされたセクションのレベルに対応する。h1要素はトップレベルのセクション用、h2はサブセクション用、h3はサブサブセクション用などである。

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

Element/hgroup

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android2.2+Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; ヘディングコンテンツ。; パルパブルコンテンツ。
この要素を使用できるコンテキスト：: ヘディングコンテンツが期待される場所。
コンテンツモデル：: 0個以上のp要素、その後に1つのh1、h2、h3、h4、h5またはh6要素が続き、その後に0個以上のp要素が続き、任意でスクリプトサポート要素と混合される。
text/htmlにおけるタグ省略：: どちらのタグも省略不可。
コンテンツ属性：: グローバル属性
アクセシビリティの考慮：: 著者向け。; 実装者向け。
サニタイゼーション：: デフォルト。
DOMインターフェイス：: HTMLElementを使用する。

hgroup要素は、見出しと関連コンテンツを表す。この要素は、小見出し、代替タイトル、またはタグラインを表すコンテンツを含む1つ以上のp要素でh1–h6要素をグループ化するために使用してもよい。

hgroup要素に含まれる妥当な見出しの例を次に示す。

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

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

4.3.8 `header`要素

Element/header

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; パルパブルコンテンツ。
この要素を使用できるコンテキスト：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ、ただしheaderまたはfooter要素の子孫をもたない。
text/htmlにおけるタグ省略：: どちらのタグも省略不可。
コンテンツ属性：: グローバル属性
アクセシビリティの考慮：: 祖先セクショニングコンテンツ要素が存在する場合：著者向け、実装者向け。; そうでなければ：著者向け、実装者向け。
サニタイゼーション：: デフォルト。
DOMインターフェイス：: HTMLElementを使用する。

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

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

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

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

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

<header>
 <hgroup>
  <h1>Fullscreen API</h1>
  <p>Living Standard — Last Updated 19 October 2015<p>
 </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" -->
 ...

Element/footer

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; パルパブルコンテンツ。
この要素を使用できるコンテキスト：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ、ただしheaderまたはfooter要素の子孫をもたない。
text/htmlにおけるタグ省略：: どちらのタグも省略不可。
コンテンツ属性：: グローバル属性
アクセシビリティの考慮：: 祖先セクショニングコンテンツ要素が存在する場合：著者向け、実装者向け。; そうでなければ：著者向け、実装者向け。
サニタイゼーション：: デフォルト。
DOMインターフェイス：: HTMLElementを使用する。

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

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

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

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

祖先セクショニングコンテンツ要素がない場合、それはページ全体に適用される。

footer要素自身はセクショニングコンテンツものではない。新しいセクションは導入されない。

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

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </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`要素

Element/address

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; パルパブルコンテンツ。
この要素を使用できるコンテキスト：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ、ただしヘディングコンテンツの子孫、セクショニングコンテンツの子孫、およびheader、footer、address要素の子孫を除く。
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要素のコレクションである：

nodeがarticle要素である場合
nodeがbody要素である場合: 連絡先情報は、先祖としてnodeを持ちかつnodeの子孫である別のbodyまたはarticle要素の祖先を持たないすべてのaddress要素から構成される。
nodeがarticle要素である祖先要素を持つ場合
nodeがbody要素である祖先要素を持つ場合: nodeの連絡先情報は、最も近いいずれかの、最も近いarticleまたはbody要素の祖先の連絡先情報と同じである。
nodeのノード文書がbody要素を持つ場合: nodeの連絡先情報は、Documentのbody要素の連絡先情報と同じである。
そうでなければ: 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 見出しとアウトライン

h1–h6要素は見出しレベルを持ち、これは要素の計算された見出しレベルを取得するによって与えられる。

これらの要素は、見出しを表す。見出しの見出しレベルが低いほど、その見出しが持つ祖先セクションは少なくなる。

アウトラインは、文書内のすべての見出しであり、ツリー順になっている。

アウトラインは、目次を生成する場合など、文書のアウトラインを生成するために使用すべきである。インタラクティブな目次を作成する場合、エントリーはユーザーを関連する見出しにジャンプさせるべきである。

文書に1つ以上の見出しがある場合、アウトライン内の少なくとも1つの見出しの見出しレベルは1であるべきである。

アウトライン内の別の見出しリードに続く各見出しは、リードの見出しレベルよりも小さい、等しい、または1つ大きい見出しレベルを持たなければならない。

次の例は不適合である：

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h3>Taste</h3>
  <p>They taste lovely.</p>
 </section>
</body>

これは次のように書くことができ、そして適合することになる：

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
 </section>
</body>

4.3.11.1 見出しレベルとオフセット

headingoffsetコンテンツ属性は、著者に子孫の見出しレベルをオフセットを可能にする。

headingoffset属性が指定される場合、その値は0から8までの妥当な非負整数である値を持たなければならない。

headingresetコンテンツ属性は、真偽属性である。これにより、著者は、見出しオフセットの計算が、その属性をもつ要素を超えて横断するのを防ぐことができる。

要素elementを指定して要素の計算された見出しレベルを取得するには、次のように指定する：

levelを0とする。
elementのローカル名がh1である場合、levelを1に設定する。
elementのローカル名がh2である場合、levelを2に設定する。
elementのローカル名がh3である場合、levelを3に設定する。
elementのローカル名がh4である場合、levelを4に設定する。
elementのローカル名がh5である場合、levelを5に設定する。
elementのローカル名がh6である場合、levelを6に設定する。
Assert：levelが0ではない。
elementで指定された要素の計算された見出しオフセットの取得の結果による増分level。
levelが9より大きい場合、9を返す。
levelを返す。

要素の計算された見出しオフセットを取得するには、要素elementを指定して、次のステップを実行する。返り値は非負整数である。

offsetを0とする。
inclusiveAncestorをelementとする。
inclusiveAncestorがnullでない間：
1. nextOffsetを0とする。
2. inclusiveAncestorがHTML要素であり、かつheadingoffset属性を持つ場合、非負整数を解析するためのルールを使用してその値を解析する。
  
  値の解析結果がエラーでない場合、nextOffsetにその値を設定する。
3. Increment offset by nextOffset.
4. inclusiveAncestorがHTML要素であり、かつheadingreset属性を持つ場合、offsetを返す。
5. If inclusiveAncestor's parent is a shadow root, then set inclusiveAncestor to that shadow root's host and continue.
6. Set inclusiveAncestor to inclusiveAncestor's parent element.
offsetを返す。

この例では、headingoffset、headingreset、およびaria-level属性の組み合わせと、それぞれの見出しレベルを示すコメントを示している。この例は、さまざまな組み合わせを示したものであり、ベストプラクティスの例ではない。

<body>
  <main>
   <h1>This is a heading level 1</h1>
   <article headingoffset="1">
    <h1>This is a heading level 2</h1>
    <section headingoffset="1">
     <h1>This is a heading level 3</h1>
     <dialog headingreset>
      <h1>This is a heading level 1</h1>
     </dialog>
    </section>
   </article>
   <h1 aria-level="2">This is a heading level 2</h1>
  </main>
</body>

4.3.11.2 サンプルアウトライン

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

<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 August 2016</p>
  </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>

...結果として3つの文書見出しが作成される：

<h1>HTML: Living Standard</h1>
<h2>Table of contents</h2>.
<h2>First section</h2>.

アウトラインのレンダリングビューは次のようになるだろう：

Top-level section with the heading "HTML: Living Standard" and two subsections; "Table of contents" and "First section".

まず、これが文書であり、これは非常に短い章とサブセクションを持つ本である：

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

そのアウトラインは次のように提示できる：

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要素が見出しではないことに注意する。

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

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

文書のアウトラインは次のように表示できる：

Apples
Bananas
Carambola

header要素は、文書のアウトラインに影響を与えない：

<!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>
  <h2>We're adopting a child!</h2>
 </header>
 <p>As of today, Janine and I have signed the papers to become
 the proud parents of baby Diane! We've been looking forward to
 this day for weeks.</p>
</article>
</html>

文書のアウトラインは次のように表示できる：

Ray's blog
1. We're adopting a child!

次の例は適合しているが、見出しレベルが1である見出しがないために勧められない：

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h2>Apples</h2>
 <p>Pomaceous.</p>
</section>
<section>
 <h2>Bananas</h2>
 <p>Edible.</p>
</section>
<section>
 <h2>Carambola</h2>
 <p>Star.</p>
</section>

文書のアウトラインは次のように表示できる：

1. Apples
2. Bananas
3. Carambola

次の例は適合しているが、最初の見出しの見出しレベルが1ではないために勧められない：

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

文書のアウトラインは次のように表示できる：

1. A plea from our caretakers
Feathers

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

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

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

Shift + ← Left: 前の見出しに移動
Shift + → Right: 次の見出しに移動
Shift + ↑ Up: 現在の見出しのレベルより1つ低いレベルの次の見出しに移動する
Shift + ↓ Down: 現在の見出しのレベルと同じレベルの次の見出しに移動する

4.3.12 使用方法の概要

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

要素	目的
要素	例
`body`	文書のコンテンツ。
`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`	`<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`	文書またはアプリケーションの一般的セクション。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。
`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`	`<nav> <p><a href="/">Home</a> <p><a href="/biog.html">Bio</a> <p><a href="/discog.html">Discog</a> </nav>`
`aside`	`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>`
`h1`–`h6`	見出し
`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>`
`hgroup`	見出しおよび関係のあるコンテンツ。この要素は、小見出し、代替タイトル、またはタグラインを表すコンテンツを含む1つ以上の`p`要素で`h1`–`h6`要素をグループ化するために使用してもよい。
`hgroup`	`<hgroup> <h1>Burning Music</h1> <p>The Guide To Music On The Playa</p> </hgroup> <section> <hgroup> <h1>Main Stage</h1> <p>The Fiction Of A Music Festival</p> </hgroup> <p>If you want to play on a stage, you should bring one.</p> </section> <section> <hgroup> <h1>Loudness!</h1> <p>Questions About Amplified Music</p> </hgroup> <p>Amplifiers up to 300W or 90dB are welcome.</p> </section>`
`header`	前置きまたはナビゲーション補助のグループ。
`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`	最も近い祖先セクショニングコンテンツ要素のフッター、またはそのような祖先がない場合はbody要素のフッター。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。
`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自身である。

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

4.3.8 header要素

4.3.9 footer要素

4.3.10 address要素

4.3.11 見出しとアウトライン

4.3.11.1 見出しレベルとオフセット

4.3.11.2 サンプルアウトライン

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

4.3.12 使用方法の概要

4.3.12.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 `hgroup`要素

4.3.8 `header`要素

4.3.9 `footer`要素

4.3.10 `address`要素