catnose
catnose
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があたっているため、段落のように使うことができます。