HTML

The <address> element in HTML is a semantic element used to indicate the author’s or operator’s contact information for a page or article.

address 要素

<address>要素とは

<address>要素は、HTML文書において連絡先情報や著者情報を示すためのセマンティック要素です。HTML4の時代から存在しますが、HTML5では「その文書やコンテンツの著者や所有者（作成者や管理者など）の連絡先情報を表す」ことを主目的とする、と定義されています。

主な用途
連絡先情報・発信元情報・文書の作者情報など
例
住所(郵便物の宛先としての地理的住所だけではなく、電話番号、メールアドレス、URL など)
表示上の特徴
デフォルトのブラウザスタイルでは斜体になる場合が多い（ブラウザやユーザエージェントによって異なる）

「address」という名前から連想しやすい誤解

<address>要素という名前から「物理的な住所(郵便番号や都道府県など)」だけを表すための要素と誤解されることがありますが、実際には「住所」に限定されません。例えば、その文書に関して質問や問い合わせをしたいときにどこへ連絡すればよいのかを示す役割が大きいです。

メールアドレス、SNSアカウントへのリンク、電話番号、その他連絡方法などを包括的に書くことができます。

基本的な使用方法

最小限の例

HTML

<address>
	<!-- この文書の作成者や管理者などの情報を記述 -->
	作成者 : 山田 太郎<br>
	連絡先 : <a href="mailto:taro@example.com">taro@example.com</a><br>
	住所 : 〒123-4567 東京都渋谷区1-2-3
</address>

<address>はコンテンツの所有者または著者の連絡先情報として機能します。

ブラウザによっては斜体でレンダリングされるため、見た目よりも**「セマンティックな意味付け」**として使う点が重要です。

ページ全体の著者情報としての使用例

もしそのページ全体の作者や管理者を示す場合は、通常ページの下部(フッターなど)に設置します。

HTML

<footer>
	<address>
		このサイトの管理者: 山田 太郎<br>
		E-mail: <a href="mailto:admin@example.com">admin@example.com</a><br>
		Tel: 03-1234-5678
	</address>
</footer>

ページ全体やサイト全体の連絡先に関する情報であれば、文書構造上<footer>内に配置すると自然です。

セマンティクス（意味付け）のポイント

HTML5の仕様では、<address>は「最近接する祖先要素（親要素ではなく、より上位にある包んでいる要素のうち最も近いもの）が持つコンテンツの作者や管理者の連絡先情報」を示すとされています。

もし文書の中に複数の<address>が存在する場合、**「その<address>が何の連絡先を示すのか」**が読み手や検索エンジンから分かりにくくなることがあります。必要に応じて<section>や<article>の構造をしっかり示したり、適切な見出しを付けたりして、どの部分に対応する連絡先かを明示しましょう。

<address>要素の詳細仕様・注意点

コンテンツカテゴリ

<address>要素は、「フローコンテンツ(flow content)」の一部であり、段落を含む他の要素と同列に扱われます。

そのため、多くのブロック要素の中に直接入れることができます。

<p>要素の中に直接<address>を入れるのはあまり望ましくありません。あくまでも<address>を独立したブロックとして考えるのが自然です。

インライン要素との併用

<address>内ではインライン要素(例: <a>, <span>, <strong>など)も問題なく使えます。メールアドレスやSNSのURLをリンク化する場合は<a>タグを使用します。

HTML

<address>
	お問い合わせ先: <a href="mailto:info@example.com">info@example.com</a>
</address>

見た目(スタイリング)上の変更

ブラウザのデフォルトスタイルでは斜体になることが多いですが、CSSを使って任意のスタイルに変更できます。セマンティクスを損なわない範囲で見やすくレイアウトすると良いでしょう。

CSS

address {
	font-style: normal; /* 斜体を解除 */
	display: block;     /* ブロック表示を明確に */
	margin: 1em 0;
}

適切な使用例と誤用例

適切な使用例

ブログ記事の著者プロフィールとして

HTML

<article>
	<h1>学習メモ：HTML5のセマンティクス</h1>
	<p>この記事では…（本文）</p>
	<address>
		著者: 佐藤 花子<br>
		Twitter: <a href="https://twitter.com/hanako_sato">@hanako_sato</a>
	</address>
</article>

<article>の内容に関連する連絡先として<address>を使う例。

Webサービスの運営会社情報として

HTML

<footer>
	<p>© 2025 Example Inc.</p>
	<address>
		運営: Example Inc.<br>
		住所: 〒000-0000 東京都〇〇区〇〇1-2-3<br>
		TEL: 03-xxxx-xxxx<br>
		メール: <a href="mailto:info@example.co.jp">info@example.co.jp</a>
	</address>
</footer>

サイト全体の運営会社情報を示す例。

誤用例

単なる物理的住所だけを意味なく囲む

HTML

<!-- 推奨されない例 -->
<address>
	お店の住所は〒123-4567 東京都渋谷区1-2-3です。
