addressタグ 👉 連絡先の情報を表す

HTMLの<address>アドレスタグは、内容に連絡先や問い合わせ先の情報を含むことを示します。

<address>
  株式会社HOGEへのお問い合わせ<br>
  メール:<a href="mailto:hoge@hoge.com">hoge@hoge.com</a><br>
  電話:<a href="tel:012-345-6789">012-345-6789</a>
</address>

👆addressタグの中に個人や会社、団体の連絡先情報を含めます。連絡先の種類に特に決まりはなく、たとえば以下のようなものを含めます。

  • メールアドレス
  • 電話番号
  • 住所
  • ウェブサイトのURL
  • ソーシャルメディアのアカウントへのURL

addressタグを使う目的

<address>はセクショニングのためのHTMLタグの1つで「この部分に連絡先情報を含む」ことを示すために使います。それにより以下のようなメリットがあります。

  • 検索エンジンなどのプログラムが「どの部分が連絡先か」を判断するときの参考になる
  • 障碍者向けのスクリーンリーダーなどで内容を読み解く際のヒントになる(アクセシビリティの向上)
  • ソースコードを見たときに内容を判断しやすい(保守性の向上)

Google Chromeなどの主要ブラウザでは、デフォルトでaddressタグに対して斜体のフォントスタイル(font-style: italic)があてられていますが、装飾を目的として使うべきではありません。

🤔
検索エンジンに連絡先情報を伝える

ほかに検索エンジンに明確に連絡先情報を伝える手段として、Googleがサポートしている構造化データマークアップを活用する方法があります。SEO対策を目的とする場合には、構造化マークアップの検討をおすすめします。

🙅addressタグに入れてはいけないもの

以下のコンテンツはaddressタグの内容に含めてはいけません。

  • 見出しタグ(<h2><h3>など)
  • セクショニング・コンテンツ(<article><aside><section>, <nav>
  • フッターとヘッダー(<footer><header>

ただし、addressタグの親要素にはセクショニング・コンテンツ(<article><aside>など)や<header><footer>などを使うことができます(例:footerタグの中でaddressタグを使う)。

具体的な使い方

最後にサンプルコードを掲載します。

<p>
  ここに本文
</p>
<address>
  質問がある場合にはCatNoseまで<a href="https://twitter.com/catnose99">Twitterで連絡</a>してください。
<address>

👆ブラウザのデフォルトスタイルでdisplay: blockがあたっているため、段落のように使うことができます。