1. 4.4 グルーピングコンテンツ
      1. 4.4.1 p要素
      2. 4.4.2 hr要素
      3. 4.4.3 pre要素
      4. 4.4.4 blockquote要素
      5. 4.4.5 ol要素
      6. 4.4.6 ul要素
      7. 4.4.7 menu要素
      8. 4.4.8 li要素
      9. 4.4.9 dl要素
      10. 4.4.10 dt要素
      11. 4.4.11 dd要素
      12. 4.4.12 figure要素
      13. 4.4.13 figcaption要素
      14. 4.4.14 main要素
      15. 4.4.15 search要素
      16. 4.4.16 div要素

4.4 グルーピングコンテンツ

4.4.1 p要素

Element/p

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
p要素がaddressarticleasideblockquotedetailsdivdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrmainmenunavolppresearch, section, table, もしくはul要素の直後に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がa, audio, del, ins, map, noscriptもしくは video 要素、または自律カスタム要素でないHTML要素である場合、p要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLParagraphElementを使用する。

p要素は段落表す

段落は通常、空白行を介して隣接するブロックから物理的に分離されるテキストのブロックによって視覚メディアで表現される一方で、スタイルシートまたはユーザーエージェントは、異なる方法で段落の区切りを提示することを同様に正当化するだろう。例としてインライン段落記号(¶)の使用が挙げられる。

次の例は、適合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>

リスト要素(具体的にはolul要素)は、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のみでスタイル付けできる。

4.4.2 hr要素

Element/hr

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
select要素の子として。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

section要素とh1要素はテーマの変更を意味するため、セクション間のhr要素は必要ない。

ピーター・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>

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

4.4.3 pre要素

Element/pre

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

次の断片において、sampkbd要素は、『ゾークⅠ』のセッションを表示するために、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>

4.4.4 blockquote要素

Element/blockquote

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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...

会話を表現する方法の例は、後の節で示される。この目的でciteblockquote要素を使用することは適切でない。

4.4.5 ol要素

Element/ol

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
reversed — リストの逆順の数
start — リストの開始値
type — リストマーカーの種類
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLOListElementを使用する。

ol要素は、順序を変更することが文書の意味を変更するような、意図的に順序付けられた項目のリストを表す

リストの項目は、ツリー順ol要素のli要素の子ノードである。

Element/ol#attr-reversed

Support in all current engines.

Firefox18+Safari6+Chrome18+
Opera?Edge79+
Edge (Legacy)≤79+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

reversed属性は、真偽属性である。存在する場合、リストが降順リストであることを示す(..., 3, 2, 1)。属性が省略される場合、リストは昇順リストである(1, 2, 3, ...)。

存在する場合、start属性は、妥当な整数でなければならない。これはリストの開始値を決定するために使用される。

type属性は、重要な場合(たとえば、項目が数字または文字によって参照されることがあるためなど)、リストで使用するマーカーの種類を指定するために使用できる。指定された場合、属性は、次の表の行の1つの最初のセルで与えられた文字の1つと同一となる値を持たなければならない。

キーワード状態説明値1-3および3999-4001に対する例
1 (U+0031)decimal10進数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>

4.4.6 ul要素

Element/ul

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLUListElementを使用する。

ul要素は、項目の順序が重要でない―順序を変更しても、文書の意味を実質的に変えないだろう、項目のリストを表す

リストの項目は、ul要素のli要素の子ノードである。

次のマークアップは、順序が重要でないリストを示しており、したがって、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>

4.4.7 menu要素

Element/menu

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

従来のツールバーメニューのように見えるようにするスタイルは、アプリケーションによって異なることに注意する。

4.4.8 li要素

Element/li

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
なし。
この要素を使用できるコンテキスト
ol要素の内側。
ul要素の内側。
menu要素の内側。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
li要素が別のli要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、li要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
要素がulまたはmenu要素の子でない場合:value — リスト項目の順序値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLLIElementを使用する。

li要素は、リスト項目を表す。親要素がolul、または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)を含むことは適合するが、それはおそらく著者が意図したセマンティックスを伝えることはない。見出しは新しいセクションを開始し、リストの見出しが暗黙的に複数のセクションにまたがるようにリストを分割する。

4.4.9 dl要素

Element/dl

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
要素の子が少なくとも1つの名前-値グループを含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
1つ以上のdt要素の後に来る1つ以上のdd要素からなり、任意でスクリプトサポート要素と混合される0個以上のグループ。
または:オプションでスクリプトサポート要素と混合される、1つ以上のdiv要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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")を持つ。この例はまた、スタイリングを支援するために、dtdd要素のグループの周囲に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要素は、会話をマークアップするのに不適切である。会話のマークアップする方法の例も参照のこと。

4.4.10 dt要素

Element/dt

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
dl要素の内部でddまたはdt要素の前。
dl要素の子であるdiv要素内のddまたはdt要素の前。
コンテンツモデル
フローコンテンツ、ただしheaderfooterセクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。
text/htmlにおけるタグ省略
dt要素が別のdt要素またはdd要素の直後に存在する場合、dt要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

4.4.11 dd要素

Element/dd

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
dl要素の内側でdtまたはddの後。
dl要素の子であるdiv要素内のddまたはdt要素の後。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
dd要素が別のdd要素またはdt要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、dd要素の終了タグは省略してもよい。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

4.4.12 figure要素

Element/figure

Support in all current engines.

Firefox4+Safari5.1+Chrome8+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
いずれか:1つのfigcaption要素の後に続くフローコンテンツ
または:フローコンテンツの後に続く1つのfigcaption要素。
または:フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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&lt;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>

4.4.13 figcaption要素

Element/figcaption

Support in all current engines.

Firefox4+Safari5.1+Chrome8+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+
カテゴリー
なし。
この要素を使用できるコンテキスト
figure要素の最初または最後の子として。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

4.4.14 main要素

Element/main

Support in all current engines.

Firefox21+Safari7+Chrome26+
Opera16+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所、ただしそのフローコンテンツが階層的に正しいmain要素である場合に限る。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

main要素は、文書の主要なコンテンツを表す

文書は、hidden属性が指定されないmain要素を複数持ってはならない。

階層的に正しいmain要素は、祖先要素がhtmlbodydivアクセシブルな名前のないform、および自律カスタム要素に限定されるものである。各main要素は、階層的に正しいmain要素でなければならない。

この例において、著者は、ページの各構成要素がボックス内にレンダリングされるプレゼンテーションを使用している。(ヘッダー、フッター、ナビゲーションバー、およびサイドバーとは対照的に)ページの主要コンテンツを包むために、main要素が使用される。

<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #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要素が使用されており、スクリプトは、サーバーのラウンドトリップを行わずにナビゲーションを実行し、最新でないものにhidden属性を設定するために使用される:

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

4.4.15 search要素

Element/search

No support in current engines.

FirefoxNoSafariNoChromeNo
OperaNoEdgeNo
Edge (Legacy)NoInternet ExplorerNo
Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
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>

4.4.16 div要素

Element/div

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
dl要素の子として。
コンテンツモデル
要素がdl要素の子である場合:1つ以上のdt要素の後に1つ以上のdd要素が続き、必要に応じてスクリプトサポート要素と混在する。
要素がdl要素の子でない場合:フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLDivElementを使用する。

div要素は、一切特別な意味を持たない。この要素は、要素の子を表す。この要素は、classlang、および連続した要素のグループに共通のセマンティックスをマークアップする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>