Web サイトのフッターやお問い合わせページで、運営者名・メールアドレス・住所などの「連絡先」を書くことはよくあります。この連絡先情報を、見た目のためだけに <p> や <div> で囲んでいないでしょうか。HTML には連絡先を表すための専用要素 <address> があります。この記事では、<address> が表す意味、正しい使い方、どこに何を書くべきか、そしてよくある誤用までを初心者向けに解説します。
目次
address 要素とは
<address> は、その文書または記事の「連絡先情報」を表すセマンティック要素です。セマンティックとは「意味を持たせる」という意味で、見た目ではなく「この部分は連絡先です」という情報をブラウザや検索エンジン、支援技術（スクリーンリーダーなど）に伝えます。多くのブラウザでは初期スタイルとして中身が斜体（イタリック）で表示されますが、これはあくまで既定のスタイルであり、CSS で自由に変更できます。
<address>
お問い合わせ: <a href="mailto:info@example.com">info@example.com</a><br>
電話: <a href="tel:+81-3-1234-5678">03-1234-5678</a>
</address>この例では、メールアドレスと電話番号という連絡手段を <address> でまとめています。<a> の mailto: や tel: と組み合わせると、クリックでメール送信や発信ができ、連絡先としての実用性も高まります。連絡先の各項目を改行したいときは <br> を使うか、後述のように他の要素と組み合わせます。
どこに書くか｜サイト全体か記事単位か
<address> は「どこに置くか」で意味が変わります。もっとも近い <article> の中にあればその記事の著者の連絡先、<body> 直下や <footer> にあればページ（サイト）全体の連絡先を表します。ブログ記事なら、著者情報として記事の <footer> に置くのが自然です。
<article>
<h1>記事のタイトル</h1>
<p>本文がここに入ります。</p>
<footer>
<p>この記事の執筆者:</p>
<address>
山田 太郎（<a href="mailto:yamada@example.com">yamada@example.com</a>）
</address>
</footer>
</article>このように <article> 内の <footer> に置くと、「この記事を書いた人の連絡先」だと明確に伝わります。サイト全体の連絡先を表したい場合は、ページ全体の <footer>（<article> の外側）に <address> を置きます。置き場所によって「誰の連絡先か」が決まることを意識しましょう。
address に入れてよいもの・いけないもの
<address> はあくまで「連絡先」を表す要素なので、連絡先に関係のない情報を入れるのは誤用です。特に混同しやすいのが「郵便の住所（所在地）」です。<address> という名前から住所専用の要素だと思われがちですが、実際は連絡を取るための情報全般を表します。逆に、連絡先ではない住所（たとえば記事本文で紹介する店舗の所在地など）には使いません。
| 内容 | address に入れてよいか |
|---|---|
| 著者名・運営者名 | よい（連絡先の一部として） |
| メールアドレス・電話番号 | よい |
| 問い合わせページへのリンク・SNS | よい |
| 連絡先としての所在地 | よい |
| 記事の公開日・更新日 | 不可（<time> を使う） |
| 本文で紹介する任意の住所 | 不可（連絡先ではないため） |
また、<address> の中に <h1>〜<h6> の見出しや、<article>・<section>・<header>・<footer> といった構造的な要素を入れることは、仕様上できません。中身は連絡先を表すテキストと、<a> や <br> のようなインライン要素にとどめます。日付を書きたくなったら <address> の外に出し、<time> 要素を使いましょう。
見た目の斜体を変えたいとき
「<address> を使ったら文字が斜体になってしまった」というのは、要素の不具合ではなくブラウザの既定スタイルです。<address> には font-style: italic; が初期値として当たっているため斜体になります。デザインに合わせて変えたいときは、CSS で上書きします。
/* 斜体をやめて通常の文字に戻す */
address {
font-style: normal;
line-height: 1.8;
}font-style: normal; を指定すれば斜体は解除されます。セマンティックな意味（連絡先である、という情報）はそのまま保ちつつ、見た目だけを自由に整えられるのが HTML と CSS の役割分担です。斜体が嫌だからといって <p> に置き換えるのではなく、<address> のまま CSS で調整するのが正しいアプローチです。
まとめ
<address> は、文書や記事の連絡先情報を表すセマンティック要素です。住所専用ではなく、著者名・メールアドレス・電話番号・問い合わせリンクなど、連絡を取るための情報全般をまとめます。<article> の中に置けばその記事の著者の連絡先、ページの <footer> に置けばサイト全体の連絡先、というように置き場所で意味が決まります。記事の公開日や、本文中で紹介する任意の住所には使わない点に注意しましょう。既定で斜体になりますが、これはブラウザのスタイルなので font-style: normal; で調整できます。連絡先を書くときは <div> ではなく <address> を選ぶことで、意味の伝わる読みやすい HTML になります。