addressタグを使って連絡先情報を適切にマークアップする方法をわかりやすく解説

INDEX

addressタグの概要

連絡先情報のマークアップ HTMLタグ

<address>連絡先情報</address>

概要 addressタグは、文書やページの連絡先情報を示すためのHTMLタグです。通常、サイト管理者や企業の住所、メールアドレス、電話番号などを含めます。

属性	説明	使用例
`class`	CSSでスタイルを適用するためのクラスを指定する	`<address class="contact-info">...</address>`
`id`	一意の識別子を付与する	`<address id="company-address">...</address>`
`lang`	コンテンツの言語を指定する	`<address lang="en">1234 Elm Street, NY</address>`

addressタグを使用することで、連絡先情報を適切にマークアップできます。

<address>
  <p>お問い合わせ: <a href="mailto:info@example.com">info@example.com</a></p>
  <p>所在地: 〒100-0001 東京都千代田区1-1-1</p>
</address>

表示例：

お問い合わせ: info@example.com

所在地: 〒100-0001 東京都千代田区1-1-1

SEO効果: 検索エンジンはaddressタグを使った情報を「連絡先情報」として認識しやすくなるため、適切なマークアップはSEOに有利に働く可能性があります。
アクセシビリティ: スクリーンリーダーを使用するユーザーにとって、連絡先情報を明確に識別できるため、アクセシビリティ向上に貢献します。

単なる住所や連絡先以外には使用しない: addressタグは連絡先情報を示すためのものであり、地理的な住所や場所の情報を表す目的では使用しない。
企業名や組織名は含めないのが推奨: addressタグの目的は「連絡先情報」の明示であり、会社名などは通常、<p>タグや<strong>タグでマークアップするほうが適切。
本文中の住所には使わない: 文章の一部として住所を表記する場合は、通常の<p>タグを使用し、addressタグはページ全体の連絡先情報のみに使用するのが適切。
SEOに影響を与える可能性がある: 検索エンジンはaddressタグを「連絡先情報」として扱うため、誤用するとSEO評価に悪影響を与える可能性がある。

Q: addressタグの中に会社名を含めてもよいですか？: A: 可能ですが、addressタグはあくまで「連絡先情報」を示すものであり、会社名は通常<p>タグなどでマークアップします。
Q: addressタグをフッター以外で使用できますか？: A: はい、ブログ記事の著者情報や個別の連絡先情報の記載にも適用できます。
Q: 住所とメールアドレスの両方を入れても問題ありませんか？: A: 問題ありません。addressタグ内に複数の連絡先情報を記載できます。