HTML <address>タグ：正しい理解と使い方

定義と使い方

<address>タグは連絡先情報（contactinformation）を示します。

基本例

次の例は<address>タグを使用して連絡先情報（contactinformation）を示す基本的な方法を説明します。

HTML

<footer>
    <address>
        詳しい情報につきましてはお問い合わせください。
        <a href="mailto:master@example.com">山田太郎</a>。
    </address>
    <p><small>©copyright2038ExampleCorp.</small></p>
</footer>

多くのブラウザーでは<address>タグのフォントスタイル（font-style）がイタリック体（italic）で表示されます。

<address>タグは一般的に<footer>タグ内で他の情報と合わせて連絡先情報として多く使用されます。
上記の例では<footer>タグに連絡先情報と著作権表示が含まれています。

使用方法に関する注意事項

<address>タグの連絡先情報の適用範囲は明確に区分されています。また、このタグに含めることができる連絡先情報の種類も明確に定められています。

適用範囲

<address>タグの連絡先情報が適用される範囲は、先祖要素の中に<article>タグが存在するかどうかによって異なります。

<article>タグ内にある場合：

最も近い<article>の連絡先情報を示します。
<article>タグの外にある場合：

<body>タグに対する連絡先情報を示します。これは文書全体の連絡先情報となります。

補足説明
<article>タグは、文書、ページ、アプリケーション、またはサイトにおいて独立して配布したり再利用したりできるコンテンツをまとめる領域として使用されます。
例えば、掲示板の投稿、ニュース記事、ブログ記事、コメントなどがあります。

連絡先情報の内容

<address>タグには連絡先情報以外の内容を含めてはいけません。

連絡先情報は状況に応じてさまざまな形式を使用できます（例：実際の住所、URL、メールアドレス、電話番号、SNS、ウェブサイトなど）。
ページヘッダーでは企業の連絡先を提供したり、<article>内では記事の作成者情報を示したりできます。
単なる地理的な住所表示など、連絡先としての用途ではない情報を含めてはいけません。ただし、その住所が実際に連絡先として機能する場合に限り使用できます。

例

次の例を見ると、<address>タグがどのように使用されているかを簡単に把握できます。

<article>タグ内での使用

<address>タグが<article>タグ内にある場合は、最も近い<article>の連絡先情報を示します。次は、<article>タグ内で<address>タグを使用し、記事の作成者の連絡先情報を示した例です。

HTML

<article>
    <h2>記事タイトル</h2>
    ... 内容
    <footer>
        <address>
            <span>記事の作成者</span><br>
            <a href="https://example.com/author">山田太郎</a><br>
            <a href="mailto:author@example.com">author@example.com</a>
        </address>
    </footer>
</article>

<article>タグの外での使用

<address>タグが<article>タグの外にある場合（または先祖要素に<article>タグが存在しない場合）、<body>タグに対する連絡先情報を示します。これは文書全体の連絡先情報となります。

次の例は、<article>タグの外、すなわち文書全体を対象とする連絡先情報を<address>タグで示す方法を説明します。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Exampleページ</title>
    </head>
    <body>
        <h1>Exampleウェブサイト</h1>
        <p>ウェブサイトの紹介やコンテンツがここに入ります。</p>
        
        ....
        
        <footer>
            <!-- 文書全体の連絡先 -->
            <address>
                サイトに関するお問い合わせ：
                <a href="mailto:admin@example.com">admin@example.com</a>
            </address>
            <p><small>©2025私のウェブサイト。AllRightsReserved.</small></p>
        </footer>
    </body>
</html>

ページヘッダーで企業の連絡先情報を提供

次の例では、ページヘッダー（<header>タグ）に<address>タグを使用し、会社名、メールアドレス、電話番号などの連絡先情報を表示しています。

HTML

<header role="banner">
    <a href="/" rel="home">会社ロゴ</a>
    <nav>
        <a href="index.html">ホームページ</a>
        <a href="about.html">会社紹介</a>
        <a href="contact.html">連絡先</a>
    </nav>
    <address>
        <span>会社名</span><br>
        <a href="mailto:info@example.com">info@example.com</a><br>
        <a href="tel:+1234567890">+1234567890</a>
    </address>
</header>

この例で示されている連絡先情報は<body>タグに適用されます。つまり、ページ全体に対する連絡先情報となります。

不適切な使用

<address>タグには連絡先情報以外の情報を含めてはいけません。

技術的な文法のまとめ

<address>タグには許可されていない子孫要素と許可されていない先祖要素があります。これらの規則は、<address>タグが特定の状況で使用された場合にウェブページのコンテンツを理解しづらくなる可能性があるため設けられており、<address>タグを使用する際には必ず考慮する必要があります。

<address>タグの技術的な文法のまとめ
許可されていない子孫要素	`<address>` `<hgroup>` `<h1>`~`<h6>` `<article>` `<aside>` `<section>` `<nav>` `<header>` `<footer>`
許可されていない先祖要素	`<address>`
暗黙的な`role`属性値	`group`
許可されている`role`属性値	すべて（Any）