Posted at

そういえばaddress要素、正しく使えてた?

More than 1 year has passed since last update.

セクションの要素内でfooter要素についてまとめていたところ、address要素をどうやって入れるんだっけ?と調べていたら、自分の中の認識と違うことがわかりました。


address要素は問い合わせ先情報

ページ最下部の更新年や著作権情報を囲うのが<address>……と思い込んでいたのですが、これは使用用途として誤りでした。


The address element must not contain information other than contact information.

address要素は、連絡先以外の情報を含めることは出来ません。

For example, the following is non-conforming use of the address element:

address要素の間違った使用方法は以下の通りです。

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>


フッター部分最下部としてaddress要素を多用していたので結構衝撃でした……

address要素に連絡先情報以外、例えば著作権情報や年号などを入れるのは不適切な使い方ということです。


NG構文

<address>

2017 Example Corp. All rights reserved.
</address>

正しいaddress要素の構文


OK構文

<footer>

<address>
管理人の連絡先:
<a href="mailto:info@example.com"> Nox Git </a>
</address>
<p><small>Copyright 2017 Example Corp.</small> </p>
</footer>

作成年日や著作権情報は連絡先ではないので、入れるならpなどを使いましょう、ってことだとか。


HTML5でのaddressは?

HTML5ではセクション要素が追加になったため、直近のarticle要素またはbody要素の内容に関する問い合わせ先を示すという意味になりました。

article要素に含まれていない場合は、body要素(=ページ全体)に関する問い合わせ先を示すことになります。


The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.


W3C勧告より

https://www.w3.org/TR/html5/sections.html#the-address-element