address 要素
address 要素は、HTML3 が 1995 年に起草されてからずっとあったものだが、HTML5 の最新の草案でも残り続けている。しかし、誕生からここ 15 年間というもの、ディベロッパーでは未だに混乱を招いている。では、私たちは、どのようにして address 要素を使うのが良いのだろうか?
正しい使い方
ちょっと仕様を覗いてみよう:
address 要素は、ドキュメントやドキュメントの一部分に対する連絡先情報を表します。address 要素で提供された情報には、ドキュメントの管理者の名前、管理者のウェブページへのリンク、お問い合わせ先のメールアドレス、住所、電話番号などを入れることができます。すべての住所やメールアドレスに address 要素が適しているというわけではありません。この要素は、該当のドキュメントの問い合わせを受ける人に関する情報を提供するために取っておくべきです。
W3C HTML5 仕様
上記のアドバイスに従えば、このように書くことができるだろう:
HTML5 Doctor は次のボランティア・グループによって運営されています:
<address>
<a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
<a href="http://html5doctor.com/author/richc">Rich Clark</a>,
<a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
<a href="http://html5doctor.com/author/toml">Tom Leadbetter</a>,
<a href="http://html5doctor.com/author/brucel">Bruce Lawson</a>,
<a href="http://html5doctor.com/author/remys">Remy Sharp</a>,
<a href="http://html5doctor.com/author/olib">Oli Studholme</a>
</address>
別の例もご覧いただこう。これは私たちがまさにこのサイトで使っているものだ。
<footer>
<div class="vcard">by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer>
私たちのホームページのソースコードを見れば、address 要素を記事の footer の中に入れて使っているのが分かるだろう。ページの中でそれを何回も使っているのだ。これは情報を集約するのに便利なはずだ。
間違った使い方
あらゆる住所のマークアップに address 要素を使うべきだ、という誤解が良くある。次の例を見てほしい:
<!-- This is bad! -->
<address>
Dr. Jack Osborne<br>
HTML5 Hospital,<br>
Doctorville,<br>
Great Britain<br>
Tel: +44 (0)XXXX XXXXXX
</address>
このコードの何が悪いのだろうか?それは至って簡単だ。address 要素は住所のために作られたのではないんだ。最新の仕様では、該当の住所が、実際に、ドキュメントもしくはドキュメントのセクションに関連する連絡先情報でない限り、任意のアドレス(住所など)を表すために address 要素は使ってはならないと、わざわざ明記されているんだ。
任意の住所のマークアップ
では、該当のドキュメントに直接に関連しない住所はどうすれば良いのだろう?一つの方法として、p 要素を hCard マイクロフォーマットと組み合わせて使うことができる。
hCard を使って、先ほどの例を書き換えてみよう:
<div class="vcard">
<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
<p class="adr">
<span class="street-address">HTML5 Hospital</span><br>
<span class="region">Doctorville</span><br>
<span class="postal-code">Postal Code</span><br>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>
ここでは、任意の住所ではなく、ドキュメント全体またはドキュメントのセクションに対する連絡先情報を提供するために address 要素を使うことになっている点を念押しするために hCard を紹介した。もし その情報をセマンティックな値として最大限活かしたいなら、 私たちの記事の extending HTML5 with microformats や HTML5's new microdata attributes を読んでほしい。
もし マイクロフォーマットの使い方に自信が無いようなら、hCard ジェネレータを見てほしい。あなたの面倒を全部片付けてくれだろう。