HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

アドレス

address要素

ページや記事に対する連絡先情報を表す場合に使用します。サンプルコードではメールアドレスとなっていますが、電話番号やフォームへのリンクなどを設定することも可能です。

サンプルコード

<address>
	<p>本件に関するお問い合わせは<a href="mailto:example@gray-code.com">こちら</a>から</p>
</address>
  • カテゴリー

    フローコンテンツ、パルパブルコンテンツ

  • コンテンツモデル

    フローコンテンツ

  • 使用ケース

    フローコンテンツが期待される場所(ただし、ヘディングコンテンツ、セクショニングコンテンツ、header要素footer要素main要素を子孫要素に持つことはできません)

属性

グローバル属性

グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

最も近い祖先要素に対するものとして扱われます。
下記のコードのようにすることで、article要素内では記事に対する連絡先情報として、</body>直前の方はページ(サイト自体)への連絡先情報として区別することができます。

<body>
<main>
	<article>
		<header>
			<h1>コーヒーの淹れ方について</h1>
			<p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
		</header>
		<section>
			<h2>本文が入ります</h2>
			<p>金属のフィルターで濾すフレンチプレスは、コーヒーの油分まで余すことなく抽出できるため、コーヒーの素材本来の美味しさをお楽しみいただけます。</p>
			<p>...本文...</p>
		</section>
		<address>記事に対するお問い合わせは<a href="mailto:page@gray-code.com">こちら</a>から</address>
	</article>
</main>

<address>サイトへのお問い合わせは<a href="mailto:site@gray-code.com">こちら</a>から</address>
</body>

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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