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

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

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

使用例

<header>

<p><img src="/img/logo.png" 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>

使用可能な属性

  • 全てのグローバル属性

コンテンツカテゴリ

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

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

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

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

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

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2017年2月2日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報