HTML5

header

HTML5

headerはセクション内のヘッダーを定義するのに用いるタグです。おおよその場合hを含みますが含まなくても大丈夫です。

実はセクション毎にheaderを定義することができる

headerは理屈上、ページの中に何度も使うことができますが、html5以前の使い方に習い、htmlタグの headerを定義するために用いることが多いです。

用例

<article>
  <h1>見出し</h1>
  <p>
    テキスト
  </p>
  <section>
    <header>
      <h2>見出し</h2>
      <p>
        テキスト
      </p>
    </header>
    <h3>見出し</h3>
    <p>
      テキスト
    </p>
  </section>
  <section>
    <header>
      <h2>見出し</h2>
      <p>
        テキスト
      </p>
    </header>
    <h3>見出し</h3>
    <p>
      テキスト
    </p>
  </section>
</article>

一般的な用例

<body>
<header>
  <div class="heder">
    <p>
      サイトタイトル
    </p>
  <!-- /heder --></div>
</header>
<nav>
  <div class="nav">
    <ul>
      <li><a href="#">ナビ</a></li>
      <li><a href="#">ナビ</a></li>
      <li><a href="#">ナビ</a></li>
    </ul>
  <!-- /nav --></div>
</nav>
<article>
<div class="contents">
  <h1>メイン見出し</h1>
  <p>
    段落が入ります。
  </p>
  <section>
    <div class="section01">
      <h2>セクションの見出し</h2>
      <p>
        段落が入ります。
      </p>
    <!-- /section01 --></div>
  </section>
  <section>
    <div class="section02">
      <h2>セクションの見出し</h2>
      <p>
        段落が入ります。
      </p>
    <!-- /section02 --></div>
  </section>
<!-- /contents --></div>
</article>
<footer>
  <address>
    連絡先
  </address>
  <p>
    copyright
  </p>
</footer>
</body>