このページの本文へ

サンプルで学ぶHTML5の仕様変更要素・前編 (2/4)

2012年08月09日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

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>

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く