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

4.4.1 p要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略

p要素がaddressarticleasideblockquotedivdlfieldsetfooterformh1h2h3h4h5h6headerhgrouphrmainnavolppresectiontable、またはul要素の直前に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がa要素でない場合、p要素の終了タグは省略してもよい。

許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLParagraphElement : HTMLElement {};

p要素は段落表す

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

次の例は、適合HTML断片である:

<p>The little kitten gently seated himself on a piece of
carpet. Later in his 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要素

カテゴリ
フローコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
終了タグなし。
許可されるARIAロール属性値:
separator(デフォルト - 設定しない)またはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLHRElement : HTMLElement {};

hr要素は、たとえば、物語の場面変化や、参考書のセクション内で別の話題に移行するなど、段落レベルのテーマの区切りを表す

プロジェクトマニュアルからの以下における架空の引用は、セクション内でトピックを分離するために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要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLPreElement : HTMLElement {};

pre要素は、構造が要素によってではなく印刷規則によって表される、整形済みテキストのブロックを表す

HTML構文において、pre要素の開始タグの直後にある冒頭の改行文字は取り除かれる。

pre要素を使用できるケースの一部の例:

著者は、音声合成装置、点字ディスプレイなどのユーザーの場合に、書式設定が失われた際に整形済みテキストを体験する方法を検討することが推奨される。アスキーアートのような場合、たとえばテキスト記述などの代替プレゼンテーションは、文書の読者にとって、より普遍的にアクセスできるようになるだろう。

コンピュータコードのブロックを表すために、pre要素は、code要素とともに使用できる。コンピュータ出力のブロックを表すために、pre要素は、samp要素とともに使用できる。同様に、kbd要素は、ユーザーが入力するテキストを示すために、pre要素内で使用できる。

This element has rendering requirements involving the bidirectional algorithm.

次の断片において、コンピュータコードのサンプルが提示される。

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

カテゴリ
フローコンテンツ
セクショニングルート
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
cite - 引用へのリンク
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLQuoteElement : HTMLElement {
           attribute DOMString cite;
};

HTMLQuoteElementインターフェースはまた、q要素によっても使用される。

blockquote要素は別のソースから引用されているコンテンツを表し、任意でfooterまたはcite要素内で存在しなければならない引用をもち、かつ任意で注釈や略語などのインライン変化を持つ。

引用およびインライン変化以外のblockquote要素内のコンテンツは、別のソースから引用されなければならず、そのアドレスがある場合、cite属性で引用してもよい。

ページが、ブログの記事のコメントのような複数人からの寄稿を含む場合、'別のソース'は、他人によって書かれ、同じページからテキストを含めることができる。

cite属性が存在する場合、潜在的にスペースで囲まれた妥当なURLでなければならない。To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g. by server-side scripts collecting statistics about a site's use of quotations), not for readers.

The cite IDL attribute must reflect the element's cite content attribute.

blockquoteのコンテンツは省略されてもよく、コンテキストを追加したり、注釈を持ったりしてもよい。そのような追記や引用されたテキストへの変更は、(テキストレベルで)テキストに示されなければならない。これは、"強調は引用者による"などの、表記法や明示的な発言の使用を意味するかもしれない。

たとえば英語において、省略は伝統的に角括弧を使用して識別される。"Fred ate the cracker. He then said he liked apples and fish."という文をもつページを考えてみよう。これは次のように引用されるかもしれない:

<blockquote>
 <p>[Fred] then said he liked [...] fish.</p>
</blockquote>

引用符は、blockquote内の引用テキストと注釈の間を線引きするために用いてもよい。

たとえば、インライン注釈は、著者によって提供される:

 <figure>
 <blockquote>
 "That monster custom, who all sense doth eat
 Of habit's devil," <abbr title="et cetera">&c.</abbr> not in Folio
 
 "What a falling off was there !
 From me, whose love was of that dignity
 That it went hand in hand even with the vow
 I made to her in marriage, and to decline
 Upon a wretch."
 </blockquote>
 <footer>
 — <cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>,
 p19 (in Google Books)
 </footer>
 </figure>
 

上記の例において、引用はfigure要素のfooter内に含まれ、これは引用文に関する情報を寄せ集めて、引用文と関連づける。この場合において、figcaption要素はキャプションでないため引用に対するコンテナとして、使用されなかった。

引用に対する帰属は、blockquote要素の中に配置されてもよいが、テキスト中の帰属に対してcite要素内またはfooter要素内でなければならない。

たとえば、帰属と引用を明確に関連付けるために、引用されたテキストの後にfooterで帰属が与えられる:

<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>
 <footer>— <cite>Stephen Roberts</cite></footer>
 </blockquote>