</address>

この場合、単に「お店の所在地」を示しているだけで、作者や連絡先の情報として扱っていないなら、<address>を使う必要は必ずしもありません。<address>要素はあくまで「連絡先情報」としての意味合いが強いことに注意が必要です。

文章全体の大半を<address>で囲んでしまう

HTML

<!-- 極端な例：文章全体を囲むのは誤用 -->
<address>
	私のブログへようこそ。ここでは日々の学習記録を公開しています。
	ブログを始めた理由は…
	（長い文章が続く…）
</address>

これは本来の<address>の意図を逸脱しており、文書全体を通して無意味に<address>を用いてしまっています。

<address>要素とアクセシビリティ

スクリーンリーダーとの相性

スクリーンリーダーは、<address>要素が使用されている箇所を「連絡先情報」や「所在地情報」等として認識する実装が行われている場合があります。これは意味を持たせたマークアップの利点の一つです。

<address>の周囲に見出し要素（例: <h2>, <h3> など）や、適切なセクショニング要素を用いることで、より分かりやすい文書構造を提示できます。

単に文章の見た目を変える目的で使用すると、支援技術の利用者に混乱を与える可能性があるため注意しましょう。

aria属性の活用

HTMLのネイティブなセマンティクスだけでも十分に意味を伝えられる場合が多いですが、必要に応じてaria-labelやaria-labelledbyなどを用いて、より明確に「これは何の連絡先か」を伝えることも検討できます。ただし、<address>要素の基本的な役割と重複しないようにすることが大切です。

Microdataや構造化データとの連携

Schema.orgなどを利用した拡張

Googleなどの検索エンジンは構造化データ(Microdata, JSON-LD, RDFa等)を解釈してコンテンツをより深く理解し、検索結果に反映しています。<address>要素と組み合わせることでローカルビジネス情報やオーサーシップ情報をより正確に伝えることが可能です。

たとえば、Schema.orgのPostalAddressなどのボキャブラリを利用して、物理的所在地や連絡先の一部をマークアップします。

HTML

<address itemscope itemtype="https://schema.org/Organization">
	<span itemprop="name">Example Inc.</span><br>
	<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
		住所: <span itemprop="postalCode">123-4567</span>
		<span itemprop="addressRegion">東京都</span>
		<span itemprop="addressLocality">渋谷区</span>
		<span itemprop="streetAddress">1-2-3</span>
	</div>
	TEL: <span itemprop="telephone">03-xxxx-xxxx</span><br>
	E-mail: <a href="mailto:info@example.co.jp" itemprop="email">info@example.co.jp</a>
</address>

住所に関する情報をitemprop="address"でラップし、その中でPostalAddressスキーマに基づいたマークアップを行う例です。

<address>要素のセマンティクスと、Schema.orgの構造化データを組み合わせることで、機械可読性を高めることができます。

JSON-LDとの併用

Googleなどの検索エンジンでは、HTMLの中に直接Microdataを埋め込む手法のほかに、JSON-LDスクリプトを使って構造化データを記述する手法を推奨しています。HTML上の<address>は人間が読むための連絡先情報を提供し、JSON-LDは検索エンジンが解析しやすい形で情報を補完するといった使い分けが可能です。

<address>を上手に活用するヒント

文書全体 or 個別のセクション
どの範囲の連絡先を表しているか、ページ全体なのか記事単位なのかを意識する。
見出しや周辺要素
addressが何の連絡先なのかを、見出しや文脈で明示する。
構造化データの検討
検索エンジンに正しく解釈してもらうために、必要に応じてMicrodataやJSON-LDを使う。
CSSでの見た目調整
デフォルトは斜体になりやすい。必要に応じてスタイルを変更。
誤用を避ける
ただの物理的住所や連絡先ではない情報を<address>で囲まない。役割が被る要素（例: <footer>のテキスト全体など）を必要以上に<address>で包まない。

まとめ

<address>要素は、HTML文書における連絡先情報をセマンティクにマークアップするための重要な要素です。名前から「住所だけ」を示す要素と思い込みがちですが、実際には「お問い合わせ先全般を示す」ことが大きな役割を持ちます。

をまとめて表現することができます。

初心者の方はまず「問い合わせ先・投稿者情報・管理者情報を入れるための要素」として認識し、文章構造やセマンティクスを意識しながら使ってみると良いでしょう。中級者以上の方は、構造化データとの併用やアクセスビリティ観点での使いこなしを検討し、より表現力の高いWebページ構築を目指すとよいです。

最後に改めて強調すると、HTMLは見た目よりも「意味付け」が大切です。<address>を正しく活用することで、文書の作者や運営者の情報を検索エンジンや支援技術に適切に伝え、使いやすいWebページを実現できます。今後サイトを制作・管理していく中で、連絡先や著者情報を載せる機会があれば、ぜひ<address>要素の活用を検討してみてください。