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
、link
、script
、style
、またはtemplate
である場合を除く。body
要素の直後がコメントでない場合、body
要素の終了タグは省略してすることができる。onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
HTMLBodyElement
を使用する。適合文書では、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 >
< h1 itemprop = "headline" > The Very First Rule of Life</ h1 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< footer >
< a itemprop = "discussionUrl" href = "?comments=1" > Show comments...</ a >
</ footer >
</ article >
これは同じブログの投稿であるが、コメントの一部を示す:
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h1 itemprop = "headline" > The Very First Rule of Life</ h1 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< section >
< h1 > Comments</ h1 >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/UserComments" id = "c1" >
< link itemprop = "url" href = "#c1" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Washington</ span >
</ span ></ p >
< p >< time itemprop = "commentTime" datetime = "2009-10-10" > 15 minutes ago</ time ></ p >
</ footer >
< p > Yeah! Especially when talking about your lobbyist friends!</ p >
</ article >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/UserComments" id = "c2" >
< link itemprop = "url" href = "#c2" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Hammond</ span >
</ span ></ p >
< p >< time itemprop = "commentTime" datetime = "2009-10-10" > 5 minutes ago</ time ></ p >
</ footer >
< p > Hey, you have the same first name as me.</ p >
</ article >
</ section >
</ article >
(たとえば、誰がいつ書いたかなど)各コメントに対して情報を与えるためのfooter
の用法に注意すること。たとえばこの場合のように、footer
要素は、適切な場合にそのセクションの先頭に表示することができる。(この場合、header
の使用は、どちらも間違っていないだろう。これは主にオーサリングの好みの問題である。)
この例において、article
要素は、ポータルページ上にウィジェットをホストするために使用される。ウィジェットは、特定のスタイリングおよびスクリプト動作を取得するために、カスタマイズされた組み込み要素として実装される。
<!DOCTYPE HTML>
< html lang = en >
< title > eHome Portal</ title >
< script src = "/scripts/widgets.js" ></ script >
< link rel = stylesheet href = "/styles/main.css" >
< article is = "stock-widget" >
< h1 > Stocks</ h1 >
< table >
< thead > < tr > < th > Stock < th > Value < th > Delta
< tbody > < template > < tr > < td > < td > < td > </ template >
</ table >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article >
< article is = "news-widget" >
< h1 > News</ h1 >
< ul >
< template >
< li >
< p >< img > < strong ></ strong >
< p >
</ template >
</ ul >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article >
section
要素Support in all current engines.
HTMLElement
を使用する。section
要素は、文書またはアプリケーションの一般的セクションを表す。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。
セクションの例は、章、タブ付きのダイアログボックス内のさまざまなタブ付きページ、または論文の番号付きセクションであろう。ウェブサイトのホームページは、はしがき、ニュース、および連絡先情報のセクションに分けることができるだろう。
要素のコンテンツを配給することが理にかなう場合、著者はsection
要素の代わりにarticle
要素を使用するよう推奨される。
section
要素は包括的なコンテナ要素ではない。要素がスタイル付け目的またはスクリプティングの便宜のために必要になった場合のみ、著者は、代わりにdiv
要素を使用するよう推奨される。要素の内容が文書のアウトラインで明示的に記載されるだろう場合のみ、section
要素が適切であるというのが一般的なルールである。
次の例において、2つの短いセクションを含む、リンゴについて(大規模なウェブページの一部)の記事を見てみる。
< article >
< hgroup >
< h1 > Apples</ h1 >
< h2 > Tasty, delicious fruit!</ h2 >
</ hgroup >
< p > The apple is the pomaceous fruit of the apple tree.</ p >
< section >
< h1 > Red Delicious</ h1 >
< p > These bright red apples are the most common found in many
supermarkets.</ p >
</ section >
< section >
< h1 > Granny Smith</ h1 >
< p > These juicy, green apples make a great filling for
apple pies.</ p >
</ section >
</ article >
section
の使用は、特定のセクションが、トップレベル、第二レベル、第三レベルなどであるかどうかを心配することなく、著者がh1
要素をあらゆる場所で使用できること意味することに注目する。
これは、2つのセクションをもつ卒業式のプログラムであり、1つは卒業する人のリスト、もう1つは式の説明である。(この例においてマークアップは、要素間の空白文字の量を最小化するために使用される珍しいスタイルを特徴とする。)
<!DOCTYPE Html>
< Html Lang = En
>< Head
>< Title
> Graduation Ceremony Summer 2022</ Title
></ Head
>< Body
>< H1
> Graduation</ H1
>< Section
>< H1
> Ceremony</ H1
>< P
> Opening Procession</ P
>< P
> Speech by Valedictorian</ P
>< P
> Speech by Class President</ P
>< P
> Presentation of Diplomas</ P
>< P
> Closing Speech by Headmaster</ P
></ Section
>< Section
>< H1
> Graduates</ H1
>< Ul
>< Li
> Molly Carpenter</ Li
>< Li
> Anastasia Luccio</ Li
>< Li
> Ebenezar McCoy</ Li
>< Li
> Karrin Murphy</ Li
>< Li
> Thomas Raith</ Li
>< Li
> Susan Rodriguez</ Li
></ Ul
></ Section
></ Body
></ Html >
この例において、本の著者は、章と付録のようないくつかのセクションをマークアップし、異なるセクションの2つのクラスでヘッダーをスタイル付けするためにCSSを使用している。
< style >
section { border : double medium ; margin : 2 em ; }
section . chapter h1 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h1 { font : small-caps 2 em Roboto , Helvetica Neue , sans-serif ; }
</ style >
< header >
< hgroup >
< h1 > My Book</ h1 >
< h2 > A sample with not much content</ h2 >
</ hgroup >
< p >< small > Published by Dummy Publicorp Ltd.</ small ></ p >
</ header >
< section class = "chapter" >
< h1 > My First Chapter</ h1 >
< p > This is the first of my chapters. It doesn't say much.</ p >
< p > But it has two paragraphs!</ p >
</ section >
< section class = "chapter" >
< h1 > It Continues: The Second Chapter</ h1 >
< p > Bla dee bla, dee bla dee bla. Boom.</ p >
</ section >
< section class = "chapter" >
< h1 > Chapter Three: A Further Example</ h1 >
< p > It's not like a battle between brightness and earthtones would go
unnoticed.</ p >
< p > But it might ruin my story.</ p >
</ section >
< section class = "appendix" >
< h1 > Appendix A: Overview of Examples</ h1 >
< p > These are demonstrations.</ p >
</ section >
< section class = "appendix" >
< h1 > Appendix B: Some Closing Remarks</ h1 >
< p > Hopefully this long example shows that you < em > can</ em > style
sections, so long as they are used to indicate actual sections.</ p >
</ section >
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 >
< h1 > Demos in Exampland</ h1 >
< p > Written by A. N. Other.</ p >
</ header >
< nav >
< ul >
< li >< a href = "#public" > Public demonstrations</ a ></ li >
< li >< a href = "#destroy" > Demolitions</ a ></ li >
...more...
</ ul >
</ nav >
< div >
< section id = "public" >
< h1 > Public demonstrations</ h1 >
< p > ...more...</ p >
</ section >
< section id = "destroy" >
< h1 > Demolitions</ h1 >
< p > ...more...</ p >
</ section >
...more...
</ div >
< footer >
< p >< a href = "?edit" > Edit</ a > | < a href = "?delete" > Delete</ a > | < a href = "?Rename" > Rename</ a ></ p >
</ footer >
</ article >
< footer >
< p >< small > © copyright 1998 Exampland Emperor</ small ></ p >
</ footer >
</ body >
次の例において、ページはリンクが存在する複数の場所を持つが、そのうちの1つのみがナビゲーションセクションとみなされる。
< body itemscope itemtype = "http://schema.org/Blog" >
< header >
< h1 > Wake up sheeple!</ h1 >
< p >< a href = "news.html" > News</ a > -
< a href = "blog.html" > Blog</ a > -
< a href = "forums.html" > Forums</ a ></ p >
< p > Last Modified: < span itemprop = "dateModified" > 2009-04-01</ span ></ p >
< nav >
< h1 > Navigation</ h1 >
< ul >
< li >< a href = "articles.html" > Index of all articles</ a ></ li >
< li >< a href = "today.html" > Things sheeple need to wake up for today</ a ></ li >
< li >< a href = "successes.html" > Sheeple we have managed to wake</ a ></ li >
</ ul >
</ nav >
</ header >
< main >
< article itemprop = "blogPosts" itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h1 itemprop = "headline" > My Day at the Beach</ h1 >
</ header >
< 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 >
< h1 > Switzerland</ h1 >
< p > Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</ p >
</ aside >
次の例は、asideが長い記事でリード文のマークアップに対して使用される様子を示す。
...
< p > He later joined a large company, continuing on the same work.
< q > I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</ q ></ p >
< aside >
< q > People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer. </ q >
</ aside >
< p > Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</ p >
...
以下は、ブログロール(他のブログへのリンク)とブログの反対側のコンテンツにaside
が使用される様子を示す。
< body >
< header >
< h1 > My wonderful blog</ h1 >
< p > My tagline</ p >
</ header >
< aside >
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
< nav >
< h1 > My blogroll</ h1 >
< ul >
< li >< a href = "https://blog.example.com/" > Example Blog</ a >
</ ul >
</ nav >
< nav >
< h1 > Archives</ h1 >
< ol reversed >
< li >< a href = "/last-post" > My last post</ a >
< li >< a href = "/first-post" > My first post</ a >
</ ol >
</ nav >
</ aside >
< aside >
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
< h1 > Twitter Feed</ h1 >
< blockquote cite = "https://twitter.example.net/t31351234" >
I'm on vacation, writing my blog.
</ blockquote >
< blockquote cite = "https://twitter.example.net/t31219752" >
I'm going to go on vacation soon.
</ blockquote >
</ aside >
< article >
<!-- this is a blog post -->
< h1 > My last post</ h1 >
< p > This is my last post.</ p >
< footer >
< p >< a href = "/last-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< article >
<!-- this is also a blog post -->
< h1 > My first post</ h1 >
< p > This is my first post.</ p >
< aside >
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
< h1 > Posting</ h1 >
< p > While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</ p >
</ aside >
< footer >
< p >< a href = "/first-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< footer >
< 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
要素が最も高いランクを持つと言われ、h6
要素が最も低いランクを持ち、同じ名前をもつ2つの要素は等しいランクを持つ。
それぞれの文書のアウトライン(その見出しとセクションの構造)が関係する限りにおいて、次の2つの断片は、セマンティックに等価である:
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< h2 > Diving in</ h2 >
< h2 > Simple shapes</ h2 >
< h2 > Canvas coordinates</ h2 >
< h3 > Canvas coordinates diagram</ h3 >
< h2 > Paths</ h2 >
</ body >
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< section >
< h1 > Diving in</ h1 >
</ section >
< section >
< h1 > Simple shapes</ h1 >
</ section >
< section >
< h1 > Canvas coordinates</ h1 >
< section >
< h1 > Canvas coordinates diagram</ h1 >
</ section >
</ section >
< section >
< h1 > Paths</ h1 >
</ section >
</ body >
著者は、その簡潔さのために前者のスタイルを好むかもしれないし、大量の編集を目の前にして利便性のために後者のスタイルを好むかもしれない。どちらが純粋に最良なのかは、オーサリングスタイルの好みの問題である。
もはやその互換性が必要されない場合に、依然として将来のプルーフィングの一方で、レガシーツールとの互換性のために、2つのスタイルを組み合わせることができる。この3つ目のスニペットはもう一度、前の2つと同じアウトラインを持つ:
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< section >
< h2 > Diving in</ h2 >
</ section >
< section >
< h2 > Simple shapes</ h2 >
</ section >
< section >
< h2 > Canvas coordinates</ h2 >
< section >
< h3 > Canvas coordinates diagram</ h3 >
</ section >
</ section >
< section >
< h2 > Paths</ h2 >
</ section >
</ body >
hgroup
要素Support in all current engines.
h1
、h2
、h3
、h4
、h5
、h6
要素。必要に応じてスクリプトサポート要素と混在する。HTMLElement
を使用する。hgroup
要素は、hgroup
要素のすべてのh1
–h6
の子要素で構成する、セクションの見出しを表す。小見出し、代替タイトル、またはキャッチフレーズのような、要素が複数のレベルを持つ場合、見出しは、h1
–h6
要素の集合をグループ化するために使用する。
任意のそのような要素が存在する場合、またはそうでなければh1
要素(最高ランク)と同じである場合、hgroup
要素のランクは、hgroup
要素の最高位h1
–h6
要素の子孫のランクである。hgroup
要素でヘディングコンテンツのその他のh1
–h6
要素は、小見出しまたは字幕または(補助的な)代替タイトルを示す。
見出しとセクションのセクションは、hgroup
要素が個々のセクションに割り当てられる方法を定義する。
ここでは、妥当な見出しの例をいくつか示す。
< hgroup >
< h1 > The reality dysfunction</ h1 >
< h2 > Space is not the only void</ h2 >
</ hgroup >
< hgroup >
< h1 > Dr. Strangelove</ h1 >
< h2 > Or: How I Learned to Stop Worrying and Love the Bomb</ h2 >
</ hgroup >
これらの例でhgroup
を使用するポイントは、(補助的なタイトルとして機能する)h2
要素が任意のアウトラインで独自のセクションを作成するのを防ぎ、代わりに、別のセクションのタイトルではないが、単にタイトルのグループ内の補助的なタイトルであることを示すために、何らかの方法でアウトラインアルゴリズムからレンダリングされた出力で見られる、h2
のコンテンツをもたらすことにある。
ユーザーインターフェイスの問題であるので、ユーザーエージェントは(たとえば、コンテンツや検索結果の表に)ユーザーインターフェイスで、そのようなマルチレベルの見出しを公開する方法は、実装に公開したままになる。上記の最初の例は、このようにレンダリングすることができる:
The reality dysfunction: Space is not the only void
あるいは、次のようになる:
The reality dysfunction (Space is not the only void)
タイトルが複数行にレンダリングすることができるインターフェイスで、おそらくより大きなフォントサイズで最初の行とともに、次のようにレンダリングすることができる:
The reality dysfunction Space is not the only void
次の2つの例は、2つのh1
の見出しが同じ映画に米国と英国の名前をグループするためにhgroup
要素内で使用することができる方法を示す。
< hgroup >
< h1 > The Avengers</ h1 >
< h1 > Avengers Assemble</ h1 >
</ hgroup >
< hgroup >
< h1 > Avengers Assemble</ h1 >
< h1 > The Avengers</ h1 >
</ hgroup >
上記の最初の例は、映画名が、米国名(主)タイトルとしてThe Avengers、および英国名(補助)代替タイトルとしてAvengers Assembleをもつ、米国の出版でグループ化するだろう方法を示す。上記の2番目の例は、映画名が英国名(主)タイトルとして、および米国名(補助)代替タイトルとしてもつ、英国の出版でグループ化するだろう方法を示す。
両方の場合で、2つのタイトルはタイトルが等価ではないことを示すグループへのhgroup
要素の使用に注意することが重要である。最初のh1
は(主)タイトルを提供する代わりに、2つ目が(補助)代替タイトルを与える。タイトルと代替タイトルの両方が、h1
要素でマークアップされているにもかかわらず、アウトラインアルゴリズム由来の出力のレンダリングされた表示において、hgroup
の2つ目のh1
は、補助的であることを明確に示す何らかの方法で表示される。たとえば:
米国の出版で:
The Avengers (Avengers Assemble)
英国の出版で:
Avengers Assemble (The Avengers)
次の例では、hgroup
要素は、ウィザード形式のダイアログボックス内で2つのレベルの見出しをマークアップするために使用される:
< dialog onclose = "walletSetup.continue(this.returnValue)" >
< hgroup >
< h1 > Wallet Setup</ h1 >
< h2 > Configure your Wallet funding source</ h2 >
</ hgroup >
< p > Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
salesmen you may find in the dungeons, and to pay for mercenaries.</ p >
< p > We support two payment sources:</ p >
< form method = dialog >
< fieldset oninput = "this.getElementsByTagName('input')[0].checked = true" >
< legend > < label > < input type = radio name = payment-type value = cc > Credit Card </ label > </ legend >
< p >< label > Name on card: < input name = cc1 autocomplete = "section-cc cc-name" placeholder = "Y. Name" ></ label >
< p >< label > Card number: < input name = cc2 inputmode = numeric autocomplete = "section-cc cc-number" placeholder = "6331 1019 9999 0016" ></ label >
< p >< label > Expiry Date: < input name = cc3 type = month autocomplete = "section-cc cc-exp" placeholder = "2020-02" ></ label >
< p >< label > Security Code: < input name = cc4 inputmode = numeric autocomplete = "section-cc cc-csc" placeholder = "246" ></ label >
</ fieldset >
< fieldset oninput = "this.getElementsByTagName('input')[0].checked = true" >
< legend > < label > < input type = radio name = payment-type value = bank > Checking Account </ label > </ legend >
< p >< label > Name on account: < input name = bank1 autocomplete = "section-bank cc-name" ></ label >
< p >< label > Routing number: < input name = bank2 inputmode = numeric ></ label >
< p >< label > Account number: < input name = bank3 inputmode = numeric ></ label >
</ fieldset >
< button type = submit value = "back" > ← Back </ button >
< button type = submit value = "next" > Next → </ button >
</ form >
</ dialog >
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 >
< h2 > Living Standard — Last Updated 19 October 2015</ h2 >
</ hgroup >
< dl >
< dt > Participate:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd >
< dt > Commits:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen/commits" > GitHub whatwg/fullscreen/commits</ a ></ dd >
</ dl >
</ header >
header
要素は、セクショニングコンテンツではない。新しいセクションを導入しない。
この例は、ページがh1
要素で与えられたページ見出しと、h2
要素によって与えられた2つのサブセクションを持つ。header
要素はアウトラインアルゴリズムに参加しないため、header
要素の後のコンテンツは、依然としてheader
要素で最後に開始したサブセクションの一部である。
< body >
< header >
< h1 > Little Green Guys With Guns</ h1 >
< nav >
< ul >
< li >< a href = "/games" > Games</ a >
< li >< a href = "/forum" > Forum</ a >
< li >< a href = "/download" > Download</ a >
</ ul >
</ nav >
< h2 > Important News</ h2 > <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
< p > To play today's games you will need to update your client.</ p >
< h2 > Games</ h2 > <!-- this starts a third subsection -->
</ header >
< p > You have three active games:</ p >
<!-- this is still part of the subsection entitled "Games" -->
...
footer
要素Support in all current engines.
header
またはfooter
要素の子孫をもたない。HTMLElement
を使用する。footer
要素は、その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッターを表す。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。
footer
要素がセクション全体を含む場合、付録、索引、長い奥付、冗長なライセンス契約などのコンテンツを表す。
セクションの著者や編集者に対する連絡先情報は、おそらくfooter
内側にそれ自身、address
要素に属する。header
やfooter
の両方に適するだろう署名欄およびその他の情報は、いずれか(またはどちらでもない)に配置できる。これらの要素の主な目的は、著者が維持し、スタイルが容易である自明のマークアップを書くためだけである。これら要素は著者に特定の構造を課すことを意図するものではない。
フッターは必ずしも、セクションの最後に出現する必要はない(通常は最後だが)。
最も近い祖先セクショニングコンテンツまたはセクショニングルート要素がbody要素である場合、これはページ全体に適用される。
footer
要素は、セクショニングコンテンツではない。新しいセクションを導入しない。
これは、一番上と一番下に2つのフッターを持つ、同じコンテンツのページである:
< body >
< footer >< a href = "../" > Back to index...</ a ></ footer >
< hgroup >
< h1 > Lorem ipsum</ h1 >
< h2 > The ipsum of all lorems</ h2 >
</ hgroup >
< p > A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</ p >
< footer >< a href = "../" > Back to index...</ a ></ footer >
</ body >
これは、サイト全体のフッターとセクションフッターの両方に使用されているfooter
要素を示す例である。
<!DOCTYPE HTML>
< HTML LANG = "en" >< HEAD >
< TITLE > The Ramblings of a Scientist</ TITLE >
< BODY >
< H1 > The Ramblings of a Scientist</ H1 >
< ARTICLE >
< H1 > Episode 15</ H1 >
< VIDEO SRC = "/fm/015.ogv" CONTROLS PRELOAD >
< P >< A HREF = "/fm/015.ogv" > Download video</ A > .</ P >
</ VIDEO >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-10-21T18:26-07:00" > on 2009/10/21 at 6:26pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< ARTICLE >
< H1 > My Favorite Trains</ H1 >
< P > I love my trains. My favorite train of all time is a Köf.</ P >
< P > It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</ P >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-09-15T14:54-07:00" > on 2009/09/15 at 2:54pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< FOOTER > <!-- site wide footer -->
< NAV >
< P >< A HREF = "/credits.html" > Credits</ A > —
< A HREF = "/tos.html" > Terms of Service</ A > —
< A HREF = "/index.html" > Blog Index</ A ></ P >
</ NAV >
< P > Copyright © 2009 Gordon Freeman</ P >
</ FOOTER >
</ BODY >
</ HTML >
一部のサイトのデザインは、時々"分厚いフッター"と呼ばれるものを持つ―フッターは、画像、他の記事へのリンク、フィードバック送信用ページへのリンク、特別オファーなど、いくつかの点で、フッターで全体の"フロントページ"ともいえる大量の素材を含む。
この断片は、"分厚いフッター"をもつサイト上でページの最下部を示す:
...
< footer >
< nav >
< section >
< h1 > Articles</ h1 >
< p >< img src = "images/somersaults.jpeg" alt = "" > Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. < a href = "articles/somersaults/1" > Part
1</ a > · < a href = "articles/somersaults/2" > Part 2</ a ></ p >
< p >< img src = "images/kindplus.jpeg" > Tired of walking on the edge of
a clif<!-- sic --> ? Our guest writer Lara shows you how to bumble
your way through the bars. < a href = "articles/kindplus/1" > Read
more...</ a ></ p >
< p >< img src = "images/crisps.jpeg" > The chips are down, now all
that's left is a potato. What can you do with it? < a
href = "articles/crisps/1" > Read more...</ a ></ p >
</ section >
< ul >
< li > < a href = "/about" > About us...</ a >
< li > < a href = "/feedback" > Send feedback!</ a >
< li > < a href = "/sitemap" > Sitemap</ a >
</ ul >
</ nav >
< p >< small > Copyright © 2015 The Snacker —
< a href = "/tos" > Terms of Service</ a ></ small ></ p >
</ footer >
</ body >
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 >
セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。同等以上のランクに属する後続の見出しは、新しい(暗黙の)セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。どちらの場合も、要素は暗黙のセクションの見出しを表す。
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 >
構造は次のようになる:
body
セクションの見出し)section
セクションの見出し)後の段落("Grunt")がトップレベルに戻るように、section
がそれ以前の暗黙のセクションを終了する様子に注目する。
セクションは、任意のランクの見出しを含んでもよいが、著者は、h1
要素のみを使用する、またはセクションのネストレベルに対して適切なランクの要素を使用するかのいずれかが強く推奨される。
著者はまた、セクショニングコンテンツの1つの要素に複数の見出しを持つことによって生成される暗黙のセクションに頼る代わりに、セクショニングコンテンツの要素内のセクションを明示的に包むことを推奨される。
たとえば、以下は正しい:
< body >
< h4 > Apples</ h4 >
< p > Apples are fruit.</ p >
< section >
< h2 > Taste</ h2 >
< p > They taste lovely.</ p >
< h6 > Sweet</ h6 >
< p > Red apples are sweeter than green ones.</ p >
< h1 > Color</ h1 >
< p > Apples come in various colors.</ p >
</ section >
</ body >
ただし、同じ文書をより明確に表現できるだろう。
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h2 > Taste</ h2 >
< p > They taste lovely.</ p >
< section >
< h3 > Sweet</ h3 >
< p > Red apples are sweeter than green ones.</ p >
</ section >
</ section >
< section >
< h2 > Color</ h2 >
< p > Apples come in various colors.</ p >
</ section >
</ body >
上記の文書の両方は、セマンティックに同じであり、適合ユーザーエージェントで同じアウトラインを生成する。
この3番目の例はまた、セマンティックに同じであり、(たとえば、セクションが編集で移動される場合)より簡単にメンテナンスできるかもしれない:
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h1 > Taste</ h1 >
< p > They taste lovely.</ p >
< section >
< h1 > Sweet</ h1 >
< p > Red apples are sweeter than green ones.</ p >
</ section >
</ section >
< section >
< h1 > Color</ h1 >
< p > Apples come in various colors.</ p >
</ section >
</ body >
この最後の例は、レガシーブラウザーでレンダリングされるように明示的なスタイル規則が必要になるだろう。CSSのサポートなしでレガシーブラウザーは、トップレベルの見出しとして、すべての見出しをレンダリングするだろう。
セクショニングコンテンツ要素またはセクショニングルート要素に対するアウトラインは、1つ以上の潜在的にネストされたセクションのリストで構成される。アウトラインが作成された要素は、アウトラインの所有者であると言われる。
セクションは、元のDOMツリーで一部のノードに対応するコンテナである。各セクションは、セクションに関連付けられた1つの見出しを持つことができ、さらにネストされた任意の数のセクションを含むことができる。(アウトラインにおけるセクションは、一部はそのような要素に対応してもよいが、section
要素ではない―要素は単に概念的なセクションである。)
次のマークアップ断片で:
< body >
< hgroup id = "document-title" >
< h1 > HTML</ h1 >
< h2 > Living Standard — Last Updated 12 August 2016</ h2 >
</ hgroup >
< p > Some intro to the document.</ p >
< h2 > Table of contents</ h2 >
< ol id = toc > ...</ ol >
< h2 > First section</ h2 >
< p > Some intro to the first section.</ p >
</ body >
これはbody
ノード(そして、全体の文書)に対して作成されている以下のアウトラインをもたらす:
セクションは、body
ノードに対して作成される。
Associated with heading <hgroup id="document-title">...</hgroup>
consisting of primary heading <h1>HTML</h1>
and secondary heading <h2>Living Standard — Last Updated 12 August 2016</h2>
.
Also associated with the paragraph <p>Some intro to the document.</p>
(though it likely would not be shown in a rendered view of the outline).
ネストされたセクション:
セクションは1番目のh2
要素を示唆する。
Associated with heading <h2>Table of contents</h2>
.
Also associated with the ordered list <ol id=toc>...</ol>
(though it likely would not be shown in a rendered view of the outline).
ネストされたセクションはない。
セクションは2番目のh2
要素を示唆する。
Associated with heading <h2>First section</h2>
.
Also associated with the paragraph <p>Some intro to the first section.</p>
(though it likely would not be shown in a rendered view of the outline).
ネストされたセクションはない。
次の画像は、アウトラインのレンダリングされたビューがどのように見えるかを示す。
以下の文書は、アウトラインアルゴリズムの簡単なアプリケーションを示す。最初に、非常に短い章とサブセクションをもつ本の文書を以下に示す:
<!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 >
この本は、以下のアウトラインを形成する:
title
要素はアウトラインに関係しないことに注意する。
これは類似の文書があるが、今回は同じ効果を得るためにsection
要素を使用している:
<!DOCTYPE HTML>
< html lang = en >
< title > The Tax Book (all in one page)</ title >
< h1 > The Tax Book</ h1 >
< section >
< h1 > Earning money</ h1 >
< p > Earning money is good.</ p >
< section >
< h1 > Getting a job</ h1 >
< p > To earn money you typically need a job.</ p >
</ section >
</ section >
< section >
< h1 > Spending money</ h1 >
< p > Spending is what money is mainly used for.</ p >
< section >
< h1 > Cheap things</ h1 >
< p > Buying cheap things often not cost-effective.</ p >
</ section >
< section >
< h1 > Expensive things</ h1 >
< p > The most expensive thing is often not the most cost-effective either.</ p >
</ section >
</ section >
< section >
< h1 > Investing money</ h1 >
< p > You can lend your money to other people.</ p >
</ section >
< section >
< h1 > Losing money</ h1 >
< p > If you spend money or invest money, sooner or later you will lose money.
< section >
< h1 > Poor judgement</ h1 >
< p > Usually if you lose money it's because you made a mistake.</ p >
</ section >
</ section >
この本は、同じアウトラインを形成する:
文書は、複数のトップレベルの見出しを含めることができる:
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< h1 > Apples</ h1 >
< p > Pomaceous.</ p >
< h1 > Bananas</ h1 >
< p > Edible.</ p >
< h1 > Carambola</ h1 >
< p > Star.</ p >
これは3つのトップレベルのセクションから構成される次のような単純なアウトラインを形成する:
事実上、body
要素は3つに分割される。
h1
–h6
モデルとsection
/h1
モデルの両方を混合することは、直感的でない結果をもたらすかもしれない。
正確な前の例だがsection
に包まれた(暗黙の)body
のコンテンツをもつ、以下の例を考慮してみる:
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< section >
< h1 > Apples</ h1 >
< p > Pomaceous.</ p >
< h1 > Bananas</ h1 >
< p > Edible.</ p >
< h1 > Carambola</ h1 >
< p > Star.</ p >
</ section >
アウトラインの結果は次のようになる:
1つのsection
要素のみがあるにもかかわらず3つのサブセクションが生じるため、この結果は直感的でないものとして記載される。事実上、直前の例で暗黙のbody
要素と同様に、section
は3つに分かれる。
(この例において、明示的な見出しを持たないため、"(untitled page)"は、body
要素に対して暗黙的に指定される。)
見出しは、他のセクションを超えてくることはない。したがって、次の例において、最初のh1
は、実際にページヘッダーを記述するのではなく、ページの後半のヘッダーについて説明する。
<!DOCTYPE HTML>
< html lang = en >
< title > Feathers on The Site of Encyclopedic Knowledge</ title >
< section >
< h1 > A plea from our caretakers</ h1 >
< p > Please, we beg of you, send help! We're stuck in the server room!</ p >
</ section >
< h1 > Feathers</ h1 >
< p > Epidermal growths.</ p >
アウトラインの結果は次のようになる:
このように、article
要素がnav
ブロックで始まりかつ単に後でその見出しを持つ場合、結果はnav
ブロックがアウトラインで残りのarticle
部分と同じセクションの一部ではないものである。たとえば、次の文書を取る:
<!DOCTYPE HTML>
< html lang = "en" >
< title > We're adopting a child! — Ray's blog</ title >
< h1 > Ray's blog</ h1 >
< article >
< header >
< nav >
< a href = "?t=-1d" > Yesterday</ a > ;
< a href = "?t=-7d" > Last week</ a > ;
< a href = "?t=-1m" > Last month</ a >
</ nav >
< h1 > We're adopting a child!</ h1 >
</ header >
< 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 >
アウトラインの結果は次のようになる:
Also worthy of note in this example is that the header
element has no effect whatsoever on the document outline.
hgroup
要素は副見出しに対して使用することができる。たとえば:
<!DOCTYPE HTML>
< html lang = "en" >
< title > Chronotype: CS Student</ title >
< hgroup >
< h1 > The morning </ h1 >
< h2 > 06:00 to 12:00 </ h2 >
</ hgroup >
< p > We sleep.</ p >
< hgroup >
< h1 > The afternoon </ h1 >
< h2 > 12:00 to 18:00 </ h2 >
</ hgroup >
< p > We study.</ p >
< hgroup >
< h2 > Additional Commentary</ h2 >
< h3 > Because not all this is necessarily true</ h3 >
< h6 > Ok it's almost certainly not true</ h6 >
</ hgroup >
< p > Yeah we probably play, rather than study.</ p >
< hgroup >
< h1 > The evening </ h1 >
< h2 > 18:00 to 00:00 </ h2 >
</ hgroup >
< p > We play.</ p >
< hgroup >
< h1 > The night </ h1 >
< h2 > 00:00 to 06:00 </ h2 >
</ hgroup >
< p > We play some more.</ p >
</ html >
アウトラインの結果は次のようになる:
ほとんどのインターフェイスの問題として、正確にこれはユーザーエージェントによって表される方法は、実装上の好みの問題として残されるが、重要な部分はhgroup
の子孫h1
–h6
要素が、要素の見出し由来のものであるということである。したがって、次は同様に妥当になる:
しかし、次のようになる:
次はまた、ほとんどのコンテキストであまり実用的ではないが、妥当である:
The morning
06:00 to 12:00
The afternoon
12:00 to 18:00
Additional Commentary
Because not all this is necessarily true
Ok it's almost certainly not true
The evening
18:00 to 00:00
The night
00:00 to 06:00
ユーザーエージェントは、ユーザーにナビゲーションを支援するためにするためにページのアウトラインを公開することを勧める。これは、スクリーンリーダーなどの非視覚的なメディアに対して特に当てはまる。
しかし、セクショニングコンテンツを誤用する著者から生じる困難を緩和するために、ユーザーエージェントは、単独でヘディングコンテンツを使用してページをナビゲートするモードを提供することも勧める。
たとえば、ユーザーエージェントは、次のように矢印キーを対応付けることができる:
さらに加えて、ユーザーエージェントは、セクションのアウトラインの深さにかかわらずかつ見出しなしのセクションを無視して、ヘディングコンテンツの前または次の要素にナビゲートするjおよびkキーを対応付けることができる。
要素 | 目的 |
---|---|
例 | |
body | 文書のコンテンツ。 |
| |
article | 文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結したもの。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、対話的なウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。 |
| |
section | 文書またはアプリケーションの一般的セクション。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。 |
| |
nav | 他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部。 |
| |
aside | aside 要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクション。このようなセクションは、活版印刷でサイドバーとして表現されることがよくある。 |
| |
h1 –h6 | セクションの見出し |
| |
hgroup | hgroup 要素のすべてのh1 –h6 の子要素で構成する、セクションの見出し。小見出し、代替タイトル、またはキャッチフレーズのような、要素が複数のレベルを持つ場合、見出しは、h1 –h6 要素の集合をグループ化するために使用する。 |
| |
header | 前置きまたはナビゲーション補助のグループ。 |
| |
footer | その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッター。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。 |
|
section
は、何か別のものの一部を形成する。article
は自分自身である。しかし、どっちがどっちか分かるだろうか?たいてい真の答えは"著者の意図に依存する"である。
たとえば、"これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる"とだけ述べた"グラニースミス"の章のある本を想像してみよう。(多分)他のリンゴの種類の章が多数あるため、これはsection
だろう。
一方で、つぶやきやredditのコメント、Tumblrのポストや単に広告に分類される新聞を想像してみよう。"グラニースミス。これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる。"全部があったので、article
だろう。