帰属は引用符で囲まれたテキストの最後の行にcite要素で与えられる。著者へのリンクも含まれていることに注意する。

<blockquote>
 The people recognize themselves in their commodities; they find their
 soul in their automobile, hi-fi set, split-level home, kitchen equipment.
 — <cite><a href="http://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite>
 </blockquote>

帰属は、引用符で囲まれたテキストの後にfooterに与えられ、出典についてのメタデータは、マイクロデータの構文を使用して追加されている(同様にRDFA Liteを使用してマークアップされている可能性に注意する)。

<blockquote>
 <p>... she said she would not sign any deposition containing the word "amorous"
 instead of "advances". For her the difference was of crucial significance,
 and one of the reasons she had separated from her husband was that he had never been
 amorous but had consistently made advances.</p>
 
 <footer itemscope itemtype="http://schema.org/Book">
  <span itemprop="author">Heinrich Böll</span>,
  <span itemprop="name">The Lost Honor of Katharina Blum</span>,
  <span itemprop="datePublished">January 1, 1974</span>
 </footer>
 </blockquote>
 

引用されたソース由来のblockquote内のマークアップを表示するための正式な方法は存在しない。footerまたはcite要素が含まれ、かつこれらの要素も引用を識別するためにblockquote内で使用されている場合、引用されたソース由来の要素は、たとえばclass属性(定義された拡張性メカニズム)を使用することによって、ソースの起源を識別するためにメタデータで注釈を付けできることが示唆されている。

この例において引用のソースは、class属性を用いて注釈が付けられる、cite要素を含む:

  <blockquote>
  <p>My favorite book is <cite class="from-source">At Swim-Two-Birds</cite></p>
  <footer>- <cite>Mike[tm]Smith</cite></footer>
  </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><cite>Carl Sagan</cite>, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Enquirer</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="http://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="http://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要素

カテゴリ
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
コンテンツ属性
グローバル属性
reversed - リストの逆順の数
start - 最初の項目の順序値
type - リストマーカーの種類
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
listロール(デフォルト - 設定しない)、directorylistboxmenumenubarpresentationtablisttoolbarまたはtree
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLOListElement : HTMLElement {
           attribute boolean reversed;
           attribute long start;
           attribute DOMString type;
};

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

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

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

start属性が存在する場合、最初のリスト項目の序数値を与える妥当な整数でなければならない。

If the start attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. The default value, used if the attribute is missing or if the value cannot be converted to a number according to the referenced algorithm, is 1 if the element has no reversed attribute, and is the number of child li elements otherwise.

The first item in the list has the ordinal value given by the ol element's start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.

Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present.

type属性は、重要な場合(たとえば、項目が数字または文字によって参照されることがあるためなど)、リストで使用するマーカーの種類を指定するために使用できる。属性を指定する場合、属性は、次表のいずれかの行にある最初のセルに与えられた文字のいずれかに大文字・小文字区別で一致する値を持たなければならない。The type attribute represents the state given in the cell in the second column of the row whose first cell matches the attribute's value; if none of the cells match, or if the attribute is omitted, then the attribute represents the decimal state.

キーワード 状態 説明 値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. ...

User agents should render the items of the list in a manner consistent with the state of the type attribute of the ol element. Numbers less than or equal to zero should always use the decimal system regardless of the type attribute.

For CSS user agents, a mapping for this attribute to the 'list-style-type' CSS property is given in the rendering section (the mapping is straightforward: the states above have the same names as their corresponding CSS values).

The reversed, start, and type IDL attributes must reflect the respective content attributes of the same name. The start IDL attribute has the same default as its content attribute.

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

カテゴリ
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
listロール(デフォルト - 設定しない)、directorygrouplistboxmenumenubarpresentationtablisttoolbarまたはtree
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLUListElement : HTMLElement {};

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

カテゴリ
なし。
この要素を使用できるコンテキスト
ol要素の内側。
ul要素の内側。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
要素がol要素の子の場合:value - リスト項目の順序値
text/htmlにおけるタグ省略

li要素が別のli要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、li要素の終了タグは省略してもよい。

許可されるARIAロール属性値:
listitemロール(デフォルト - 設定しない)、menuitemmenuitemcheckboxmenuitemradiooptiontabtreeitemまたは presentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLLIElement : HTMLElement {
           attribute long value;
};

li要素は、リスト項目を表す。親要素がol、またはul要素である場合、要素は、それらの要素に対して定義されるような、親要素のリストの項目である。そうでなければ、リストの項目は、他のli要素にリスト関連の関係を定義されてない。

親要素がol要素の場合、li要素は序数値を持つ。

value属性が存在する場合、リスト項目の序数値を与える妥当な整数でなければならない。

