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

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

4.4.1 p要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
p要素がaddressarticleasideblockquotedetailsdivdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrmainmenunavolppresectiontableul要素の直後に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がaaudiodelinsmapnoscriptvideo要素、または自律カスタム要素でないHTML要素である場合、p要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLParagraphElement : HTMLElement {};

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

カテゴリー
フローコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
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におけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLPreElement : HTMLElement {};

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

カテゴリー
フローコンテンツ
セクショニングルート
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
DOMインターフェイス
[HTMLConstructor]
interface HTMLQuoteElement : HTMLElement {
  [CEReactions] attribute USVString cite;
};

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

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>

以下の例は、帰属を示す他の方法を示す。

cite IDL属性は、要素のciteコンテンツ属性を反映しなければならない。

これは、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要素

カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
reversed — リストの逆順の数
start — リストの開始値
type — リストマーカーの種類
DOMインターフェイス
[HTMLConstructor]
interface HTMLOListElement : HTMLElement {
  [CEReactions] attribute boolean reversed;
  [CEReactions] attribute long start;
  [CEReactions] attribute DOMString type;
};

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

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

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

Support: ol-reversedChrome for Android 59+Chrome 20+UC Browser for Android 11.4+iOS Safari 6.0+Firefox 18+IE NoneSamsung Internet 4+Opera Mini all+Safari 6.1+Edge NoneAndroid Browser 4.4+Opera 12.1+

Source: caniuse.com

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

An ol element has a starting value, which is an integer determined as follows:

  1. If the ol element has a start attribute, then:

    1. Let parsed be the result of parsing the value of the attribute as an integer.

    2. If parsed is not an error, then return parsed.

  2. If the ol element has a reversed attribute, then return the number of owned li elements.

  3. Return 1.

The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter). The attribute, if specified, must have a value that is a case-sensitive match for one of the characters given in the first cell of one of the rows of the following table. 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. ...

ユーザーエージェントは、ol要素のtype属性の状態と一致する方法で、リストの項目をレンダリングすべきである。0以下の数字は、type属性に関係なく10進法を常に使用すべきである。

CSSユーザーエージェントの場合、'list-style-type' CSSプロパティにこの属性のマッピングは、レンダリング節に記載される(マッピングは簡単である。状態は、上記のその対応するCSSの値と同じ名前を持つ)。

これは、CSSユーザーエージェントにおけるこの属性を実装するために使用されるデフォルトCSSリストスタイルを定義することを可能にする。そうすることは、リスト項目がレンダリングされる方法に影響を与える。

The reversed and type IDL attributes must reflect the respective content attributes of the same name.

The start IDL attribute must reflect the content attribute of the same name, with a default value of 1.

This means that the start IDL attribute does not necessarily match the list's starting value, in cases where the start content attribute is omitted and the reversed content attribute is specified.

次のマークアップは、順序が重要である所でリストを示しており、したがって、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におけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
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 menu要素

Support: menuChrome for Android NoneChrome NoneUC Browser for Android NoneiOS Safari NoneFirefox (limited) 8+IE NoneSamsung Internet NoneOpera Mini NoneSafari NoneEdge NoneAndroid Browser NoneOpera None

Source: caniuse.com

カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLMenuElement : HTMLElement {
};

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

カテゴリー
なし。
この要素を使用できるコンテキスト
ol要素の内側。
ul要素の内側。
menu要素の内側。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
li要素が別のli要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、li要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
要素がulまたはmenu要素の子でない場合:value — リスト項目の順序値
DOMインターフェイス
[HTMLConstructor]
interface HTMLLIElement : HTMLElement {
  [CEReactions] attribute long value;
};

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

存在する場合、value属性は、妥当な整数でなければならない。It is used to determine the ordinal value of the list item, when the li's list owner is an ol element.


Any element whose computed value of 'display' is 'list-item' has a list owner, which is determined as follows:

  1. If the element is not being rendered, return null; the element has no list owner.

  2. Let ancestor be the element's parent.

  3. If the element has an ol, ul, or menu ancestor, set ancestor to the closest such ancestor element.

  4. Return the closest inclusive ancestor of ancestor that produces a CSS box.

    Such an element will always exist, as at the very least the document element will always produce a CSS box.

