過去バージョン

この記事の要点

address 要素は最も近い article / body に対する問い合わせ先を表すセマンティック要素 一般的な「住所」を表す要素ではない — 単なる住所には p など他の要素を使う 内容: メール / 電話 / 物理住所 / SNS / 担当者名など、連絡を取るための情報 デフォルトのスタイル: 斜体 (italic) で表示される (UA スタイル) article 内では記事の著者の連絡先、body 直下ではサイト全体の連絡先を意味する

address 要素とは

address 要素は、最も近い article 祖先要素または body 要素に対する問い合わせ先 (contact information)を表すセマンティック HTML 要素です。

名前から「住所を書く要素」だと誤解されがちですが、住所そのものではなく「連絡先」のためのもの。たとえば本の登場人物の住所には使いません。

基本構文

<address>
    お問い合わせ:
    <a href="mailto:info@example.com">info@example.com</a>
    TEL: <a href="tel:+81-3-1234-5678">03-1234-5678</a>
</address>

article 内 vs body 直下

配置	意味
article 内	その記事の著者への連絡先
body 直下 (footer 等)	そのページ / サイト全体の運営者連絡先

<article>
    <h2>記事タイトル</h2>
    <p>本文 ...</p>

    <address>
        著者: <a href="mailto:author@example.com">山田太郎</a><br>
        Twitter: <a href="https://twitter.com/yamada">@yamada</a>
    </address>
</article>

<footer>
    <address>
        運営: 株式会社サンプル<br>
        問い合わせ: <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

address に含めてよいもの / よくないもの

OK	NG (使わない)
メールアドレス	記事公開日
電話番号	著作権表記 (©)
物理住所 (連絡先としての)	本文中に出てくる第三者の住所
SNS リンク	関係のない情報
担当者名 / URL	長い文章

NG: 本文中の住所

<!-- 悪い例: 本文中の住所に address を使っている -->
<p>東京タワーの所在地は、
    <address>東京都港区芝公園 4-2-8</address>
    です。
</p>

<!-- 良い例: 単なる住所は p や span で -->
<p>東京タワーの所在地は、
    <span class="addr">東京都港区芝公園 4-2-8</span>
    です。
</p>

NG: copyright 表記

<!-- 悪い例: copyright を address に入れている -->
<address>
    &copy; 2026 Example Inc. All rights reserved.
</address>

<!-- 良い例: copyright は p で -->
<footer>
    <address>
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
    <p>&copy; 2026 Example Inc.</p>
</footer>

定番パターン — サイトフッター

<footer>
    <h3>運営会社</h3>
    <address>
        株式会社サンプル<br>
        〒100-0001 東京都千代田区千代田 1-1<br>
        TEL: <a href="tel:+81-3-1234-5678">03-1234-5678</a><br>
        Email: <a href="mailto:info@example.com">info@example.com</a><br>
        <a href="/contact">お問い合わせフォーム</a>
    </address>

    <p>&copy; 2026 Example Inc. All rights reserved.</p>
</footer>

定番パターン — ブログ記事の著者情報

<article>
    <header>
        <h1>記事タイトル</h1>
        <time datetime="2026-06-11">2026 年 6 月 11 日</time>
    </header>

    <p>記事本文 ...</p>

    <footer>
        <address>
            筆者: <a rel="author" href="/users/yamada">山田太郎</a><br>
            <a href="https://twitter.com/yamada">@yamada (Twitter)</a><br>
            <a href="mailto:yamada@example.com">yamada@example.com</a>
        </address>
    </footer>
</article>

UA デフォルトスタイル

ブラウザの UA スタイルシートで address は斜体 (italic) で表示されます。デザイン上不要なら CSS で打ち消し。

address {
    font-style: normal;    /* 斜体を解除 */
    line-height: 1.7;
}

microdata / Schema.org との組み合わせ

連絡先を構造化データとして検索エンジンに伝えるには Schema.org の Organization や Person と組み合わせます。

<address itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">株式会社サンプル</span><br>
    <span itemprop="address" itemscope
          itemtype="https://schema.org/PostalAddress">
        <span itemprop="streetAddress">千代田 1-1</span>
        <span itemprop="addressLocality">千代田区</span>
        <span itemprop="addressRegion">東京都</span>
        <span itemprop="postalCode">100-0001</span>
    </span><br>
    Email: <a itemprop="email"
        href="mailto:info@example.com">info@example.com</a>
</address>

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 ページ — 詳細な問い合わせフォーム