If the value attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. If the attribute's value cannot be converted to a number, the attribute must be treated as if it was absent. The attribute has no default value.

The value attribute is processed relative to the element's parent ol element (q.v.), if there is one. If there is not, the attribute has no effect.

The value IDL attribute must reflect the value of the value content attribute.

次の例は、トップ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.8 dl要素

カテゴリ
フローコンテンツ
要素の子が少なくとも1つの名前-値グループを含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
それぞれ1つ以上のdt要素の後に来る1つ以上のdd要素からなり、任意でスクリプトサポート要素と混合される0個以上のグループ。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLDListElement : HTMLElement {};

dl要素は、0個以上の名前-値グループ(記述リスト)から成る連想リストを表す。名前-値グループは、dtおよびdd要素以外のすべてノードを拒否し、1つ以上の名前(dt要素)に続き1つ以上の値(dd要素)で構成されなければならない。単一のdl要素内で、それぞれの名前に対して複数のdt要素が存在すべきでない。

名前-値グループは、用語とその定義、メタデータの見出しや値、質問と回答、または名前-値のデータのグループであってもよい。

グループ内の値は、代替手段である。同じ値の一部を形成する複数の段落がすべて同じdd要素内に指定されなければならない。

グループ、および各グループ内の名前と値のリストの順序は、意味があってもよい。

If a dl element is empty, it contains no groups.

If a dl element has one or more non-whitespace Text node children, or has child elements that are neither dt nor dd elements, all such Text nodes and elements, as well as their descendants (including any dt or dd elements), do not form part of any groups in that dl.

If a dl element has one or more dt element children but no dd element children, then it consists of one group with names but no values.

If a dl element has one or more dd element children but no dt element children, then it consists of one group with values but no names.

If a dl element's first dt or dd element child is a dd element, then the first group has no associated name.

If a dl element's last dt or dd element child is a dt element, then the last group has no associated value.

When a dl element doesn't match its content model, it is often due to accidentally using dd elements in the place of dt elements and vice versa. Conformance checkers can spot such mistakes and might be able to advise authors how to correctly use the markup.

次の例は、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")を持つ。

<dl>
 <dt> Last modified time </dt>
 <dd> 2004-12-23T23:33Z </dd>
 <dt> Recommended update interval </dt>
 <dd> 60s </dd>
 <dt> Authors </dt>
 <dt> Editors </dt>
 <dd> Robert Rothman </dd>
 <dd> Daniel Jackson </dd>
</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>

dl要素は、会話をマークアップするのに不適切である。会話をマークアップする方法の例を以下に示す。

4.4.9 dt要素

カテゴリ
なし。
この要素を使用できるコンテキスト
dl要素の内部でddまたはdt要素の前。
コンテンツモデル
フローコンテンツ、ただしheaderfooterセクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略

dt要素が別のdt要素またはdd要素の直前に存在する場合、dt要素の終了タグは省略してもよい。

許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.10 dd要素

カテゴリ
なし。
この要素を使用できるコンテキスト
dl要素の内側でdtまたはddの後。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略

dd要素が別のdd要素またはdt要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、dd要素の終了タグは省略してもよい。

許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

dd要素は、記述リスト(dl要素)内の用語・説明グループの一部である、説明、定義、あるいは値を表す

dlは辞書のように、語彙リストを定義するために使用できる。以下の例において、dfnとともにdtで与えられる各エントリは、定義の様々な部分を示す、複数のddを持つ。

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</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">/ri jois'/</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.11 figure要素

カテゴリ
フローコンテンツ
セクショニングルート
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
以下のいずれか:1つのfigcaption要素の後に続くフローコンテンツ
または:フローコンテンツの後に続く1つのfigcaption要素。
または:フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

figure要素は、任意でキャプションをもつ(完全な文のような)自己完結型であり、一般に文書の主フローから単独のユニットとして参照されるフローコンテンツ表す

この文脈において自己完結型は、必ずしも独立したものを意味する必要はない。たとえば、段落内の各文は自己完結型である。文の一部である画像は、figureに不適切だろうが、画像で作られた完全な文は適切だろう。

よってこの要素はイラスト、図、写真、コードリストなどに注釈を付けるために使用できる。

figureがキャプションで(たとえば図番号で)figureを識別することによって文書の主要コンテンツから参照する場合、たとえば、文書のフローに影響を与えることなくページの横へ、専用のページへ、または付録へなど、文書の主要コンテンツから容易に離れられるようなコンテンツを可能にする。

たとえば、"次の図が示すように"あるいは"上の写真において"の次に図に移動するなど、figure要素がその相対位置によって参照される場合、ページの意味を混乱させるだろう。著者は、ページがページの意味に影響を与えることなく簡単に再スタイル付けできるように、そのような相対参照を使用するよりもむしろ、図を参照するためのラベルの使用を検討することを推奨する。

