HTML要素 ・ ページ構造

<address>

連絡先情報

ページや記事の作者・運営者への連絡先(メールアドレス、電話番号、住所など)を表します。

種類
ブロック要素
終了タグ
必須
既定の表示
斜体
01

サンプルコード

HTML
1<footer>
2 <address>
3 カフェ・ミモザ<br>
4 〒100-0001 東京都千代田区千代田1-1<br>
5 TEL:<a href="tel:0312345678">03-1234-5678</a><br>
6 <a href="mailto:info@example.com">info@example.com</a>
7 </address>
8</footer>
CSS
1address {
2 font-style: normal;
3 line-height: 1.8;
4}
02

実行結果

ブラウザでの表示
03

解説

address は、そのページ(または記事)の作者や運営者に連絡するための情報をまとめる要素です。フッターに置くことが多いです。

article の中に置くと、その記事の著者の連絡先を表します。

ブラウザは既定で斜体にしますが、日本語では読みにくいため font-style: normal で戻すのが一般的です。

04

応用例・注意点

中に書く主な内容

内容説明
メールアドレス<a href="mailto:…"> でリンクにする
電話番号<a href="tel:…"> で発信できるリンクにする
住所運営者・店舗の所在地
SNSなど連絡手段となるアカウントへのリンク

記事の著者の連絡先

article の footer に著者情報として書きます。

HTML
1<article>
2 <h2>コーヒーの淹れ方</h2>
3 <p>…</p>
4 <footer>
5 <address>文:<a href="mailto:writer@example.com">山田 花子</a></address>
6 </footer>
7</article>

注意点

  1. 01連絡先とは関係のない住所(例:イベント会場の住所)には address を使いません。p などで書きます。
  2. 02address の中に見出しや header・footer などは入れられません。
↑↓ 選択Enter 移動Esc 閉じるCtrl K⌘K で開閉