記事タイトル
本文 ...
著者: 山田太郎Twitter: @yamada
タイトル: address要素
SEOタイトル: HTML address要素 完全ガイド（問い合わせ先のセマンティック / article との関係 / 住所表記との違い）
| この記事の要点 |
|
address 要素とは
address 要素は、最も近い article 祖先要素または body 要素に対する問い合わせ先 (contact information)を表すセマンティック HTML 要素です。
名前から「住所を書く要素」だと誤解されがちですが、住所そのものではなく「連絡先」のためのもの。たとえば本の登場人物の住所には使いません。
基本構文
お問い合わせ:
info@example.com
TEL: 03-1234-5678
article 内 vs body 直下
| 配置 | 意味 |
|---|---|
article 内 | その記事の著者への連絡先 |
body 直下 (footer 等) | そのページ / サイト全体の運営者連絡先 |
Twitter: @yamada
address に含めてよいもの / よくないもの
| OK | NG (使わない) |
|---|---|
| メールアドレス | 記事公開日 |
| 電話番号 | 著作権表記 (©) |
| 物理住所 (連絡先としての) | 本文中に出てくる第三者の住所 |
| SNS リンク | 関係のない情報 |
| 担当者名 / URL | 長い文章 |
NG: 本文中の住所
東京タワーの所在地は、
東京都港区芝公園 4-2-8
です。
東京タワーの所在地は、
東京都港区芝公園 4-2-8
です。
NG: copyright 表記
© 2026 Example Inc. All rights reserved.
定番パターン — サイトフッター
定番パターン — ブログ記事の著者情報
記事タイトル
記事本文 ...
UA デフォルトスタイル
ブラウザの UA スタイルシートで address は斜体 (italic) で表示されます。デザイン上不要なら CSS で打ち消し。
address {
font-style: normal; /* 斜体を解除 */
line-height: 1.7;
}microdata / Schema.org との組み合わせ
連絡先を構造化データとして検索エンジンに伝えるには Schema.org の Organization や Person と組み合わせます。
株式会社サンプル
千代田 1-1
千代田区
東京都
100-0001
Email: info@example.com
FAQ
Q: 住所だけ書く場合 address を使ってもいい？
A: 連絡先としての住所なら OK。本文中の単なる地名 / 場所には使わない。
Q: address 内に address をネストできる？
A: 仕様上禁止。1 つの address 内に複数の連絡先を並べる。
Q: 斜体を解除する場合は？
A: address { font-style: normal; } で上書き。多くのデザインで実施される。
Q: 個人情報を直接書いても大丈夫？
A: 公開ページに書く以上、漏洩を承知の上で。スパム対策に data-email 属性 + JS で組み立てる、フォームに誘導するなどの対策をすると安全。
セマンティック要素としての位置づけ
HTML5 が導入したセマンティック要素群 (header, nav, main, article, section, aside, footer) のなかで address は古参 (HTML4 から存在) ですが、用途は明確化されました。「文書の作成者・運営者への連絡経路」という機械可読な情報として位置づけられます。
| 用途 | 使うべき要素 |
|---|---|
| 運営会社の問い合わせ先 | address (footer 内) |
| 記事著者の連絡先 | address (article 内) |
| 商品の販売店住所 | address + Schema.org PostalAddress |
| 本文中で言及する第三者の住所 | p + 構造化マークアップ |
| 地図のキャプション | figcaption |
関連
- href属性 — リンク先 URL の指定 (address 内のリンクで使う)
article— 独立したコンテンツ単位footer— セクション / ページのフッターcontactページ — 詳細な問い合わせフォーム