The first figcaption element child of the element, if any, represents the caption of the figure element's contents. If there is no child figcaption element, then there is no caption.

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();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

これは(ギャラリー内のような)ページの主コンテンツである写真をマークアップするfigure要素である。

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

図は、時にはコンテンツからのみ、暗黙的に参照される:

<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>Barrak 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.12 figcaption要素

カテゴリ
なし。
この要素を使用できるコンテキスト
figure要素の最初または最後の子として。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any.

4.4.13 div要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLDivElement : HTMLElement {};

div要素は、一切特別な意味を持たない。この要素は、要素の子を表す。この要素は、classlang、および連続した要素のグループに共通のセマンティックをマークアップするtitle属性とともに使用できる。

他の要素が適切でない場合、著者は最後の手段の要素として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>

4.4.14 main要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所、ただしarticleasidefooterheaderまたはnav要素を祖先に持たない場所。
コンテンツモデル
フローコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
mainロール(デフォルト - 設定しない)またはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
HTMLElementを使用する。

main要素は、文書やアプリケーションのbody主要コンテンツ表す。主要コンテンツ領域は、直接に関連するコンテンツで構成される、または文書の中心的な話題、またはアプリケーションの中心的機能を発展させる。

main要素は、セクショニングコンテンツではなく、かつ文書のアウトラインに影響しない。

文書の主要コンテンツ領域は、その文書に固有であり、サイトナビゲーションリンク、著作権情報、サイトのロゴやバナーや(文書やアプリケーションの主な機能が検索フォームである場合を除く)検索フォームのような、一連の文書を横断して繰り返されるコンテンツを除外したコンテンツを含む。

コンテンツのキーボードナビゲーションをサポートするユーザーエージェントは、main要素に移動する方法を提供してかつ一度に移動し、フォーカスの順序で次の要素がmain要素内の最初のフォーカス可能な要素であることを保証するよう強く推奨する。これは、ナビゲーションリンクなどのコンテンツのブロックをバイパスするための簡単な方法をキーボードユーザーに提供するだろう。

著者は、文書内に複数のmain要素を含めてはならない。

著者は、articleasidefooterheaderまたはnav要素の子孫として、main要素を含めてはならない。

main要素は、文書やアプリケーションのサブセクションと主要コンテンツ領域を識別するために使用するのに適さない。最も簡単な解決策はすべてのサブセクションの主要コンテンツをマークアップせず、単に暗黙のままにしないことだが、著者は必要に応じてグルーピングコンテンツセクショニングコンテンツ要素を使用できる。

著者は、ユーザーエージェントが必要なロールのマッピングを実装するまで、main要素にARIA role="main"属性を使用することを勧める。

  <main role="main"> 
  ... 
  </main>

次の例において、スケートボードについてメイントピック(ウェブページのメイントピック)のコンテンツはmain要素の使用によって識別され、2つの記事を参照する。

<!-- other content -->

<main>

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around</p>
  
  <article>
  <h2>Longboards</h2>
  <p>Longboards are a type of skateboard with a longer
  wheelbase and larger, softer wheels.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Electric Skateboards</h2>
  <p>These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board,
  fed by an electric battery.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

  <!-- other content -->

これは、主要コンテンツセクションがmain要素を用いて定義される卒業式のプログラムである。この例において、main要素は、主要コンテンツのサブセクションへのリンクで構成するnav要素を含むことに注意する。

<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title> </head> <body> <header>The Lawson Academy: <nav> <ul> <li><a href="courses.html">Courses</a></li> <li><a href="fees.html">Fees</a></li> <li><a>Graduation</a></li> </ul> </nav> </header> <main> <h1>Graduation</h1> <nav> <ul> <li><a href="#ceremony">Ceremony</a></li> <li><a href="#graduates">Graduates</a></li> <li><a href="#awards">Awards</a></li> </ul> </nav> <H2 id="ceremony">Ceremony</H2> <p>Opening Procession</p> <p>Speech by Valedictorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> <h2 id="graduates">Graduates</h2> <ul> <li>Eileen Williams</li> <li>Andy Maseyk</li> <li>Blanca Sainz Garcia</li> <li>Clara Faulkner</li> <li>Gez Lemon</li> <li>Eloisa Faulkner</li> </ul> <h2 id="awards">Awards</h2> <ul> <li>Clara Faulkner</li> <li>Eloisa Faulkner</li> <li>Blanca Sainz Garcia</li> </ul> </main> <footer> Copyright 2012 B.lawson</footer> </body> </html>