header要素

header要素はHTML5から新たに追加された要素です。

header要素は、そのページの前置きやナビゲーション等のグループを表します。文書のヘッダ情報を表すhead要素とは目的が異なるため注意が必要です。

通常、セクションの見出しがコンテンツに含まれていることが想定されていますが、必須というわけではありません。header要素内には、見出し以外にも、ロゴや、各セクションの目次、検索フォームなどをまとめることができます。

使用例

<header>

<p><img src="/img/logo.webp" alt="サイト名"></p>



<nav>

<ul>

<li><a href="$$$dummy$$$.html">サービス</a></li>

<li><a href="$$$dummy$$$.html">実績紹介</a></li>

<li><a href="$$$dummy$$$.html">ナレッジ</a></li>

<li><a href="$$$dummy$$$.html">セミナー</a></li>

<li><a href="$$$dummy$$$.html">ニュース</a></li>

<li><a href="$$$dummy$$$.html">会社概要</a></li>

<li><a href="$$$dummy$$$.html">採用情報</a></li>

</ul>

</nav>



<form action="dummy" method="dummy">

<label>

<span>サイト内検索</span>

<input type="text" name="dummy">

</label>

<button type="submit">検索</button>

</form>

</header>



<main>

<h1>メインコンテンツ</h1>



<article>

<header>

<h2>記事のタイトル</h2>

</header>



<p>記事の本文</p>



<footer>

<p><small>記事の著者名</small></p>

</footer>

</article>

</main>



<footer>

<p><small>© Mitsue-Links Co.,Ltd.</small></p>

</footer>

</body>

使用可能な属性

• 全てのグローバル属性

コンテンツカテゴリ

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

子要素にしていい要素の種類

• フローコンテンツ
  • ただしmain要素を除く
• またはセクショニングコンテンツ
  • ただしheader要素、footer要素を子孫に持たず、footer要素の子孫でもない場合

親要素にしていい要素の種類

• 子要素にフローコンテンツが期待されているすべての要素

仕様書と策定状況