HTMLのaddressタグの使い方！連絡先情報をマークアップ

html

HTMLのaddressタグは、Webページや記事の作成者、所有者、または連絡先に関する情報を示すために使用されます。
通常、フッター部分に記述され、著作権情報、連絡先、所在地などをマークアップするのに適しています。

addressタグの基本的な使い方と配置

addressタグは、連絡先情報を囲むだけで使用できます。通常、<footer>タグ内や記事の末尾などに配置されます。

<footer>
  <address>
    お問い合わせ先：<a href="mailto:info@example.com">info@example.com</a><br>
    電話番号：092-XXX-XXXX<br>
    所在地：福岡県筑紫野市〇〇
  </address>
</footer>

<article>
  <h1>記事のタイトル</h1>
  <p>記事の内容...</p>
  <address>
    この記事の著者：山田 太郎（<a href="mailto:taro.yamada@example.com">taro.yamada@example.com</a>）
  </address>
</article>

上記のHTMLは、ブラウザで以下のように表示されます。（chromeのデフォルト表示）

addressタグで囲まれたテキストは、通常、斜体で表示されます。
意味的には「連絡先情報」であることを示すセマンティック要素です。

addressタグの表示確認

addressタグの意味合い

addressタグは、囲まれたテキストがWebページ全体またはその一部（例えば、<article>要素内のコンテンツ）の連絡先情報であることを示す意味合い（セマンティクス）を持っています。
これは、単にテキストを斜体にするためではなく、情報が連絡先に関連していることを明確にするためのものです。

スクリーンリーダーなどの支援技術は、addressタグで囲まれたテキストを、通常のテキストとは異なる方法で読み上げることがあります。

addressタグにスタイルを適用する

addressタグのデフォルトのスタイル（斜体）は、CSSで上書きしたり、さらに他のスタイルを追加したりすることができます。

address {
  font-style: normal; /* 斜体を解除 */
  margin-top: 1em;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

address a {
  color: blue;
  text-decoration: underline;
}

<footer>
  <address>
    © 2025 〇〇株式会社<br>
    <a href="/company/contact">お問い合わせ</a>
  </address>
</footer>

上記の例では、addressタグのfont-styleをnormalに設定して斜体を解除し、背景色や枠線などのスタイルを追加しています。
また、<address>タグ内のリンクのスタイルも変更しています。

実際にブラウザで確認すると、下記のようになりました。
addressタグにスタイルを適用

addressタグを使用する際の注意点

  • 連絡先情報のみに使用する: addressタグは、Webページや記事の作成者または所有者の連絡先情報を示すためのものです。単なる住所や所在地など、連絡先とは関係のない情報には使用するべきではありません。
  • 著作権情報は<p>や<span>で: 著作権表示 (&copy; 2025 ...) は、企業や作者の権利表示であり、連絡手段ではありません。addressタグではなく、<p>タグや<small>タグなどで記述し、必要に応じてCSSで装飾を加えるのが適切です。
  • 構造を意識する: <address>タグ内では、<br> タグなどを使用して情報を適切に改行し、構造を分かりやすくすることが重要です。
  • リンクの活用: メールアドレスや電話番号は、<a>タグのmailto:スキームやtel:スキームと組み合わせてリンクにすると、ユーザーが直接アクションを起こしやすくなります。

addressタグの記述例

以下はaddressタグの記述例です。

<footer>
  <p>© 2025 〇〇株式会社</p>
  <address>
    東京都千代田区〇〇<br>
    <a href="/company/contact">お問い合わせはこちら</a>
  </address>
</footer>

<article>
  <h1>最新ニュース</h1>
  <p>記事の内容...</p>
  <p>公開日：2025年5月15日</p>
  <address>
    投稿者：<a href="/users/john-doe">John Doe</a>
  </address>
</article>

ブラウザに表示すると、下記のようになります。
addressタグの使用例

まとめ

addressタグは、Webページや記事の連絡先情報を意味的にマークアップするための重要な要素です。
フッターや記事の末尾などで、作成者や所有者の連絡先、所在地などを適切に記述することで、Webページの信頼性を高め、ユーザーに必要な情報を提供することができます。

addressタグの正しい意味合いを理解し、「連絡手段に限定」して正しい場面で活用しましょう。

HTML
yasuaki

コメント