To determine the ordinal value of each element owned by a given list owner owner, perform the following steps:

  1. Let i be 1.

  2. If owner is an ol element, let numbering be owner's starting value. Otherwise, let numbering be 1.

  3. Loop: If i is greater than the number of list items that owner owns, then abort this algorithm; all of owner's owned list items have been assigned ordinal values.

  4. Let item be the ith of owner's owned list items, in tree order.

  5. If item is an li element that has a value attribute, then:

    1. Let parsed be the result of parsing the value of the attribute as an integer.

    2. If parsed is not an error, then set numbering to parsed.

  6. The ordinal value of item is numbering.

  7. If owner is an ol element, and owner has a reversed attribute, decrement numbering by 1; otherwise, increment numbering by 1.

  8. Increment i by 1.

  9. Go to the step labeled loop.


value IDL属性は、valueコンテンツ属性の値を反映しなければならない。

The element's value IDL attribute does not directly correspond to its ordinal value; it simply reflects the content attribute. For example, given this list:

<ol>
 <li>Item 1
 <li value="3">Item 3
 <li>Item 4
</ol>

The ordinal values are 1, 3, and 4, whereas the value IDL attributes return 0, 3, 0 on getting.

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

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

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

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

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

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

Microdata属性、またはグループ全体に適用される他のグローバル属性または単にスタイル目的でグループに注釈付するために、dl内の各グループは、div要素で包むことができる。これは、dl要素のセマンティクスを変更しない。

The name-value groups of a dl element dl are determined using the following algorithm. A name-value group has a name (a list of dt elements, initially empty) and a value (a list of dd elements, initially empty).

  1. Let groups be an empty list of name-value groups.

  2. Let current be a new name-value group.

  3. Let seenDd be false.

  4. Let child be dl's first child.

  5. Let grandchild be null.

  6. While child is not null:

    1. If child is a div element, then:

      1. Let grandchild be child's first child.

      2. While grandchild is not null:

        1. Process dt or dd for grandchild.

        2. Set grandchild to grandchild's next sibling.

    2. Otherwise, process dt or dd for child.

    3. Set child to child's next sibling.

  7. If current is not empty, then append current to groups.

  8. Return groups.

To process dt or dd for a node node means to follow these steps:

  1. Let groups, current, and seenDd be the same variables as those of the same name in the algorithm that invoked these steps.

  2. If node is a dt element, then:

    1. If seenDd is true, then append current to groups, set current to a new name-value group, and set seenDd to false.

    2. Append node to current's name.

  3. Otherwise, if node is a dd element, then append node to current's value and set seenDd to true.

名前-値グループが名前または値として空のリストを持つ場合、多くの場合dt要素の代わりにdd要素を、またはその逆を誤って使用する原因となる。適合性チェッカーは、そのような間違いを見つけることができ、マークアップを正しく使用する方法を著者に助言することができるかもしれない。

次の例は、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, sause 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, sause 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要素

カテゴリー
なし。
この要素を使用できるコンテキスト
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要素

カテゴリー
なし。
この要素を使用できるコンテキスト
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æ 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.12 figure要素

Spec bugs: 25552

カテゴリー
フローコンテンツ
セクショニングルート
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
以下のいずれか: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();
 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>
<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>

The figure is sometimes referenced only implicitly from the content:

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

カテゴリー
なし。
この要素を使用できるコンテキスト
figure要素の最初または最後の子として。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

figcaption要素は、もしあれば、figcaption要素の親figure要素に属する残りのコンテンツのキャプションまたは凡例を表す

4.4.14 main要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

main要素は、もう1つの要素の文書コンテンツに対するコンテナとして使用することができる。この要素は、要素の子を表す

main要素は、main要素が文書のアウトラインに寄与しないという点においてsectionおよびarticle要素とは区別される。

文書でmain要素の数についての制限はない。確かに、複数のmain要素を持つことが理にかなう場合が多い。たとえば、複数のarticle要素をもつページは、そのような各要素の支配的な内容を示すために必要があるかもしれない。

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

4.4.15 div要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
dl要素の子として。
コンテンツモデル
要素がdl要素の子である場合:1つ以上のdt要素の後に1つ以上のdd要素が続き、必要に応じてスクリプトサポート要素と混在する。
要素がdl要素の子でない場合:フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLDivElement : HTMLElement {};

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>