【HTML5】headerタグとは？使い方についてまとめ

headerの概要

headerは導入的なコンテンツを表します。例えば導入部やナビゲーション等のグループです。見出し要素だけでなく、ロゴ、検索フォームやその他の要素を含められます。

注意点

header要素は区分コンテンツではありません。つまり、アウトラインを生成することはありませんので注意しましょう。

headerのカテゴリー

コンテンツカテゴリー

フローコンテンツ（一般的コンテンツ）

コンテンツモデル

パルパブルコンテンツ（知覚可能コンテンツ）

headerに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure form h1 h2 h3 h4 h5 h6 hr i iframe img input ins kbd label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合)　ただし、header, footer, title, main要素を子孫として持つことはできません。

入れられるタグのカテゴリー・モデル

headerに使える属性

属性とは<header> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

headerの使い方

<header>ヘッダー</header>

<section id="container">
<main>メインコンテンツ</main>
<aside>サイドバーがアサイド要素になるよ！</aside>
</section>

<footer>
  <small>Copyright 2019 HTML/CSS Glossary</small>
</footer>

header{
  padding:10px 0;
  background:#e1e1e1;
  text-align:center;
}

#container{
  display:flex;
}
main{
  flex:2;
  background:#eee;
  height:150px;
}
aside{
  flex:1;
  background:#d1d1d1;
  height:150px;
}
footer{
  background:#e1e1e1;
  text-align:center;
  padding:15px 0;
}

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

headerの使い方についてまとめ