どんなタグ？
ヘッダーを表すタグです。
<body>
<header>
<h1>CodeHero</h1>
<p>タグ辞典サイトへようこそ</p>
</header>
</body>
<header>タグは、コンテンツの導入部分やナビゲーションなどのまとまりを表します。
見出しやロゴ、検索フォーム、作者名などの導入的なコンテンツを含めることができます。
- どのカテゴリに属しているの？
- <header>タグは フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
-
<header>タグに梱包できるタグ（コンテンツ・モデル）は、フロー・コンテンツ(ただし子孫要素に別のheader要素やfooter要素を持つことはできない)です。
基本的にフロー・コンテンツというカテゴリに属しているタグは梱包可能ですが、<header>タグ内に別の<header>タグや<footer>タグを梱包することはできません。
主にグローバルナビゲーションや記事のヘッダーに使用されています。
どうやって使うの？
コンテンツの導入部分やナビゲーションのまとまりを、<header> タグで挟む。
<header>タグは、コンテンツの導入部分やナビゲーションのまとまりを<header> 〜 </header> で挟みます。
<header>タグが、body要素の直接の子要素になっている場合など、祖先要素にセクショニング・コンテンツがない場合は、ページ全体のヘッダーとして扱われます。
逆に、セクショニング・コンテンツの中にある場合は、そのセクションのヘッダーとして扱われます。
また、<header>タグを、ページ内に複数回使用しても問題ありません。
- 使い方
-
<header> コンテンツの導入部分やナビゲーションのまとまり </header>
<body>
<header>
<h1>ページ全体のタイトル</h1>
<nav>
<ul>
<li><a href="#menu01">メニュー1</a></li>
<li><a href="#menu02">メニュー2</a></li>
<li><a href="#menu03">メニュー3</a></li>
</ul>
</nav>
</header>
</body>https://codehero.shibajuku.net/html/header/sample01/
- どこでも使えるの？
-
<headerタグ>は、フロー・コンテンツ が配置できるところに使えます。
ただし、<address>タグや<footer>タグ、別の<header>タグの中に配置していはいけません。 - 気をつけることは？
- <header>タグは、セクショニング・コンテンツではないので、話題の範囲を表すための階層構造を形成しません。階層構造を形成する目的で使用するのはやめましょう。
階層構造を形成する場合は、<section>タグや<article>タグなどのセクショニング・コンテンツを使用しましょう。
使える属性は？
グローバル属性のみ使えます。
<header> タグには、どのタグにでも使えるグローバル属性のみが使えます。
class属性やtitle属性などのグローバル属性が使えます。
サンプルが見たい
<header>タグを使ったサンプルを
いくつか紹介。
<header> タグを使ったサンプルを紹介します。
基本的な<header>タグのサンプル
<body>
<header>
<h1>
<a href="/">
<span class="screen-reader-text">ダミー株式会社</span>
<img src="logo.png" alt="ダミー株式会社">
</a>
</h1>
<nav>
<ul>
<li><a href="#service">サービス</a></li>
<li><a href="#works">実績</a></li>
<li><a href="#about">私たちについて</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
</body>https://codehero.shibajuku.net/html/header/sample02/
<article>タグ内に<header>タグを入れた場合
<article>
<header>
<h1><code>header</code>要素とは</header>
<p>更新日:<time datetime="2022-05-07">2022年5月7日</time></p>
</header>
<p><code>header</code>要素は、コンテンツの導入部分やナビゲーションのまとまりを表します。</p>
<p><a href="/header">詳しく見る</a></p>
</article>https://codehero.shibajuku.net/html/header/sample03/
<header>タグ内に<h1>タグや<h2>タグなどの見出しタグを含めることが多いですが、必須ではありません。
デフォルトスタイルは？
header要素をブロック要素として扱うスタイルが指定されている。
一般的なブラウザで header要素を表示した場合、ブロック要素として扱うスタイルが指定されています。
具体的には、下記のCSSと同等のスタイルが適用されます。
header {
display: block;
}要素の表示方法を変更する場合は、displayプロパティを使用しましょう。
対応ブラウザは？
基本的にどのブラウザでも使えます。
<header>タグは HTML5.0以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar 9 ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 5 ~
- Firefox
- Firefox 4 ~
- Safari
- Safari 5 ~
- Opera
- Opera 11.5 ~
モダンブラウザは問題ありません。
