連絡先をマークアップする

連絡先のマークアップについて

サイトのフッターなどに住所・電話番号・メールアドレスなど連絡先の情報を記載するときは、address要素を使います。

マークアップ例

連絡先のマークアップは次のように行います。

連絡先のマークアップ例

<style>
.address_box {
	float: right;
	padding: 15px 20px 13px;
	border-radius: 10px;
	background: #fff;
}
.address_box h2 {
	margin-bottom: 10px;
	text-align: center;
	color: #333;
}
address {
	line-height: 1.6em;
	font-style: normal;
	font-size: 86%;
}
#footer address a {
	color: #007edf;
}
</style>
<div class="address_box">
	<h2>お問い合わせ</h2>
	<address>〒102-0083<br>東京都千代田区 麹町3-2<br>TEL：<a href="tel:080-0000-0000">080-0000-0000</a><br>メール：<a href="mailto:info@gray-code.com">info@gray-code.com</a></address>
</div>

大枠をdiv要素で囲み、その中に見出しであるh2要素と連絡先が入るaddress要素が入ります。
今回はaddress要素の中には住所、電話番号、メールアドレスを記載しましたが、連絡先であればどんな情報を記載しても大丈夫です。

address要素の中にはフローコンテンツを入れることができるので、p要素やul要素などを使うこともできます。
ただし、見出しであるh1要素〜h6要素は入れることができないので注意してください。

連絡先の記載場所でニュアンスが変わる

連絡先は掲載する場所によってニュアンスが異なります。
サイトのフッターやサイドバーなど、共通パーツに記載された連絡先は運営元の連絡先となりますが、ブログやコラムなど個別の記事の下部に記載した場合は、その記事の執筆者の連絡先となります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。