チョコパイを240こ食べたプログラマ

青森から大都会に出てきてPHPエンジニアとして修行後、今度はフロントエンドエンジニアになろうと奮闘中。時々趣味の雑貨系も♡好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のグルーピングコンテンツ~その2~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

ol要素

項目のリストを表し、順序付けられているものに使用する。

<p>好きな焼き鳥ランキング</p>
<ol>
    <li>ねぎま</li>
    <li>ぼんじり</li>
    <li>軟骨</li>
    <li>皮(ぱりっぱりのやつ)</li>
    <li>かしら</li>
</ol>

カテゴリ
・フローコンテンツ
・子要素としてli要素が1つ以上含まれる場合は、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のli要素
・script要素、template要素

コンテンツ属性
・グローバル属性
・reversed - 降順(ブール属性。あれば降順、なければ昇順。)
・start - 開始番号(有効な整数値を指定)
・type - リストマーカーの種類(1、a、A、i、Iのいずれかを指定。CSSプロパティ「list-style-type」で表示を変えることも可能。)

タグの記載場所
・フローコンテンツが配置できる場所

ul要素

項目のリストを表し、順序が重要ではないものに使用する。

<p>好きな焼き鳥</p>
<ul>
    <li>ねぎま</li>
    <li>ぼんじり</li>
    <li>軟骨</li>
    <li>皮(ぱりっぱりのやつ)</li>
    <li>かしら</li>
</ul>

カテゴリ
・フローコンテンツ
・子要素としてli要素が1つ以上含まれる場合は、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のli要素
・script要素、template要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

li要素

リスト項目を表す。

<p>好きな焼き鳥ランキング</p>
<ul>
    <li value="3">軟骨</li>
    <li value="2">ぼんじり</li>
    <li value="1">ねぎま</li>
</ul>

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・ul要素の子要素でなければvalue - リストの番号指定。

タグの記載場所
・ol要素またはul要素の内部

dl要素

0個以上の説明リストを表す。
名前と定義、質問と回答、カテゴリとトピック、またはその他の用語説明ペアのグループなどを表す。

<dl>
    <dt>りんご</dt>
    <dd>赤や青の丸い果物</dd>
    <dt>ぶどう</dt>
    <dl>紫や黄緑色の粒がたくさんぶらさがった果物</dl>
</dl>

カテゴリ
・フローコンテンツ
・1つ以上の名前と値のグループがある場合、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のdt要素とそれに続く1つ以上のdd要素からなるグループを0個以上。(必要に応じてscript要素またはtemplate要素)
または、
・ゼロまたは1つ以上のdiv要素(必要に応じてscript要素またはtemplate要素)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

dt要素

説明リストの用語を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ(header要素、footer要素、セクショニングコンテンツ、ヘッディングコンテンツを除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・dl要素内のdtまたはdd要素の前

dd要素

説明リストの説明部分を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・dl要素内のdtまたはdd要素の後