hr要素
- カテゴリー：フローコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：空
- コンテンツ属性：グローバル属性
hr要素は、HTML 4.01では横罫線を引くための要素でしたが、HTML5では「段落単位でのテーマの区切り」を表すようになりました。具体的には、物語の中でのシーンの変更や、参考書のセクション内で別のトピックに移る場合などで使います。紙の小説などに見られる、場面の転換を表す記号や罫線をイメージするとわかりやすいでしょう。
<section>
<h2>第九章 僕は鳥取に行かない</h2>
<p>僕は生まれてこの方、関東から出たことが無いのだけれど、それを不便に思ったことはない。</p>
...略...
<hr />
<p>一方その頃、鳥取では大変なことが起きていた。</p>
...略...
</section>
<section>
<h2>第十章 鳥取、衝撃</h2>
<p>大変なことを知ってしまった。鳥取には、恐るべき生物が棲息しているというのだ。</p>
...略...
</section>
hr要素は、セクションとセクションの間ではなく、セクションの中に入れます。hr要素は文書のアウトラインに影響を与えません。
ポイント
アウトラインとセクションに関しては、本連載の第3回で詳しく解説しています。http://ascii.jp/elem/000/000/639/639293/
dl要素
- カテゴリー：フローコンテンツ、パルパブルコンテンツ（子要素に一つ以上のname-valueグループがある場合）
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：1つ以上のdt要素に続く一つ以上のdd要素のグループが0個以上
- コンテンツ属性：グローバル属性
dl要素は、HTML 4.01では「定義リスト（definition lists）」とされていましたが、HTML5では「記述リスト（a description list）」を表すようになりました。用語とその定義、メタデータと値など、いわゆる「ネーム：バリュー」で対になるリストに使います。現実には、HTML 4.01やXHTML 1.0でも拡大解釈してさまざまな用途に使われていたため、HTML5では仕様を実態に沿わせたという見方もできるかもしれません。
HTML 4.01と同様、dl要素の内容にはdt要素とdd要素のグループが入ります。
<dl>
<dt>著者</dt>
<dd>浜俊太朗</dd>
<dt>出版社</dt>
<dd>アスキー・メディアワークス</dd>
</dl>
dt要素は、同じ内容を複数記述する場合には使用するべきではありません。
■推奨されない例
<dl>
<dt>ポインティングデバイス</dt>
<dd>コジクール マウス G99</dd>
<dt>ポインティングデバイス</dt>
<dd>ケンジドン オプティックトラックボール</dd>
<dt>キーボード</dt>
<dd>レアルフォース 89UB</dd>
</dl>
このような場合は、文脈にもよりますが、1つのdt要素に複数のdd要素を使用して対応したほうがよいでしょう。
■推奨される例
<dl>
<dt>ポインティングデバイス</dt>
<dd>コジクール マウス G99</dd>
<dd>ケンジドン オプティックトラックボール</dd>
<dt>キーボード</dt>
<dd>レアルフォース 89UB</dd>
</dl>
また、dd要素は、1つの内容を1つのdd要素に入れる必要があります。1つの内容を複数のdd要素に分けないようにしましょう。
■誤った例
<dl>
<dt>たい焼き</dt>
<dd>一匹づつ焼くタイプを天然物と呼び、手が掛かるためか近年では減少傾向にあります。</dd>
<dd>一方、複数匹づつをまとめて焼くタイプは養殖物と呼ばれています。普段、よく見るのはこちらではないでしょうか？</dd>
<dd>両者の違いは焼き方だけではなく、火の通り方が違うことから、味も違ってきます。</dd>
</dl>
この場合は、1つのdd要素の中で細かくマークアップするとよいでしょう。
■正しい例
<dl>
<dt>たい焼き</dt>
<dd>
<p>一匹づつ焼くタイプを天然物と呼び、手が掛かるためか近年では減少傾向にあります。</p>
<p>一方、複数匹づつをまとめて焼くタイプは養殖物と呼ばれています。普段、よく見るのはこちらではないでしょうか？</p>
<p>両者の違いは焼き方だけではなく、火の通り方が違うことから、味も違ってきます。</p>
</dd>
</dl>
dt要素とdd要素は、組み合わせ（グループ）を意識してマークアップします。たとえば、以下のようなコンテンツがあります。
8月11日（土）の予定は、無し
8月12日（日）の予定は、早朝から出かける
これを以下のようにマークアップしてしまうと、「8月11日も8月12日も早朝から出かける」という意味になってしまいます。
■誤った例
<dl>
<dt>8月11日（土）の予定</dt>
<dt>8月12日（日）の予定</dt>
<dd>早朝から出かける</dd>
</dl>
dt要素とdd要素の組み合わせを意識し、以下のようにマークアップすると、正しい意味になります。
■正しい例
<dl>
<dt>8月11日（土）の予定</dt>
<dd>無し</dd>
<dt>8月12日（日）の予定</dt>
<dd>早朝から出かける</dd>
</dl>
こうしたdt要素とdd要素のルールは、バリデーターではチェックできません。制作者自身のチェックに委ねられる部分ですので、意識して記述しましょう。
dl要素をHTML 4.01の仕様のように定義リストとして使いたい場合は、dfn要素と組み合わせます。
<dl>
<dt><dfn>つゆだく</dfn></dt>
<dd>牛丼の汁を多めに盛り付けること</dd>
<dt><dfn>ねぎだく</dfn></dt>
<dd>ねぎを多めに盛り付けること</dd>
<dt><dfn>ツメシロ</dfn></dt>
<dd>ある程度冷ましたご飯を使うこと</dd>
<dt><dfn>トロだく</dfn></dt>
<dd>肉の脂身を多く盛り付けること</dd>
</dl>
なお、dl要素はネーム：バリュー型のリストに使用しますが、インタビューなどの会話文のマークアップには適していません。会話文のマークアップにはp要素を使うことが推奨されています。
<p>インタビュワー：その時、あなたはどんな気持ちでしたか？</p>
<p>回答者：とても幸せな気持ちだったわ</p>
<p>インタビュワー：具体的にどのような？</p>
<p>回答者：もう何も怖くないって感じね</p>
<p>インタビュワー：なるほど。今日はありがとうございました</p>
<p>回答者：こちらこそ</p>
