Edition for Web Developers — Last Updated 29 August 2024
p
要素Support in all current engines.
p
要素がaddress
、article
、aside
、blockquote
、details
、div
、dl
、fieldset
、figcaption
、figure
、footer
、form
、h1
、h2
、h3
、h4
、h5
、h6
、header
、hgroup
、hr
、main
、menu
、nav
、ol
、p
、pre
、search
, section
, table
, もしくはul
要素の直後に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がa
, audio
, del
, ins
, map
, noscript
もしくは video
要素、または自律カスタム要素でないHTML要素である場合、p
要素の終了タグは省略することができる。HTMLParagraphElement
を使用する。段落は通常、空白行を介して隣接するブロックから物理的に分離されるテキストのブロックによって視覚メディアで表現される一方で、スタイルシートまたはユーザーエージェントは、異なる方法で段落の区切りを提示することを同様に正当化するだろう。例としてインライン段落記号(¶)の使用が挙げられる。
次の例は、適合HTML断片である:
< p > The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.</ p >
< fieldset >
< legend > Personal information</ legend >
< p >
< label > Name: < input name = "n" ></ label >
< label >< input name = "anon" type = "checkbox" > Hide from other users</ label >
</ p >
< p >< label > Address: < textarea name = "a" ></ textarea ></ label ></ p >
</ fieldset >
< p > There was once an example from Femley,< br >
Whose markup was of dubious quality.< br >
The validator complained,< br >
So the author was pained,< br >
To move the error from the markup to the rhyming.</ p >
より具体的な要素がより適切である場合、p
要素を使用すべきでない。
次の例は、技術的に正しい:
< section >
<!-- ... -->
< p > Last modified: 2001-04-23</ p >
< p > Author: fred@example.com</ p >
</ section >
しかし、より望ましいマークアップは次のようになる:
< section >
<!-- ... -->
< footer > Last modified: 2001-04-23</ footer >
< address > Author: fred@example.com</ address >
</ section >
または:
< section >
<!-- ... -->
< footer >
< p > Last modified: 2001-04-23</ p >
< address > Author: fred@example.com</ address >
</ footer >
</ section >
リスト要素(具体的にはol
やul
要素)は、p
要素の子になることはできない。したがって、文書が箇条書きのリストを含む場合、これをどのようにマークアップすべきか疑問に思う人がいるかもしれない。
For instance, this fantastic sentence has bullets relating to
and is further discussed below.
その解決法は、HTML用語において段落を理解することである。これは論理的な概念でなく、構造上の概念である。上記の幻想的な例において、この仕様によって定義された、リストの前に1つ、各中黒に対するもの、そしてリストの後に1つの、5つの段落が実際に存在する。
したがって、上記の例のマークアップは、次のようになる:
< p > For instance, this fantastic sentence has bullets relating to</ p >
< ul >
< li > wizards,
< li > faster-than-light travel, and
< li > telepathy,
</ ul >
< p > and is further discussed below.</ p >
複数の"構造"段落からなる"論理"段落のような便宜的にスタイル付けを望む著者は、p
要素の代わりにdiv
要素を使うことができる。
したがって、たとえば上記の例は次のようになるかもしれない:
< div > For instance, this fantastic sentence has bullets relating to
< ul >
< li > wizards,
< li > faster-than-light travel, and
< li > telepathy,
</ ul >
and is further discussed below.</ div >
この例は、依然として5つの段落構造を持つが、今では著者は、個々に例の各部分を考慮する代わりに、div
のみでスタイル付けできる。
hr
要素Support in all current engines.
select
要素の子として。HTMLHRElement
を使用する。hr
要素は、たとえば、ストーリーのシーンの変更、参照書のセクション内の別の話題に移行するなど段落レベルのテーマの区切りを表す。または、select
要素の一連のオプション間の区切りを表す。
プロジェクトマニュアルからの以下における架空の引用は、セクション内でトピックを分離するためにhr
要素を使用する2つのセクションを示す。
< section >
< h1 > Communication</ h1 >
< p > There are various methods of communication. This section
covers a few of the important ones used by the project.</ p >
< hr >
< p > Communication stones seem to come in pairs and have mysterious
properties:</ p >
< ul >
< li > They can transfer thoughts in two directions once activated
if used alone.</ li >
< li > If used with another device, they can transfer one's
consciousness to another body.</ li >
< li > If both stones are used with another device, the
consciousnesses switch bodies.</ li >
</ ul >
< hr >
< p > Radios use the electromagnetic spectrum in the meter range and
longer.</ p >
< hr >
< p > Signal flares use the electromagnetic spectrum in the
nanometer range.</ p >
</ section >
< section >
< h1 > Food</ h1 >
< p > All food at the project is rationed:</ p >
< dl >
< dt > Potatoes</ dt >
< dd > Two per day</ dd >
< dt > Soup</ dt >
< dd > One bowl per day</ dd >
</ dl >
< hr >
< p > Cooking is done by the chefs on a set rotation.</ p >
</ section >
ピーター・F・ハミルトン作のPandora's Starからの以下の抜粋は、シーンの変化の前にある2つの段落とそれに続く段落を示す。第2段落と第3段落との間の1つの中央にある星を含むギャップによって書籍で表現されるシーンの変化は、ここにhr
要素を使用することで表される。
< p > Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</ p >
< p >< i > Maybe it won't be that bad</ i > , he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</ p >
< hr >
< p > The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</ p >
pre
要素Support in all current engines.
HTMLPreElement
を使用する。pre
要素は、構造が要素によってではなく印刷規則によって表される、整形済みテキストのブロックを表す。
HTML構文において、pre
要素の開始タグの直後にある冒頭の改行文字は取り除かれる。
pre
要素を使用できるケースの一部の例:
著者は、音声合成装置、点字ディスプレイなどのユーザーの場合に、書式設定が失われたときに整形済みテキストを体験する方法を検討することが推奨される。アスキーアートのような場合、たとえばテキスト記述などの代替プレゼンテーションは、文書の読者にとって、より普遍的にアクセスできるようになるだろう。
コンピューターコードのブロックを表すために、pre
要素は、code
要素とともに使用できる。コンピューター出力のブロックを表すために、pre
要素は、samp
要素とともに使用できる。同様に、kbd
要素は、ユーザーが入力するテキストを示すために、pre
要素内で使用できる。
次の断片において、コンピューターコードのサンプルが提示される。
< p > This is the < code > Panel</ code > constructor:</ p >
< pre >< code > function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</ code ></ pre >
次の断片において、samp
とkbd
要素は、『ゾークⅠ』のセッションを表示するために、pre
要素のコンテンツで混合される。
< pre >< samp > You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.
></ samp > < kbd > open mailbox</ kbd >
< samp > Opening the mailbox reveals:
A leaflet.
></ samp ></ pre >
以下は、詩自体の本質的な部分を形成する、その独特な書式設定を保持するためにpre
要素を使用する、現代的な詩を示す。
< pre > maxling
it is with a heart
heavy
that i admit loss of a feline
so loved
a friend lost to the
unknown
(night)
~cdr 11dec07</ pre >
blockquote
要素Support in all current engines.
cite
— 編集に関する引用またはより多くの情報源へのリンクHTMLQuoteElement
を使用する。blockquote
要素は別のソースから引用されているセクションを表す。
blockquote
要素内のコンテンツは、別のソースから引用されなければならず、そのアドレスがある場合、cite
属性で引用してもよい。
cite
属性が存在する場合、潜在的にスペースで囲まれた妥当なURLでなければならない。ユーザーエージェントは、ユーザーがそのような引用のリンクをたどることを可能にしてもよいが、これは主に読者のためでなく、(たとえば引用のサイトの使用に関する統計を収集するサーバーサイドスクリプトによってなど)私的使用のために意図される。
blockquote
要素のコンテンツは短縮されてもよく、またテキストの言語に対する従来の方法でコンテキストを追加していてもよい。
たとえば、英語においてこれは、伝統的に角括弧を使用して行われる。"Jane ate the cracker. He then said he liked apples and fish."という文をもつページを考えてみよう。これは次のように引用されるかもしれない:
< blockquote >
< p > [Jane] then said she liked [...] fish.</ p >
</ blockquote >
引用に対する帰属は、もしあれば、blockquote
要素の外側に配置しなければならない。
たとえば、帰属が引用のあとに段落で与えられる:
< blockquote >
< p > I contend that we are both atheists. I just believe in one fewer
god than you do. When you understand why you dismiss all the other
possible gods, you will understand why I dismiss yours.</ p >
</ blockquote >
< p > — Stephen Roberts</ p >
以下の例は、帰属を示す他の方法を示す。
これは、blockquote
要素は、その属性(これは引用の一部ではなく、したがってblockquote
要素自身の内部に属さない)への引用を明確に関連付けるfigure
要素とそのfigcaption
と組み合わせて使用される:
< figure >
< blockquote >
< p > The truth may be puzzling. It may take some work to grapple with.
It may be counterintuitive. It may contradict deeply held
prejudices. It may not be consonant with what we desperately want to
be true. But our preferences do not determine what's true. We have a
method, and that method helps us to reach not absolute truth, only
asymptotic approaches to the truth — never there, just closer
and closer, always finding vast new oceans of undiscovered
possibilities. Cleverly designed experiments are the key.</ p >
</ blockquote >
< figcaption > Carl Sagan, in "< cite > Wonder and Skepticism</ cite > ", from
the < cite > Skeptical Inquirer</ cite > Volume 19, Issue 1 (January-February
1995)</ figcaption >
</ figure >
次の例は、blockquote
と同時にcite
の使用方法を示す:
< p > His next piece was the aptly named < cite > Sonnet 130</ cite > :</ p >
< blockquote cite = "https://quotes.example.org/s/sonnet130.html" >
< p > My mistress' eyes are nothing like the sun,< br >
Coral is far more red, than her lips red,< br >
...
この例は、フォーラムの投稿で、どの投稿がユーザーが返信しているものかを表示するためにblockquote
を使用する様子を示す。article
要素は、スレッドをマークアップするために各投稿に対して使用される。
< article >
< h1 >< a href = "https://bacon.example.com/?blog=109431" > Bacon on a crowbar</ a ></ h1 >
< article >
< header >< strong > t3yw</ strong > 12 points 1 hour ago</ header >
< p > I bet a narwhal would love that.</ p >
< footer >< a href = "?pid=29578" > permalink</ a ></ footer >
< article >
< header >< strong > greg</ strong > 8 points 1 hour ago</ header >
< blockquote >< p > I bet a narwhal would love that.</ p ></ blockquote >
< p > Dude narwhals don't eat bacon.</ p >
< footer >< a href = "?pid=29579" > permalink</ a ></ footer >
< article >
< header >< strong > t3yw</ strong > 15 points 1 hour ago</ header >
< blockquote >
< blockquote >< p > I bet a narwhal would love that.</ p ></ blockquote >
< p > Dude narwhals don't eat bacon.</ p >
</ blockquote >
< p > Next thing you'll be saying they don't get capes and wizard
hats either!</ p >
< footer >< a href = "?pid=29580" > permalink</ a ></ footer >
< article >
< article >
< header >< strong > boing</ strong > -5 points 1 hour ago</ header >
< p > narwhals are worse than ceiling cat</ p >
< footer >< a href = "?pid=29581" > permalink</ a ></ footer >
</ article >
</ article >
</ article >
</ article >
< article >
< header >< strong > fred</ strong > 1 points 23 minutes ago</ header >
< blockquote >< p > I bet a narwhal would love that.</ p ></ blockquote >
< p > I bet they'd love to peel a banana too.</ p >
< footer >< a href = "?pid=29582" > permalink</ a ></ footer >
</ article >
</ article >
</ article >
この例は、blockquote
要素の内部にp
要素を使用する必要がないことを説明する、短い断片に対するblockquote
要素の用法を示す。
< p > He began his list of "lessons" with the following:</ p >
< blockquote > One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</ blockquote >
< p > He continued with a number of similar points, ending with:</ p >
< blockquote > Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</ blockquote >
< p > We shall now discuss these points...
会話を表現する方法の例は、後の節で示される。この目的でcite
とblockquote
要素を使用することは適切でない。
ol
要素Support in all current engines.
li
要素を含む場合:パルパブルコンテンツ。li
要素およびスクリプトサポート要素。reversed
— リストの逆順の数start
— リストの開始値type
— リストマーカーの種類HTMLOListElement
を使用する。ol
要素は、順序を変更することが文書の意味を変更するような、意図的に順序付けられた項目のリストを表す。
リストの項目は、ツリー順でol
要素のli
要素の子ノードである。
Support in all current engines.
reversed
属性は、真偽属性である。存在する場合、リストが降順リストであることを示す(..., 3, 2, 1)。属性が省略される場合、リストは昇順リストである(1, 2, 3, ...)。
存在する場合、start
属性は、妥当な整数でなければならない。これはリストの開始値を決定するために使用される。
type
属性は、重要な場合(たとえば、項目が数字または文字によって参照されることがあるためなど)、リストで使用するマーカーの種類を指定するために使用できる。指定された場合、属性は、次の表の行の1つの最初のセルで与えられた文字の1つと同一となる値を持たなければならない。
キーワード | 状態 | 説明 | 値1-3および3999-4001に対する例 | |||||||
---|---|---|---|---|---|---|---|---|---|---|
1 (U+0031) | decimal | 10進数 | 1. | 2. | 3. | ... | 3999. | 4000. | 4001. | ... |
a (U+0061) | lower-alpha | 小文字のアルファベット | a. | b. | c. | ... | ewu. | ewv. | eww. | ... |
A (U+0041) | upper-alpha | 大文字のアルファベット | A. | B. | C. | ... | EWU. | EWV. | EWW. | ... |
i (U+0069) | lower-roman | 小文字のローマ数字 | i. | ii. | iii. | ... | mmmcmxcix. | i̅v̅. | i̅v̅i. | ... |
I (U+0049) | upper-roman | 大文字のローマ数字 | I. | II. | III. | ... | MMMCMXCIX. | I̅V̅. | I̅V̅I. | ... |
これは、CSSユーザーエージェントにおけるこの属性を実装するために使用されるデフォルトCSSリストスタイルを定義することを可能にする。そうすることは、リスト項目がレンダリングされる方法に影響を与える。
次のマークアップは、順序が重要である所でリストを示しており、したがって、ol
要素は適切である。ul
要素を使用する同じ項目の例を見るにはul
セクションで同等のリストとこのリストを比較する。
< p > I have lived in the following countries (given in the order of when
I first lived there):</ p >
< ol >
< li > Switzerland
< li > United Kingdom
< li > United States
< li > Norway
</ ol >
リストの順序を変更すると、どのように文書の意味が変化するかに注意する。次の例は、最初の2つの項目にある相対順序を変更することで、著者の故郷を変更している:
< p > I have lived in the following countries (given in the order of when
I first lived there):</ p >
< ol >
< li > United Kingdom
< li > Switzerland
< li > United States
< li > Norway
</ ol >
ul
要素Support in all current engines.
li
要素を含む場合:パルパブルコンテンツ。li
要素およびスクリプトサポート要素。HTMLUListElement
を使用する。ul
要素は、項目の順序が重要でない―順序を変更しても、文書の意味を実質的に変えないだろう、項目のリストを表す。
次のマークアップは、順序が重要でないリストを示しており、したがって、ul
要素は適切である。ol
要素を使用する同じ項目の例を見るにはol
セクションで同等のリストとこのリストを比較する。
< p > I have lived in the following countries:</ p >
< ul >
< li > Norway
< li > Switzerland
< li > United Kingdom
< li > United States
</ ul >
リストの順序を変更することが、文書の意味を変更しないことに注意する。上記の断片内の項目はアルファベット順に記載されるが、下記の断片において、文書の意味を変えることなく、2007年における経常収支の大きさの順に与えられる:
< p > I have lived in the following countries:</ p >
< ul >
< li > Switzerland
< li > Norway
< li > United Kingdom
< li > United States
</ ul >
menu
要素Support in all current engines.
li
要素を含む場合:パルパブルコンテンツ。li
要素およびスクリプトサポート要素。HTMLMenuElement
を使用する。menu
要素は、(li
要素で表される)項目の順不同のリストの形式で、そのコンテンツからなるツールバーを表す。各要素はユーザーが実行またはアクティブにできるコマンドを表す。
menu
要素は、順不同のコマンドのリスト("ツールバー")を表現するための、単にul
へのセマンティックな代替手段である。
この例では、一連の編集コマンドを提供するためにテキスト編集アプリケーションはmenu
要素を使用する:
< menu >
< li >< button onclick = "copy()" >< img src = "copy.svg" alt = "Copy" ></ button ></ li >
< li >< button onclick = "cut()" >< img src = "cut.svg" alt = "Cut" ></ button ></ li >
< li >< button onclick = "paste()" >< img src = "paste.svg" alt = "Paste" ></ button ></ li >
</ menu >
従来のツールバーメニューのように見えるようにするスタイルは、アプリケーションによって異なることに注意する。
li
要素Support in all current engines.
ol
要素の内側。ul
要素の内側。menu
要素の内側。li
要素が別のli
要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、li
要素の終了タグは省略することができる。ul
またはmenu
要素の子でない場合:value
— リスト項目の順序値HTMLLIElement
を使用する。li
要素は、リスト項目を表す。親要素がol
、ul
、またはmenu
要素の場合、要素は、それらの要素に対して定義されるような、親要素のリスト項目である。そうでなければ、リスト項目は、他のli
要素にリスト関連の関係を定義されていない。
存在する場合、value
属性は、妥当な整数でなければならない。li
のリストオーナーがol
要素である場合、リスト項目の順序値を決定するために使用される。
次の例は、トップ10の映画が(逆順で)記載される。リストがfigure
要素とfigcaption
要素を使用して、タイトルを与えられる様子に注意する。
< figure >
< figcaption > The top 10 movies of all time</ figcaption >
< ol >
< li value = "10" >< cite > Josie and the Pussycats</ cite > , 2001</ li >
< li value = "9" >< cite lang = "sh" > Црна мачка, бели мачор</ cite > , 1998</ li >
< li value = "8" >< cite > A Bug's Life</ cite > , 1998</ li >
< li value = "7" >< cite > Toy Story</ cite > , 1995</ li >
< li value = "6" >< cite > Monsters, Inc</ cite > , 2001</ li >
< li value = "5" >< cite > Cars</ cite > , 2006</ li >
< li value = "4" >< cite > Toy Story 2</ cite > , 1999</ li >
< li value = "3" >< cite > Finding Nemo</ cite > , 2003</ li >
< li value = "2" >< cite > The Incredibles</ cite > , 2004</ li >
< li value = "1" >< cite > Ratatouille</ cite > , 2007</ li >
</ ol >
</ figure >
マークアップはまた、ol
要素にreversed
属性を使用して、次のように記述できる:
< figure >
< figcaption > The top 10 movies of all time</ figcaption >
< ol reversed >
< li >< cite > Josie and the Pussycats</ cite > , 2001</ li >
< li >< cite lang = "sh" > Црна мачка, бели мачор</ cite > , 1998</ li >
< li >< cite > A Bug's Life</ cite > , 1998</ li >
< li >< cite > Toy Story</ cite > , 1995</ li >
< li >< cite > Monsters, Inc</ cite > , 2001</ li >
< li >< cite > Cars</ cite > , 2006</ li >
< li >< cite > Toy Story 2</ cite > , 1999</ li >
< li >< cite > Finding Nemo</ cite > , 2003</ li >
< li >< cite > The Incredibles</ cite > , 2004</ li >
< li >< cite > Ratatouille</ cite > , 2007</ li >
</ ol >
</ figure >
li
要素の内側の見出し要素(たとえばh1
)を含むことは適合するが、それはおそらく著者が意図したセマンティックスを伝えることはない。見出しは新しいセクションを開始し、リストの見出しが暗黙的に複数のセクションにまたがるようにリストを分割する。
dl
要素Support in all current engines.
dt
要素の後に来る1つ以上のdd
要素からなり、任意でスクリプトサポート要素と混合される0個以上のグループ。div
要素。HTMLDListElement
を使用する。dl
要素は、0個以上の名前-値グループ(記述リスト)から成る連想リストを表す。名前-値グループは、dt
およびdd
要素の子、ならびにdiv
要素の子であるdt
およびdd
要素以外のすべてのノードを拒否し、1つ以上の名前(dt
要素、場合によりdiv
要素の子として)に続き1つ以上の値(dd
要素、場合によりdiv
要素の子として)で構成されなければならない。単一のdl
要素内で、それぞれの名前に対して複数のdt
要素が存在すべきでない。
名前-値グループは、用語とその定義、メタデータの見出しや値、質問と回答、または名前-値のデータのグループであってもよい。
グループ内の値は、代替手段である。同じ値の一部を形成する複数の段落がすべて同じdd
要素内に指定されなければならない。
グループ、および各グループ内の名前と値のリストの順序は、意味があってもよい。
Microdata属性、またはグループ全体に適用される他のグローバル属性または単にスタイル目的でグループに注釈付するために、dl
内の各グループは、div
要素で包むことができる。これは、dl
要素のセマンティックスを変更しない。
次の例は、1つのエントリー("Authors")が、2つの値("John"と"Luke")にリンクされる。
< dl >
< dt > Authors
< dd > John
< dd > Luke
< dt > Editor
< dd > Frank
</ dl >
次の例は、1つの定義が2つの用語にリンクされる。
< dl >
< dt lang = "en-US" > < dfn > color</ dfn > </ dt >
< dt lang = "en-GB" > < dfn > colour</ dfn > </ dt >
< dd > A sensation which (in humans) derives from the ability of
the fine structure of the eye to distinguish three differently
filtered analyses of a view. </ dd >
</ dl >
次の例は、ある種のメタデータをマークアップするdl
要素の使用例を示す。例の最後で、1つのグループは、2つのメタデータラベル("Authors"と"Editors")と2つの値("Robert Rothman"と"Daniel Jackson")を持つ。この例はまた、スタイリングを支援するために、dt
とdd
要素のグループの周囲にdiv
要素を使う。
< dl >
< div >
< dt > Last modified time </ dt >
< dd > 2004-12-23T23:33Z </ dd >
</ div >
< div >
< dt > Recommended update interval </ dt >
< dd > 60s </ dd >
</ div >
< div >
< dt > Authors </ dt >
< dt > Editors </ dt >
< dd > Robert Rothman </ dd >
< dd > Daniel Jackson </ dd >
</ div >
</ dl >
次の例は、一連の命令を与えるために使われるdl
要素を示す。ここで、命令の順序が重要である(他の例において、ブロックの順序は重要ではなかった)。
< p > Determine the victory points as follows (use the
first matching case):</ p >
< dl >
< dt > If you have exactly five gold coins </ dt >
< dd > You get five victory points </ dd >
< dt > If you have one or more gold coins, and you have one or more silver coins </ dt >
< dd > You get two victory points </ dd >
< dt > If you have one or more silver coins </ dt >
< dd > You get one victory point </ dd >
< dt > Otherwise </ dt >
< dd > You get no victory points </ dd >
</ dl >
次の断片は、用語集として使用されるdl
要素を示す。定義されている単語を示すためのdfn
の使用に注意する。
< dl >
< dt >< dfn > Apartment</ dfn > , n.</ dt >
< dd > An execution context grouping one or more threads with one or
more COM objects.</ dd >
< dt >< dfn > Flat</ dfn > , n.</ dt >
< dd > A deflated tire.</ dd >
< dt >< dfn > Home</ dfn > , n.</ dt >
< dd > The user's login directory.</ dd >
</ dl >
この例は、フレンチレストランでアイスクリームデザートを注釈付けするために、div
要素と共に、dl
要素でmicrodata属性を使用する。
< dl >
< div itemscope itemtype = "http://schema.org/Product" >
< dt itemprop = "name" > Café ou Chocolat Liégeois
< dd itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
< data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd itemprop = "description" >
2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly
</ div >
< div itemscope itemtype = "http://schema.org/Product" >
< dt itemprop = "name" > Américaine
< dd itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
< data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd itemprop = "description" >
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
</ div >
</ dl >
div
要素のないマークアップは、次のように、項目をもつdd
要素内のデータをリンクするためにitemref
属性を使用する必要がある。
< dl >
< dt itemscope itemtype = "http://schema.org/Product" itemref = "1-offer 1-description" >
< span itemprop = "name" > Café ou Chocolat Liégeois</ span >
< dd id = "1-offer" itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
< data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd id = "1-description" itemprop = "description" >
2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly
< dt itemscope itemtype = "http://schema.org/Product" itemref = "2-offer 2-description" >
< span itemprop = "name" > Américaine</ span >
< dd id = "2-offer" itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
< data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd id = "2-description" itemprop = "description" >
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
</ dl >
dl
要素は、会話をマークアップするのに不適切である。会話のマークアップする方法の例も参照のこと。
dt
要素Support in all current engines.
dl
要素の内部でdd
またはdt
要素の前。dl
要素の子であるdiv
要素内のdd
またはdt
要素の前。header
、footer
、セクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。dt
要素が別のdt
要素またはdd
要素の直後に存在する場合、dt
要素の終了タグは省略することができる。HTMLElement
を使用する。dt
要素は、記述リスト(dl
要素)内の用語・説明グループの一部である、用語あるいは名前を表す。
dl
要素で使用された場合、dt
要素自身は、その内容が定義されている用語であることを示すものではないが、これはdfn
要素を用いて示すことができる。
この例では、質問に対するdt
要素と回答に対するdd
要素を用いてマークアップされるよくある質問(FAQ)のリストを示す。
< article >
< h1 > FAQ</ h1 >
< dl >
< dt > What do we want?</ dt >
< dd > Our data.</ dd >
< dt > When do we want it?</ dt >
< dd > Now.</ dd >
< dt > Where is it?</ dt >
< dd > We are not sure.</ dd >
</ dl >
</ article >
dd
要素Support in all current engines.
dl
要素の内側でdt
またはdd
の後。dl
要素の子であるdiv
要素内のdd
またはdt
要素の後。dd
要素が別のdd
要素またはdt
要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、dd
要素の終了タグは省略してもよい。HTMLElement
を使用する。dd
要素は、記述リスト(dl
要素)内の用語・説明グループの一部である、説明、定義、あるいは値を表す。
dl
は辞書のように、語彙リストを定義するために使用することができる。以下の例において、dfn
とともにdt
で与えられる各エントリーは、定義の様々な部分を示す、複数のdd
を持つ。
< dl >
< dt >< dfn > happiness</ dfn ></ dt >
< dd class = "pronunciation" > /ˈhæpinəs/</ dd >
< dd class = "part-of-speech" >< i >< abbr > n.</ abbr ></ i ></ dd >
< dd > The state of being happy.</ dd >
< dd > Good fortune; success. < q > Oh < b > happiness</ b > ! It worked!</ q ></ dd >
< dt >< dfn > rejoice</ dfn ></ dt >
< dd class = "pronunciation" > /rɪˈdʒɔɪs/</ dd >
< dd >< i class = "part-of-speech" >< abbr > v.intr.</ abbr ></ i > To be delighted oneself.</ dd >
< dd >< i class = "part-of-speech" >< abbr > v.tr.</ abbr ></ i > To cause one to be delighted.</ dd >
</ dl >
figure
要素Support in all current engines.
figcaption
要素の後に続くフローコンテンツ。figcaption
要素。HTMLElement
を使用する。figure
要素は、任意でキャプションをもつ(完全な文のような)自己完結型であり、一般に文書の主フローから単独のユニットとして参照されるフローコンテンツを表す。
この文脈において"自己完結型"は、必ずしも独立したものを意味する必要はない。たとえば、段落内の各文は自己完結型である。文の一部である画像は、figure
に不適切だろうが、画像で作られた完全な文は適切だろう。
よってこの要素はイラスト、図、写真、コードリストなどに注釈を付けるために使用できる。
figure
がキャプションで(たとえば図番号で)figureを識別することによって文書の主要コンテンツから参照する場合、たとえば、文書のフローに影響を与えることなくページの横へ、専用のページへ、または付録へなど、文書の主要コンテンツから容易に離れられるようなコンテンツを可能にする。
たとえば、"次の図が示すように"あるいは"上の写真において"の次に図に移動するなど、figure
要素がその相対位置によって参照される場合、ページの意味を混乱させるだろう。著者は、ページがページの意味に影響を与えることなく簡単に再スタイル付けできるように、そのような相対参照を使用するよりもむしろ、図を参照するためのラベルの使用を検討することを推奨する。
要素の子figcaption
要素がもしあれば、figure
要素のコンテンツのキャプションを表す。子figcaption
要素が存在しない場合、キャプションは存在しない。
figure
要素のコンテンツは、周囲のフローの一部である。たとえば画像共有サイト上の写真など、ページの目的が数字を表示することである場合、figure
およびfigcaption
要素は明示的にその図のキャプションを提供するために使用できる。わずかに関連する、あるいは周囲のフローよりも分離する目的を提供するコンテンツに対しては、aside
要素が使用されるべきである(そしてそれ自体にfigure
を包むことができる)。たとえば、article
からのコンテンツを繰り返すリード文は、figure
に比べ、aside
がより適切であろう。リード文はコンテンツの一部ではないので、読者を魅了するまたは重要なトピックを強調する目的に対してコンテンツの繰り返しである。
この例は、コードリストをマークアップするためのfigure
要素を示す。
< p > In < a href = "#l4" > listing 4</ a > we see the primary core interface
API declaration.</ p >
< figure id = "l4" >
< figcaption > Listing 4. The primary core interface API declaration.</ figcaption >
< pre >< code > interface PrimaryCore {
boolean verifyDataLine();
undefined sendData(sequence< byte> data);
undefined initSelfDestruct();
}</ code ></ pre >
</ figure >
< p > The API is designed to use UTF-8.</ p >
これは(ギャラリー内のような)ページの主コンテンツである写真をマークアップするfigure
要素である。
<!DOCTYPE HTML>
< html lang = "en" >
< title > Bubbles at work — My Gallery™</ title >
< figure >
< img src = "bubbles-work.jpeg"
alt = "Bubbles, sitting in his office chair, works on his
latest project intently." >
< figcaption > Bubbles at work</ figcaption >
</ figure >
< nav >< a href = "19414.html" > Prev</ a > — < a href = "19416.html" > Next</ a ></ nav >
この例において、figureにない画像にくわえて、figureにある画像と動画が見られる。自己完結型のユニットではないので、最初の画像はリテラルに例の第2文の一部である。したがって、figure
は不適切であろう。
< h2 > Malinko's comics</ h2 >
< p > This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:
< blockquote >
< img src = "promblem-packed-action.png" alt = "ROUGH COPY! Promblem-Packed Action!" >
</ blockquote >
< p > ...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.
< figure >
< img src = "ex-a.png" alt = "Two squiggles on a dirty piece of paper." >
< figcaption > Exhibit A. The alleged < cite > rough copy</ cite > comic.</ figcaption >
</ figure >
< figure >
< video src = "ex-b.mov" ></ video >
< figcaption > Exhibit B. The < cite > Rough Copy</ cite > trailer.</ figcaption >
</ figure >
< p > The case was resolved out of court.
ここでは、詩の一部にfigure
を用いてマークアップしている。
< figure >
< p > 'Twas brillig, and the slithy toves< br >
Did gyre and gimble in the wabe;< br >
All mimsy were the borogoves,< br >
And the mome raths outgrabe.</ p >
< figcaption >< cite > Jabberwocky</ cite > (first verse). Lewis Carroll, 1832-98</ figcaption >
</ figure >
この例において、それは城を取り扱うより大きな作品の一部である可能性があり、ネストされたfigure
要素は、グループ内の各図に対してグループのキャプションと個々のキャプションの両方を提供するために使用される:
< figure >
< figcaption > The castle through the ages: 1423, 1858, and 1999 respectively.</ figcaption >
< figure >
< figcaption > Etching. Anonymous, ca. 1423.</ figcaption >
< img src = "castle1423.jpeg" alt = "The castle has one tower, and a tall wall around it." >
</ figure >
< figure >
< figcaption > Oil-based paint on canvas. Maria Towle, 1858.</ figcaption >
< img src = "castle1858.jpeg" alt = "The castle now has two towers and two walls." >
</ figure >
< figure >
< figcaption > Film photograph. Peter Jankle, 1999.</ figcaption >
< img src = "castle1999.jpeg" alt = "The castle lies in ruins, the original tower all that remains in one piece." >
</ figure >
</ figure >
前の例は、次のようにより簡潔に書くこともできる(ネストされたfigure
/figcaption
ペアの場所でtitle
属性を用いて):
< figure >
< img src = "castle1423.jpeg" title = "Etching. Anonymous, ca. 1423."
alt = "The castle has one tower, and a tall wall around it." >
< img src = "castle1858.jpeg" title = "Oil-based paint on canvas. Maria Towle, 1858."
alt = "The castle now has two towers and two walls." >
< img src = "castle1999.jpeg" title = "Film photograph. Peter Jankle, 1999."
alt = "The castle lies in ruins, the original tower all that remains in one piece." >
< figcaption > The castle through the ages: 1423, 1858, and 1999 respectively.</ figcaption >
</ figure >
図は、時にはコンテンツからのみ、暗黙的に参照される:
< article >
< h1 > Fiscal negotiations stumble in Congress as deadline nears</ h1 >
< figure >
< img src = "obama-reid.jpeg" alt = "Obama and Reid sit together smiling in the Oval Office." >
< figcaption > Barack Obama and Harry Reid. White House press photograph.</ figcaption >
</ figure >
< p > Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
grasping for a way to reopen the government and raise the country's borrowing authority with a
Thursday deadline drawing near.</ p >
...
</ article >
figcaption
要素Support in all current engines.
figure
要素の最初または最後の子として。HTMLElement
を使用する。figcaption
要素はfigcaption
要素の親figure
要素に属する残りのコンテンツのキャプションまたは凡例を表す。
要素は、ソースに関する追加情報を含めることができる:
< figcaption >
< p > A duck.</ p >
< p >< small > Photograph courtesy of 🌟 News.</ small ></ p >
</ figcaption >
< figcaption >
< p > Average rent for 3-room apartments, excluding non-profit apartments</ p >
< p > Zürich’s Statistics Office — < time datetime = 2017-11-14 > 14 November 2017</ time ></ p >
</ figcaption >
main
要素Support in all current engines.
main
要素である場合に限る。HTMLElement
を使用する。文書は、main
要素を複数持ってはならない。
階層的に正しいmain
要素は、祖先要素がhtml
、body
、div
、アクセシブルな名前のないform
、および自律カスタム要素に限定されるものである。各main
要素は、階層的に正しいmain
要素でなければならない。
この例において、著者は、ページの各構成要素がボックス内にレンダリングされるプレゼンテーションを使用している。(ヘッダー、フッター、ナビゲーションバー、およびサイドバーとは対照的に)ページの主要コンテンツを包むために、main
要素が使用される。
<!DOCTYPE html>
< html lang = "en" >
< title > RPG System 17</ title >
< style >
header , nav , aside , main , footer {
margin : 0.5 em ; border : thin solid ; padding : 0.5 em ;
background : #EFF ; color : black ; box-shadow : 0 0 0.25 em #033 ;
}
h1 , h2 , p { margin : 0 ; }
nav , main { float : left ; }
aside { float : right ; }
footer { clear : both ; }
</ style >
< header >
< h1 > System Eighteen</ h1 >
</ header >
< nav >
< a href = "../16/" > ← System 17</ a >
< a href = "../18/" > RPXIX →</ a >
</ nav >
< aside >
< p > This system has no HP mechanic, so there's no healing.
</ aside >
< main >
< h2 > Character creation</ h2 >
< p > Attributes (magic, strength, agility) are purchased at the cost of one point per level.</ p >
< h2 > Rolls</ h2 >
< p > Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</ p >
</ main >
< footer >
< p > Copyright © 2013
</ footer >
</ html >
次の例において、複数のmain
要素が使用されており、スクリプトは、サーバーのラウンドトリップを行わずにナビゲーションを実行し、最新でないものに 属性を設定するために使用される:
<!doctype html>
< html lang = en-CA >
< meta charset = utf-8 >
< title > … </ title >
< link rel = stylesheet href = spa.css >
< script src = spa.js async ></ script >
< nav >
< a href = / > Home</ a >
< a href = /about > About</ a >
< a href = /contact > Contact</ a >
</ nav >
< main >
< h1 > Home</ h1 >
…
</ main >
< main hidden >
< h1 > About</ h1 >
…
</ main >
< main hidden >
< h1 > Contact</ h1 >
…
</ main >
< footer > Made with ❤️ by < a href = https://example.com/ > Example 👻</ a > .</ footer >
search
要素No support in current engines.
HTMLElement
を使用する。 search
要素は、検索またはフィルタリング操作の実行に関連する一連のフォームコントロールまたはその他のコンテンツを含む文書またはアプリケーションの一部を表す。これは、ウェブサイトもしくはアプリケーションの検索、現在のウェブページで検索結果を検索もしくはフィルタリングする方法、 またはグローバルもしくはインターネット全体の検索機能であるかもしれない。
検索機能の一部として、"クイックサーチ"結果としてのサジェストやリンクを含めることはできるが、検索結果を表示するためだけにsearch
要素を使用することは適切ではない。むしろ、検索結果の返ってきたウェブページは、そのウェブページのメインコンテンツの一部として表示されることが期待される。
次の例では、著者はウェブページのheader
内に検索フォームを含めている:
< header >
< h1 >< a href = "/" > My fancy blog</ a ></ h1 >
...
< search >
< form action = "search.php" >
< label for = "query" > Find an article</ label >
< input id = "query" name = "q" type = "search" >
< button type = "submit" > Go!</ button >
</ form >
</ search >
</ header >
この例において、著者はウェブアプリケーションの検索機能をすべてJavaScriptで実装している。 サーバーサイドの送信を実行するために form
要素を使用していないが、含まれているsearch
要素は、子孫コンテンツの目的が検索機能を表すものであるとセマンティックにわかる。
< search >
< label >
Find and filter your query
< input type = "search" id = "query" >
</ label >
< label >
< input type = "checkbox" id = "exact-only" >
Exact matches only
</ label >
< section >
< h3 > Results found:</ h3 >
< ul id = "results" >
< li >
< p >< a href = "services/consulting" > Consulting services</ a ></ p >
< p >
Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
</ p >
</ li >
...
</ ul >
<!--
when a query returns or filters out all results
render the no results message here
-->
< output id = "no-results" ></ output >
</ section >
</ search >
次の例では、ページに2つの検索機能がある。1つ目は、ウェブページのheader
にあり、ウェブサイトのコンテンツを検索するためのグローバルメカニズムとして機能する。その目的は、指定されたtitle
属性によって示される。2つ目は、現在のページのコンテンツを検索およびフィルタリングするメカニズムを表すために、ページのメインコンテンツの一部として含まれている。これは、その目的を示す見出しを含んでいる。
< body >
< header >
...
< search title = "Website" >
...
</ search >
</ header >
< main >
< h1 > Hotels near your location</ h1 >
< search >
< h2 > Filter results</ h2 >
...
</ search >
< article >
<!-- search result content -->
</ article >
</ main >
</ body >
div
要素Support in all current engines.
dl
要素の子として。dl
要素の子である場合:1つ以上のdt
要素の後に1つ以上のdd
要素が続き、必要に応じてスクリプトサポート要素と混在する。dl
要素の子でない場合:フローコンテンツ。HTMLDivElement
を使用する。div
要素は、一切特別な意味を持たない。この要素は、要素の子を表す。この要素は、class
、lang
、および連続した要素のグループに共通のセマンティックスをマークアップするtitle
属性とともに使用できる。dt
要素とdd
要素のグループを包む、dl
要素でも使用できる。
他の要素が適切でない場合、著者は最後の手段の要素としてdiv
要素を検討することを強く推奨する。div
要素の代わりにより適切な要素を使用することは、読者に対してより良いアクセシビリティと著者に対するより容易なメンテナンス性につながる。
たとえば、ブログの投稿はarticle
、章にsection
、ページのナビゲーションの目的にnav
、フォームコントロールのグループにfieldset
を使用してマークアップされるだろう。
一方、div
要素は、文体上の目的のため、すなわち類似の方法で注釈をつけたすべてのセクション内の複数段落を包むために有用であるかもしれない。次の例は、別々な2つの段落要素に言語の設定を一度に設定する代わりに、一度に2つの段落の言語を設定する方法として使用されるdiv
要素である:
< article lang = "en-US" >
< h1 > My use of language and my cats</ h1 >
< p > My cat's behavior hasn't changed much since her absence, except
that she plays her new physique to the neighbors regularly, in an
attempt to get pets.</ p >
< div lang = "en-GB" >
< p > My other cat, coloured black and white, is a sweetie. He followed
us to the pool today, walking down the pavement with us. Yesterday
he apparently visited our neighbours. I wonder if he recognises that
their flat is a mirror image of ours.</ p >
< p > Hm, I just noticed that in the last paragraph I used British
English. But I'm supposed to write in American English. So I
shouldn't say "pavement" or "flat" or "colour"...</ p >
</ div >
< p > I should say "sidewalk" and "apartment" and "color"!</ p >
</ article >