今日の人気記事

まだデータがありません。

address要素 - 連絡先情報

当ページのリンクには広告が含まれています。

スポンサーリンク

ここでは HTML5 の address要素についてみていきます。

address要素の概要

address要素は、連絡先や問い合わせ情報を表します。

カテゴリー フロー・コンテンツ
コンテンツモデル フロー・コンテンツ(ヘッディング・コンテンツとセクショニング・コンテンツ、および header要素とfooter要素は除く)
利用場所フロー・コンテンツが置ける場所

サイトの管理者や記事の作成者の連絡先や問い合わせ情報に使います。

記事中にある連絡先や住所に address要素には使わないので、注意が必要です。

使用例①

ページ・フッターにあるサイトの管理人情報へのリンクに address要素を使っています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>address要素</title>
<link rel="stylesheet" src="style.css" />
</head>
<body>
<h1>サイト名</h1> 
<article>
  <h2>記事タイトル</h2>
  <p>記事の概要</p>
  <section>
    <h3>見出し①</h3>
    <p>見出し①の本文</h3>
  </section>
</article>
<footer>
  <address><a href="address.html">管理人情報</a></address>
</footer>
</body>
</html>

使用例②

ページ・フッターにある「サイト運営者」へのお問い合わせ(メールアドレス)に加えて、記事の「著者」情報に address要素を使っています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>address要素</title>
<link rel="stylesheet" src="style.css" />
</head>
<body>
<h1>ブログ名</h1> 
<article>
  <h2>記事タイトル</h2>
  <p>記事の概要</p>
  <section>
    <h3>見出し①</h3>
    <p>見出し①の本文</h3>
  </section>
  <footer>
    <address><a href="taro.html">著者:太郎</a></address>
  </footer>
</article>
<footer>
  <address>サイト運営者へのお問い合わせは demo@webkaru.net まで</a></address>
</footer>
</body>
</html>