SYNCERのロゴ
アイキャッチ画像

address要素 - 著者の連絡先

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

概要

名前
address (Address)
カテゴリ
Flow content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
Flow content。ただし、Heading content、Sectioning content、header要素、footer要素、address要素の祖先になってはいけない。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
IDLリファレンス
デフォルトのスタイル

Chrome / Firefox / Safari

address {
    font-style: italic;
    display: block;
}
address {
    display: block;
    font-style: italic;
    unicode-bidi: isolate;
}
address {
	font-style: italic;
	display: block;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-address-element

属性

グローバル属性

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

サンプルコード

footer要素の子要素にする

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

<footer>
	<address>
	</address>
</footer>

適用される範囲

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

<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というサイトの運営者のものだと解釈されるでしょう。

<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要素は住所をマークアップするためのものではありません。

<p>この前、美味しいパン屋さんを見つけました。そのパン屋さんは、<address>東京都足立区</address>にあって…</p>

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

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

<footer>
	<address>
		<p>この記事で紹介した店の情報</p>
		<dl>
			<dt>名称</dt>
				<dd>ほにゃららパン店</dd>
			<dt>住所</dt>
				<dd>〒123-4567 東京都足立区 1234-5678</dd>
		</dl>
	</address>
</footer>

デモ

address要素のデモです。

<!-- このコードは編集できます。 -->

<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>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年2月9日 (木)
コンテンツを公開しました。