<header>ヘッダー部分を示す

<header>タグはページ、あるいはセクション内のヘッダ部分(導入・前置き的な部分)をグループ化する要素です。 あくまでページ、またはセクションの見出し部分を示しますので、ページ全体の見出しであるとは限りません。 例えば、ブログの個別記事の見出し、日付などにもheader要素を使用する事ができます。

<header>の中には、<h1>~<h6><hgroup>などのセクションの見出しを1つ以上入れる事が、一般的には想定されていますが、必要がなければ入れなくても構いません。 またこれらの見出し以外にも、セクションの目次や検索フォーム、あるいは関連するロゴなどを含む事もできます。

なおheader要素の範囲はセクションにはならないので注意して下さい。

※HTML文書のヘッダ情報を示す<head>タグとも異なりますので、気を付けて下さい。

HTML5での変更点

header要素は、HTML5から追加された要素です

書式

  • <header 属性="値">~</header> ……… ヘッダ部分を示す

使用した時の例

<header>
<h1>今日のできごと</h1>
<p><time datetime="2016-01-20">2016/01/20</time></p>
</header>
<p>今日は朝から雪がすごいです!<br />
北海道には寒波が来ているみたいですが、こんな大雪は人生で初です!!</p>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <header>~</header> カテゴリ フローコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~