Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
Support in all current engines.
body要素Support in all current engines.
html要素の2番目の要素として。body要素内の最初のものがASCII空白文字またはコメントでない場合、body要素の開始タグは省略することができる。ただし、body要素内の最初のものがmeta、noscript、link、script、styleまたはtemplate要素である場合を除く。body要素の直後がコメントでない場合、body要素の終了タグは省略してすることができる。onafterprintonbeforeprintonbeforeunloadonhashchangeonlanguagechangeonmessageonmessageerroronofflineononlineonpagehideonpageshowonpopstateonrejectionhandledonstorageonunhandledrejectiononunloadHTMLBodyElementを使用する。適合文書では、1つのbody要素のみが存在する。document.body IDL属性は、文書のbody要素に簡単にアクセスできるスクリプトを提供する。
body要素は、Windowオブジェクトのイベントハンドラーの数をイベントハンドラーコンテンツ属性として公開する。また、それらのイベントハンドラーIDL属性を反映する。
body要素で公開されている、Windowを反映するbody要素イベントハンドラーセットによって指定されたWindowオブジェクトのイベントハンドラーは、HTML要素で通常サポートされているのと同じ名前の汎用イベントハンドラーを置き換える。
したがって、たとえば、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 > article要素Support in all current engines.
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 > section要素Support in all current engines.
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 : 2 em ; }
section . chapter h2 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h2 { font : small-caps 2 em 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 > nav要素Support in all current engines.
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 >
< 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 >
< 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 > aside要素Support in all current engines.
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 > h1、h2、h3、h4、h5、h6要素Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
hgroup要素の子として。HTMLHeadingElementを使用する。これらの要素は、そのセクションの見出しを表す。
セマンティックスとこれらの要素の意味は見出しとアウトラインの節で定義される。
これらの要素は、要素名の数字で与えられた見出しレベルを持つ。見出しレベルは、ネストされたセクションのレベルに対応する。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 > 著者は、簡潔さのために前者のスタイルを好むかもしれないし、追加のスタイリングフックのために後者のスタイルを好むかもしれない。どちらが最適かは、純粋に好ましいオーサリングスタイルの問題である。
hgroup要素Support in all current engines.
p要素、その後に1つのh1、h2、h3、h4、h5またはh6要素が続き、その後に0個以上のp要素が続き、任意でスクリプトサポート要素と混合される。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 > header要素Support in all current engines.
headerまたはfooter要素の子孫をもたない。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" -->
...footer要素Support in all current engines.
headerまたはfooter要素の子孫をもたない。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 > address要素Support in all current engines.
header、footer、address要素の子孫を除く。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要素で他の情報と一緒に含まれる。
この例において、フッターは、連絡先情報および著作権情報を含む。
< 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 > h1–h6要素は見出しレベルを持ち、これは要素名の数字で示される。
これらの要素は、見出しを表す。見出しの見出しレベルが低いほど、その見出しが持つ祖先セクションは少なくなる。
アウトラインは、文書内のすべての見出しであり、ツリー順になっている。
アウトラインは、目次を生成する場合など、文書のアウトラインを生成するために使用すべきである。インタラクティブな目次を作成する場合、エントリーはユーザーを関連する見出しにジャンプさせるべきである。
文書に1つ以上の見出しがある場合、アウトライン内の少なくとも1つの見出しの見出しレベルは1であるべきである。
アウトライン内の別の見出しリードに続く各見出しは、リードの見出しレベルよりも小さい、等しい、または1より大きい見出しレベルを持たなければならない。
次の例は不適合である：
< body >
< h4 > Apples</ h4 >
< p > Apples are fruit.</ p >
< section >
< h2 > Taste</ h2 >
< 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 > 次のマークアップ断片で：
< 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>.
アウトラインのレンダリングビューは次のようになるだろう：
まず、これが文書であり、これは非常に短い章とサブセクションを持つ本である：
<!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 > そのアウトラインは次のように提示できる：
文書は、複数のトップレベルの見出しを含めることができる：
<!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 > 文書のアウトラインは次のように表示できる：
<!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 > 文書のアウトラインは次のように表示できる：
次の例は適合しているが、見出しレベルが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ではないために勧められない：
<!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 > 文書のアウトラインは次のように表示できる：
ユーザーエージェントは、ユーザーにナビゲーションを支援するためにするためにページのアウトラインを公開することを勧める。これは、スクリーンリーダーなどの非視覚的なメディアに対して特に当てはまる。
たとえば、ユーザーエージェントは、次のように矢印キーを対応付けることができる：
| 要素 | 目的 |
|---|---|
| 例 | |
body | 文書のコンテンツ。 |
| |
article | 文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結したもの。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、対話的なウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。 |
| |
section | 文書またはアプリケーションの一般的セクション。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。 |
| |
nav | 他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部。 |
| |
aside | aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクション。このようなセクションは、活版印刷でサイドバーとして表現されることがよくある。 |
| |
h1–h6 | A heading |
| |
hgroup | 見出しおよび関係のあるコンテンツ。. この要素は、小見出し、代替タイトル、またはタグラインを表すコンテンツを含む1つ以上のp要素でh1–h6要素をグループ化するために使用してもよい。 |
| |
header | 前置きまたはナビゲーション補助のグループ。 |
| |
footer | 最も近い祖先セクショニングコンテンツ要素のフッター、またはそのような祖先がない場合はbody要素のフッター。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。 |
|
sectionは、何か別のものの一部を形成する。articleは自分自身である。しかし、どっちがどっちか分かるだろうか？たいてい真の答えは"著者の意図に依存する"である。
たとえば、"これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる"とだけ述べた"グラニースミス"の章のある本を想像してみよう。（多分）他のリンゴの種類の章が多数あるため、これはsectionだろう。
一方で、つぶやきやredditのコメント、Tumblrのポストや単に広告に分類される新聞を想像してみよう。"グラニースミス。これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる。"全部があったので、articleだろう。