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>
注意点
- 01連絡先とは関係のない住所(例:イベント会場の住所)には address を使いません。p などで書きます。
- 02address の中に見出しや header・footer などは入れられません。