address 要素は住所に使う、という誤解はかなり昔からありました。実は、address 要素が誕生したときから住所という用途は規定されたことはありません。現在の address 要素は、当初と比べて、より実用的になりました。今回は、address 要素の正しい使い方を見ていきましょう。
address 要素の使いどころ
address 要素は、コンテンツに関する連絡先情報です。具体的にはメールアドレス、著者に関連するウェブページへのリンク、電話番号などです。address 要素は footer 要素の中で使われることが多いと言えます。
<footer>
<address>
著者：忍者 太郎<br>
メール：ninja@example.jp<br>
Twitter：<a href="https://twitter.com/WebFrontendN">@WebFrontendN</a>
</address>
</footer>
連絡先の氏名や部署名も入れるのが一般的です。また、連絡手段となるものであれば、メールアドレスや電話番号以外にも、Twitter のアドレスでも良いでしょう。
マークアップする場所に注意
HTML4 以前では、address 要素はページ全体またはメインとなるコンテンツの連絡先情報を表していました。通常であれば、これで困ることはなかったのでしょう。しかし、その後、とりわけブログが登場してから問題が出てきました。
例えば、ブログのトップページを想像してください。新着の記事の抜粋が一覧で表示されているとします。よくあるブログのトップページですよね。しかし、各記事ごとに著者が違うとします。企業が運営するブログでは良くある運用方法ですね。
<body>
<!-- 最新記事一覧 -->
<div>
<div>
<div>
<h2>記事1</h2>
<address>著者：<a href="mailto:taro@example.jp">たろう</a></address>
</div>
<p>本文の抜粋…</p>
</div>
<div>
<div>
<h2>記事2</h2>
<address>著者：<a href="mailto:jiro@example.jp">じろう</a></address>
</div>
<p>本文の抜粋…</p>
</div>
</div>
<!-- ページフッター -->
<div>
<address>
忍者 太郎<br>
メール：ninja@example.jp<br>
Twitter：<a href="https://twitter.com/WebFrontendN">@WebFrontendN</a>
</address>
</div>
</body>
HTML4 の時代、article 要素もなければ footer 要素もありません。人が見れば、どの連絡先情報がどの記事の連絡先情報なのかは一目瞭然なのですが、HTML4 では機械的にコンテンツと連絡先を対応付けるルールがありませんでした。
HTML5 以降、ある特定のコンテンツの連絡先情報は、どの address 要素が該当するのかについて詳細に規定されました。WAHTWG HTML 仕様の規定は以下の通りです（日本語訳は筆者）。仕様の規定にあわせて、ここでは「ある特定のコンテンツ」を node と呼びます。
nodeが article 要素または body 要素の場合- その
nodeの連絡先情報は、祖先にnodeを持つけれども、nodeの子孫に他の body 要素や article 要素を祖先に持たない、すべての address 要素から構成されます。 nodeが祖先要素に article 要素または body 要素を持つ場合- その
nodeの連絡先情報は、その直近の祖先となる article または body 要素の連絡先情報と同じです。 nodeのノードドキュメントが body 要素を持つ場合- その
nodeの連絡先情報は、Document の body 要素の連絡先情報と同じです。 - 上記に当てはまらない場合
- その
nodeの連絡先情報はありません。
相変わらず何を言っているのか良く分かりませんね。視点を変えて、address 要素がどのコンテンツの連絡先情報になるのか、という表現に変えてみましょう。
address 要素は、祖先に article 要素か body 要素がいれば、その直近の article 要素か body 要素の連絡先情報になります。言い換えると、祖先に article 要素がいれば、その article 要素の連絡先情報になり、祖先に article 要素がいなければ、ページ全体（body 要素）の連絡先情報になる、ということです。
では、前述のブログのトップページのマークアップを今風に書き換えてみましょう。
<body>
<!-- 最新記事一覧 -->
<div>
<article>
<footer>
<h2>記事1</h2>
<address>著者：<a href="mailto:taro@example.jp">たろう</a></address>
</footer>
<p>本文の抜粋…</p>
</article>
<article>
<footer>
<h2>記事2</h2>
<address>著者：<a href="mailto:jiro@example.jp">じろう</a></address>
</footer>
<p>本文の抜粋…</p>
</article>
</div>
<!-- ページフッター -->
<footer>
<address>
忍者 太郎<br>
メール：ninja@example.jp<br>
Twitter：<a href="https://twitter.com/WebFrontendN">@WebFrontendN</a>
</address>
</footer>
</body>
「著者：太郎」と「著者：次郎」の address 要素は、祖先に article 要素がいるため、その連絡先情報は article 要素の連絡先情報になります。
また、最後の「忍者 太郎」の address 要素の祖先には article 要素がいません。祖先をたどると body 要素に行きつきます。ということは、その address 要素は、ページ全体、または、サイト全体の連絡先情報ということになります。
なお、article 要素の中の footer 要素が最後ではなく最初にマークアップされている点に違和感を感じた人もいると思います。しかし、これは問題ありません。詳細は「footer 要素は最初と最後に2つ配置しても良い？」をご覧ください。
address 要素は複数あっても良い？
これまでのサンプルでは、article 要素に 1 つの address 要素しかマークアップされていませんでした。また、body 要素に関連付けられる address 要素も 1 つだけでした。では、例えば、article 要素の中に 2 つ以上の address 要素をマークアップしても良いのでしょうか？答えは Yes です。
<article>
<header>
<h1>記事タイトル</h1>
<address>
著者：<a href="mailto:jiro@example.jp">じろう</a>
</address>
</header>
<p>記事本文…</p>
<footer>
<address>
Twitter：
<a href="https://twitter.com/WebFrontendN">@WebFrontendN</a>
</address>
</footer>
</article>
上記サンプルでは、article 要素の中に header 要素と footer 要素がありますが、それぞれに address 要素がマークアップされています。セマンティクスとしては、この article 要素が表す記事の連絡先は、2 つの address 要素のコンテンツをマージしたものになります。
このように、必要に応じて、連絡先を複数の address 要素に分離してマークアップしても問題はありません。
住所に使ってはいけない？
address 要素は住所に使ってはいけないと聞いたことや読んだことがあるのではないでしょうか。結論を言うと必ずしもそうではありません。
とあるページに、メインコンテンツに関する問い合わせ先が書かれているとします。その内容は、こんな感じだったとしましょう。
<footer>
<address>
<p>本件に関する問い合わせは電話のほか郵便でも受け付けます。</p>
<p>
電話：03-0000-0000、
住所：〒000-0000 東京都忍者区1-1-1 忍者太郎宛
</p>
</footer>
いちおう、この住所は間違いなくページや記事などに関する連絡先として使われています。ですので、address 要素を乱用しているとは言えない思います。
一般に住所に address 要素を使ってはいけないというのは、ページや記事に関する連絡先でない住所のことです。例えば、会社概要に本社所在地が掲載されていますが、その住所に address 要素は不適切です。また、不動産のウェブサイトを想像したときに、物件の住所が掲載されることになりますが、そこに address 要素を使うのも不適切です。
連絡先情報はどこまでを指す？
address 要素は、連絡先情報以外の情報を含んではいけないことになっています。では、どこまでが連絡先情報なのでしょうか？例えば、次の例は間違いです。
<address>
<p>ただいまキャンペーン中につき本日中に電話注文の方は3割引き！</p>
<p>こちらにお電話ください：00-0000-0000</p>
</address>
キャンペーン中の話は明らかに連絡先情報ではありません。この場合は次のようにマークアップするべきでしょう。
<div>
<p>ただいまキャンペーン中につき本日中に電話注文の方は3割引き！</p>
<address>こちらにお電話ください：00-0000-0000</address>
</div>
とはいえ、実際に HTML を書いていると、具体的にどこまでが連絡先情報なのかを悩むときもあるでしょう。そのときは、例えば、スクリーンリーダーに「連絡先を教えて」と命令したら、読み上げてほしい内容を考えてみましょう。
「こちらにお電話ください：」は address 要素に入れなくても良いと考えた人もいるのではないでしょうか。しかし、スクリーンリーダーに連絡先を読み上げてもらうことを考えると、いきなり数字の羅列を読み上げられるより、それが電話であることも伝えた方が分かりやすくないでしょうか？
人によって多少の違いは出てくるかもしれませんが、スクリーンリーダーの読み上げを想像すると、おおむね、妥当な結果になるのではないでしょうか。
address 要素の中に入れて良い要素と入れてはいけない要素とは？
初めて address 要素を使おうとすると、恐らく、address 要素の中にどんな要素を入れても良いのだろうかと疑問に思う人もいるのではないでしょうか。
ネット上の address 要素のサンプルの多くは、あたかも p 要素と同じように使っているため、p 要素のように、テキストを直接入れるか、span 要素や a 要素などのインライン的な要素しか入れてはいけないと思った人もいるのではないでしょうか。
実は、address 要素は、HTML4 ではブロック要素として規定されていました。そして、W3C HTML5 や WHATWG HTML 仕様ではフローコンテントと呼ばれる要素を入れても良いことになっています。フローコンテントを入れられる要素というのは、HTML4 のブロック要素に近く、事実上、ほとんどの要素を入れることが可能です。たとえば、address 要素の中に div 要素を入れることも可能です。
ただし、WHATWG HTML 仕様では、address 要素の中に入れてはいけない要素を個別に定義しています。入れてはいけない要素は以下の通りです。
- ヘッディングコンテント（h1 ～ h6 要素、hgroup 要素）
- セクショニングコンテント（article 要素、aside 要素、nav 要素、section 要素）
- footer 要素、header 要素、address 要素
一つ一つ覚える必要はありません。address 要素の用途を考えれば、当然、入っていたら違和感を感じる要素ばかりです。
フローコンテントには video 要素、auido 要素、canvas 要素、iframe 要素なども含まれています。文法上は許されていたとしても、連絡先情報のコンテンツとして変な要素はたくさんありますので、注意しましょう。
まとめ
筆者が知る限り、address 要素をマークアップしたからといって、現時点で役立っているのかというと、そうではありません。スクリーンリーダーも Google 検索エンジンのロボットも address 要素を使って何かしているわけではなさそうです。
しかし、これも卵と鶏の話と同様です。世の中のウェブサイトが適切に address 要素を使うようになれば、スクリーンリーダーや Google 検索エンジンロボットも何かしら address 要素を役立ててくれるようになるかもしれません。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
