さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】address要素について

Pocket
LINEで送る

HTML5におけるaddress要素の使用例を紹介します。

address要素は、管理者や著者などの連絡先情報をマークアップし、article要素内、サイト全体に対して使用出来ます。通常、著者プロフィールや連絡先、問い合わせフォームへのリンク等で使用します。

<article>
  <header>
    <hgroup>
      <h1>タイトル</h1>
      <h2>サブタイトル</h2>
    </hgroup>
  </header>
  <section>
    <p>記事本文が入ります</p>
    <figure>
      <img src="sample.jpg" alt="サンプル画像" width="300" height="225">
      <figcaption>
        写真のキャプション
      </figcaption>
    </figure>
  </section>
  <footer>
    <p><address>問い合わせ:<a href="mailto:aaa@ne.jp">メールアドレス</a></address></p>
  </footer>
</article>

上記のように、article要素内でaddress要素を利用すると、該当記事の連絡先情報となり、html全体のフッタ内で利用すると、サイト全体の連絡先情報となります。

また、従来のHTMLではaddress要素に住所や更新日時を含めることが可能でしたが、HTML5では、サイト全体もしくは該当セクションに関する連絡先に限定された使用方法となり、従来のHTMLのような使い方はできません。

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容