Smart Communication Design Company
ホーム > ナレッジ > 用語集 > Web制作用語集 > HTML用語集 > header要素

header要素

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>

使用可能な属性

コンテンツカテゴリ

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

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

仕様書と策定状況

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