＜address要素＞ - 著者の連絡先

公開日: 2017/02/09

address要素は、著者の連絡先情報を表す要素です。最も近い祖先のarticle要素、またはbody要素に適用されます。通常はfooter要素内に配置します。著者の連絡先以外の、例えば文中の住所などをマークアップするものではありません。

概要

名前

address

カテゴリー

Flow content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

Flow content。ただし、Heading content、Sectioning content、header要素、footer要素、address要素の祖先になってはいけない。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

address {
	display: block;
	font-style: italic;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-address-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

footer要素の子要素にする

address要素は、footer要素の子要素として配置するのが一般的です。

HTML

<!-- footer要素の子要素にする -->
<footer>
	<address>
	</address>
</footer>

適用される範囲

address要素は最も近い祖先のarticle要素、またはbody要素に適用されます。下記の例では、address要素の連絡先情報はarticle要素の範囲のものだと解釈されます。つまり、address要素の連絡先情報は「パンの素晴らしさ」という文章を書いた人のものであって、SYNCERというサイトの運営者のものではないと解釈されます。

HTML

<body>
	<h1>SYNCER</h1>
	<p>SYNCERのコンテンツ一覧: …</p>

	<!-- article要素の範囲 -->
	<article>
		<h2>パンの素晴らしさ</h2>
		<p>偉大な有名人の9割以上がパンを食べているだろう。つまりパンは…</p>
		<footer>
			<address>
				<p>名前: あらゆ</p>
				<p>Twitter: @arayu</p>
			</address>
		</footer>
	</article>
</body>

一方、body要素に適用されれば、address要素の連絡先情報はSYNCERというサイトの運営者のものだと解釈されるでしょう。

HTML

<body>
	<h1>SYNCER</h1>
	<p>SYNCERのコンテンツ一覧: …</p>

	<!-- article要素の範囲 -->
	<article>
		<h2>パンの素晴らしさ</h2>
		<p>偉大な有名人の9割以上がパンを食べているだろう。つまりパンは…</p>
	</article>

	<footer>
		<address>
			<p>名前: あらゆ</p>
			<p>Twitter: @arayu</p>
		</address>
	</footer>
</body>

誤った使い方

住所のマークアップ

名前で間違えやすいのですが、address要素は住所をマークアップするためのものではありません。

HTML

<!-- 住所をマークアップするための要素ではない -->
<p>この前、美味しいパン屋さんを見つけました。そのパン屋さんは、<address>東京都足立区</address>にあって…</p>

コンテンツの内容に関する連絡先

また、マークアップするのはあくまでも「著者の連絡先」だということを意識して下さい。そのコンテンツで紹介した店などの連絡先情報ではありません。

HTML

<!-- 著者の連絡先じゃないからNG -->
<footer>
	<address>
		<p>この記事で紹介した店の情報</p>
		<dl>
			<dt>名称</dt>
				<dd>ほにゃららパン店</dd>
			<dt>住所</dt>
				<dd>〒123-4567 東京都足立区 1234-5678</dd>
		</dl>
	</address>
</footer>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜address要素＞ - 著者の連絡先</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/address/">
		<style>
			body {
				background-color: #fff ;
			}

			address {
				background-color: #ffeeff ;
			}
		</style>
	</head>
	<body>

<p>address要素には、著者の連絡先に関する情報を含めます。footer要素の子要素にするのが一般的です。</p>

<footer>
	<address>
		<dl>
			<dt>著者名</dt>
				<dd>あらゆ</dd>
			<dt>住所</dt>
				<dd>〒999-9999 東京都足立区999-999</dd>
			<dt>連絡先</dt>
				<dd>Twitter: <a href="https://twitter.com/arayutw" target="_blank">Twitter</a></dd>
				<dd>メール: <a href="mailto:info@syncer.jp">info@syncer.jp</a></dd>
		</dl>
	</address>
</footer>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/584/"> <meta charset="utf-8"> <title>【デモ】＜address要素＞ - 著者の連絡先</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/address/"> </head> <body>

<p>address要素には、著者の連絡先に関する情報を含めます。footer要素の子要素にするのが一般的です。</p> <footer> <address> <dl> <dt>著者名</dt> <dd>あらゆ</dd> <dt>住所</dt> <dd>〒999-9999 東京都足立区999-999</dd> <dt>連絡先</dt> <dd>Twitter: <a href="https://twitter.com/arayutw" target="_blank">Twitter</a></dd> <dd>メール: <a href="mailto:info@syncer.jp">info@syncer.jp</a></dd> </dl> </address> </footer>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } address { background-color: #ffeeff ; }

</style>

</script>