address 要素

address 要素はここ何年も前からあったものだ。実際のところ、HTML3のころからあったんだが、覚えているかい？しかし、この要素ができてからというもの、認識と実装について常に問題がつきまとってきたんだ。それで、この要素は HTML5 仕様に改めて組み込まれたが、私たちはそれをどうやって使うべきなのだろうか？簡単にまとめると、仕様ではこう言っている。

address 要素は、ドキュメントやドキュメントの一部分に対する連絡先情報を表します。address 要素で提供された情報には、ドキュメントの管理者の名前、管理者のウェブページへのリンク、お問い合わせ先のメールアドレス、住所、電話番号などを入れることができます。すべての住所やメールアドレスに address 要素が適しているというわけではありません。この要素は、該当のドキュメントの問い合わせを受ける人に関する情報を提供するために取っておくべきです。

上記のアドバイスに従えば、このように書くことができるだろう：

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>
</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 要素について心配することといえば、この要素は、その第一印象の通りのものではないということだ。みなさんの多くは、address 要素の間違った使い方や、人々が何年もこの要素を乱用してきたということついては、よく知っていることだろう。でも、あなたがそんなことは知らないというなら、例をひとつご覧頂きたい。

<address>
医師 ジャック・オズボーン
HTML5 病院,
お医者さん町,
グレート・ブリテン
電話: +44 (0)XXXX XXXXXX
</address>

あなたは、このコードを見て、正確に何が問題なのかと疑問に思うに違いない。それはとても簡単だ。address 要素は住所のために作られたのではないんだ。最新の仕様では、実際に関係している連絡先情報でない限り、任意のアドレス（住所など）を表すために address 要素は使ってはならないと、わざわざ明記されているんだ。

関連がないアドレスをマークアップするなら、この情報をマークアップするのに p 要素を使うことができる。hCard マイクロフォーマットを使って、その要素の多用途性を活かすことができる。前述の例にマイクロフォーマットを加えるとどうなるかを見てみよう。

<div class="vcard">
<p class="fn"><a class="url" href="#">医師 ジャック・オズボーン</a><p>
<p class="adr" >
<span class="street-address">HTML5 病院</span>
<span class="region">お医者さん町</span>
<span class="postal-code">郵便番号</span>
<span class="country-name">グレート・ブリテン</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

ご覧の通り、私は div に vCard クラスを入れたが、あなたはどのブロック要素にもそれを入れることができる。そして、私は p と span 要素に適切なクラスを入れてみた。

あいにく、hCard マイクロフォーマットについては、この記事の範囲外だ。これを入れたのは、読者のみなさんに、住所に address 要素を使ってはいけないことになっていることを示したかったからだ（それは、ドキュメント全体、または、ドキュメントのセクションに対する連絡先情報を提供するためのものだ）。しかし、その情報をセマンティックな値として最大限活かしたいなら、簡単なクラスを加えるだけで、そうすることができるのだ。これらのマイクロフォーマットの使い方に自信が無いようなら、hCard ジェネレータを訪れるといいだろう。あなたの面倒を全部片付けてくれだろう。