addressタグ -連絡先情報を表す｜HTML辞典
<address>タグとは？
<address> タグは、連絡先情報（住所、電話番号、メールアドレスなど）を表すためのタグです。
ページの所有者や、記事の著者の連絡先情報を明示する際に使用されます。
コンテンツモデル
フローコンテンツ（Flow Content）、セクショニングルート（Sectioning Root）。
閉じタグの有無
<address> は 開始タグ（<address>）と閉じタグ（</address>）の両方が必要 です。
基本的な記述方法
<address>
〒100-0001 東京都千代田区千代田1-1<br>
TEL: 03-1234-5678<br>
Email: <a href="mailto:info@example.com">info@example.com</a>
</address>
使用できる主な属性
<address> タグには特別な属性はありません。
CSSを使ったデザイン変更
<address> タグのデフォルトのスタイルは 斜体（italic） ですが、独自のスタイルを適用できます。
address {
font-style: normal;
background-color: #f8f8f8;
padding: 10px;
border-left: 4px solid #ccc;
}
適切な使用例
✅ 会社やウェブサイトの連絡先を記載する
<address>
株式会社サンプル<br>
〒160-0022 東京都新宿区新宿1-2-3<br>
TEL: 03-9876-5432<br>
Email: <a href="mailto:contact@example.com">contact@example.com</a>
</address>
✅ 記事の著者情報を記載する
<footer>
<p>この記事の著者:</p>
<address>
<a href="mailto:author@example.com">author@example.com</a>
</address>
</footer>
✅ サイト運営者の情報を明示する
<address>
運営者: Example Inc.<br>
サポート: <a href="mailto:support@example.com">support@example.com</a>
</address>
適切でない使用例（誤った使い方）
❌ <address> を通常の住所表示に使う（連絡先情報でない場合は不適切）
<!-- NG: ただの住所として使用 -->
<p><address>東京都渋谷区渋谷1-1-1</address> に住んでいます。</p>
✅ 正しい書き方（連絡先情報にのみ使用）
<address>
会社所在地: 東京都渋谷区渋谷1-1-1
</address>
❌ <address> を単なる装飾目的で使用する
<!-- NG: 住所以外の情報に使用 -->
<address>現在の天気は晴れです。</address>
✅ 正しい書き方（適切なタグを使用）
<p>現在の天気は晴れです。</p>
<address>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<address> | 連絡先情報を示す | 斜体で表示される（デフォルト） | 会社や著者の連絡先情報 |
<p> | 段落を作成 | 連絡先以外の情報向け | 通常のテキスト表示 |
<footer> | ページやセクションのフッターを示す | <address> を含めることができる | 記事の著者情報、運営情報 |
使用上の注意点
✅ <address> は連絡先情報のみに使用する
- 単なる住所表示には使わず、著者情報や運営者の連絡先として使用するのが適切。
✅ mailto: を活用してメールリンクを作成する
mailto:info@example.comを使うことで、クリックでメールを送れるようにする。
✅ <footer> 内で使用すると意味が明確になる
- ページの著者情報や連絡先として適切に配置することで、SEO にも有効。
関連タグ
まとめ
<address> タグは、HTML文書内で 連絡先情報（住所、電話番号、メールなど）を表すためのタグ です。
著者情報や会社の問い合わせ先を記載する際に活用し、適切な場所に配置すると SEO やアクセシビリティの向上につながります。
