HTML初心者が最初に覚えるべきタグ(1)の続きになります。今回はdl,dt,dd要素とaddress要素についてです。
定義型リスト
<dl><dt><dd>は必ずセットで使います。1つだけ独立して使うことはありません。具体的な書き方は下記のようになります。
<dl> <dt>iPhone</dt> <dd>iPhoneは米アップル社が開発をしたスマートフォンです。タッチスクリーンによって操作をすることができ洗練されたUIとAppStoreから様々なアプリケーションを導入することができるのが特徴です。日本ではソフトバンクモバイルから端末が出ています。</dd> </dl>
このように<dl>要素の中に<dt>と<dd>が入ってくる形になります。<dt>は用語をマークアップします。<dd>は用語の説明文を書きます。<dl><dt><dd>は定義型リストと呼ばれます。まずはこの基本的な使い方をマスターしましょう。
定義型リストの活用法
定義型リストは実は様々な場面で応用できるとっても便利な要素です。基本的な使い方は「用語」と「その説明文」ですが、用語が「主」で説明文が「従」となっているのがお分かりでしょうか？そう、<dt>と<dd>には主従関係があるのです。この主従関係を上手く利用して例えば次のような使われ方をすることがあります。
<dl> <dt>2010年3月4日</dt> <dd>お知らせを更新しました</dd> <dt>2010年3月1日</dt> <dd>プレゼントキャンペーン実施中です</dd> </dl>
サイトのトップページなどに良くあるお知らせの部分ですね。これも定義型リストを使うととてもスマートに書くことができます。
またナビゲーションの部分にも利用することができます。親カテゴリーと子カテゴリーに分かれているような場合ですね。
<dl> <dt>菓子パンメニュー</dt> <dd> <ul> <li>メロンパン</li> <li>特製小倉アンパン</li> <li>シフォンケーキ</li> </ul> </dd> <dt>お飲み物メニュー</dt> <dd> <ul> <li>コーヒー</li> <li>紅茶</li> </ul> </dd> </dl>
上記のようにdtには親カテゴリーに当たる「菓子パンメニュー」「飲み物メニュー」を記述し、<dd>の中に<ul><li>を入れ子にして各メニューを記述しています。<dd>の中に<ul>を入れても良いの？と疑問に思う方もいるかもしれませんが、HTMLの文法上何ら問題ありません。<dd>の中にはブロック要素を入れても良いということになっているからです。ブロック要素とインライン要素に付いてはまた別のエントリーにて詳しく説明したいと思います。
画像とキャプションをマークアップするやり方とHTML5
他にも下記のように画像とそのキャプションとして使うやり方もあります。
<dl> <dt><img src="hoge.img" alt="真っ白なスズランの花の写真"></dt> <dd>庭に可愛らしい白いスズランの花が咲きました</dd> </dl>
この使い方はalt属性に代替テキストとして記述する内容と、ddにキャプションとして記述する内容が被ってしまいがちになるので、音声ブラウザ等で読み上げた時のことも配慮して慎重にaltとddに入れる文章を考える必要があります。またHTML5ではこのような画像とキャプションを使う場合にはfigure要素とfigurecaption要素というものが用意されています。将来的にHTML5に移行していくと、dl,dt,ddを使った画像とキャプションをマークアップするやり方は無くなると思われます。
<address>要素の使い方
<address>要素はその名の通りアドレスをマークアップするための要素です。具体的にはメールアドレスや住所、電話番号といったものになります。
<dl> <dt>住所</dt> <dd> <address>東京都新宿区新大久保◯-×-△△</address> </dd> <dt>電話番号</dt> <dd> <address>03-****-****</address> </dd> </dl>
上の例では定義型リストの中に書きましたが、必ずこのように書く必要はありません。下のような書き方でも良いでしょう。
<address>住所:東京都新宿区新大久保◯-×-△△ 電話番号:03-****-××××</address>
Copyright表記を<address>で囲っているサイトが良くありますが、連絡先をマークアップするためのものが
<address>要素ですから、純粋な意味での連絡先ではないCopyright部分は<address>でマークアップするべきではありません。
これで覚えるべきタグの約8割はマスターです。残りの要素は第3回で解説します。:-)