【HTML Living Standard】header要素の使い方
header要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
headerオブジェクトは、ウェブページまたは特定のセクションの導入部分（ヘッダー）を表すオブジェクトです。この要素は、そのコンテンツの概要、ナビゲーション、または関連する導入情報をグループ化するために使用されます。典型的な内容としては、大見出し（h1〜h6）、ロゴ、検索フォーム、そして主要なナビゲーションリンク（nav要素）などが挙げられます。
header要素を用いることで、ページの構造が意味的に明確になり、コンテンツの目的をブラウザや検索エンジン、スクリーンリーダーなどの補助技術に正確に伝えることが可能になります。これはウェブサイトのアクセシビリティ向上や検索エンジン最適化（SEO）において非常に重要な側面です。
ドキュメント全体のヘッダーとして一度利用するだけでなく、個別の<article>や<section>要素内でも、それぞれのセクションのヘッダーとして複数回配置できます。ただし、<footer>、<address>、または別の<header>要素の中に<header>要素を配置することはできません。
このように、header要素はウェブコンテンツの構造化において基本的な役割を担い、ユーザーにとっても検索エンジンにとっても理解しやすいページ作成を支援します。
構文(syntax)
1<header> 2 <h1>ページの主要な見出し</h1> 3 <p>導入文やサブタイトル。</p> 4</header>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML headerタグで導入コンテンツを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ヘッダータグのサンプル</title> 7</head> 8<body> 9 10 <!-- headerタグは、導入的なコンテンツやナビゲーションリンクのグループを表します。--> 11 <!-- 通常、セクションのタイトル、サブタイトル、ナビゲーション、ロゴ、検索フォームなどが含まれます。--> 12 <header> 13 <h1>ウェブサイトのタイトル</h1> 14 <nav> 15 <ul> 16 <li><a href="#home">ホーム</a></li> 17 <li><a href="#about">私たちについて</a></li> 18 <li><a href="#services">サービス</a></li> 19 <li><a href="#contact">お問い合わせ</a></li> 20 </ul> 21 </nav> 22 </header> 23 24 <main> 25 <section> 26 <h2>メインコンテンツ</h2> 27 <p>ここにページの主要な内容が配置されます。</p> 28 </section> 29 </main> 30 31 <footer> 32 <p>© 2023 サンプル株式会社</p> 33 </footer> 34 35</body> 36</html>
HTMLのheaderタグは、ウェブページやセクションの導入的なコンテンツを定義するために使用される要素です。これは、ページの冒頭に位置する内容、例えばウェブサイトのロゴ、メインタイトル、ナビゲーションリンクのグループ、検索フォームなどをまとめて示す意味を持つ役割があります。このタグを使用することで、ページの構造が明確になり、訪問者や検索エンジンに対してそのセクションが「導入部」であることを伝えることができます。
サンプルコードでは、<body>要素の直後に<header>タグが配置されています。その中には、<h1>タグでウェブサイトの主要なタイトルが示され、<nav>タグで主要なナビゲーションリンクのリストが組み込まれています。このように、<header>タグを使うことで、ウェブページの冒頭に表示される重要な情報が一つにまとまっている様子がわかります。
headerタグ自体には特定の引数（属性）や戻り値はありません。これは、HTML要素がコンテンツを構造化する目的で使われるため、プログラミング言語の関数のような引数（入力）や戻り値（出力）という概念は持ちません。headerタグは、その中に含まれる他のHTML要素を意味的にグループ化し、ウェブページのセマンティックな構造を向上させる役割を担っています。これにより、人間にとっても機械にとっても理解しやすいHTML構造を作成することができます。
headerタグは、ウェブサイトやセクションの導入部分を意味し、文書のメタ情報を記述するheadタグとは役割が異なります。主にサイトのタイトル、ロゴ、グローバルナビゲーションなどを内包し、ページの冒頭に配置します。一つのページ内に複数使用することも可能ですが、ウェブサイト全体で共通の主要なヘッダーは一つが推奨されます。このタグは見た目を整えるだけでなく、コンテンツの意味的な構造を明確にする「セマンティックHTML」の重要な要素です。これにより、検索エンジンやスクリーンリーダーなどの補助技術がページ内容を正しく理解し、アクセシビリティが向上します。誤って主要コンテンツやフッターの内容を含めないように注意しましょう。
HTMLでヘッダーを固定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>固定ヘッダーのサンプル</title> 7 <style> 8 /* 9 * bodyのデフォルトマージンをリセットし、固定ヘッダー分のスペースを確保します。 10 * ヘッダーの高さに応じてmargin-topの値を調整してください。 11 */ 12 body { 13 margin: 0; 14 padding: 0; 15 font-family: Arial, sans-serif; 16 margin-top: 60px; /* 固定ヘッダーの高さ（約50px）と少しの余裕 */ 17 } 18 19 /* 20 * header要素を画面上部に固定するスタイルを適用します。 21 * position: fixed; を使用することで、スクロールしても位置が変わりません。 22 */ 23 header { 24 position: fixed; /* 画面に要素を固定します */ 25 top: 0; /* 画面の上端に配置します */ 26 left: 0; /* 画面の左端に配置します */ 27 width: 100%; /* 画面の幅いっぱいに広げます */ 28 background-color: #333; /* ヘッダーの背景色 */ 29 color: white; /* テキストの色 */ 30 padding: 15px 20px; /* 内側の余白 */ 31 box-sizing: border-box; /* paddingを含めてwidthを計算 */ 32 text-align: center; /* テキストを中央寄せ */ 33 box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 下部に影を追加して立体感を出す */ 34 z-index: 1000; /* 他のコンテンツの上に表示されるようにします */ 35 } 36 37 /* ヘッダー内のナビゲーションリンクのスタイル */ 38 header nav a { 39 color: white; 40 text-decoration: none; 41 margin: 0 15px; 42 font-weight: bold; 43 } 44 45 /* メインコンテンツのスタイル */ 46 main { 47 padding: 20px; 48 line-height: 1.6; 49 } 50 51 /* スクロールを発生させるためのダミーコンテンツ */ 52 .dummy-content { 53 height: 1200px; /* 十分な高さを設定してスクロールを可能にします */ 54 background-color: #f0f0f0; 55 padding: 20px; 56 text-align: center; 57 } 58 </style> 59</head> 60<body> 61 62 <!-- 63 * header要素は、ページの冒頭部分やセクションの導入部分を表します。 64 * ここでは、ナビゲーションメニューやサイトタイトルなど、 65 * サイト全体で共通して表示される要素を配置し、CSSで画面上部に固定しています。 66 --> 67 <header> 68 <h1>サイトのタイトル</h1> 69 <nav> 70 <a href="#">ホーム</a> 71 <a href="#">サービス</a> 72 <a href="#">お問い合わせ</a> 73 </nav> 74 </header> 75 76 <!-- 77 * main要素は、ドキュメントの主要なコンテンツを表します。 78 * ここに配置された内容は、ヘッダーの下に表示されます。 79 --> 80 <main> 81 <h2>メインコンテンツの開始</h2> 82 <p> 83 このページは、HTMLの `header` 要素をCSSの `position: fixed` プロパティを使って、 84 画面上部に固定する方法を示すためのサンプルです。 85 `header` 要素は、サイトのロゴ、グローバルナビゲーション、検索フォームなど、 86 ページ全体またはセクションの導入部分として機能します。 87 </p> 88 <p> 89 `position: fixed` を使うことで、ユーザーがページをスクロールしても、 90 ヘッダーは常に画面の同じ位置に留まり続けます。 91 これにより、主要なナビゲーションや情報へのアクセスが常に容易になります。 92 </p> 93 <p> 94 固定ヘッダーを使用する際には、その高さ分のスペースを `body` または 95 メインコンテンツの `margin-top` または `padding-top` で確保することが重要です。 96 そうしないと、固定されたヘッダーの下にコンテンツが隠れて見えなくなってしまいます。 97 このサンプルコードでは、`body` の `margin-top` で対応しています。 98 </p> 99 100 <div class="dummy-content"> 101 <p>ここにさらに多くのコンテンツがあります。スクロールしてヘッダーが固定されていることを確認してください。</p> 102 <p>...</p> 103 <p>下にスクロールすると、このコンテンツは上に移動しますが、ヘッダーは固定されたままです。</p> 104 <p>...</p> 105 <p>コンテンツの終わり。</p> 106 </div> 107 </main> 108 109</body> 110</html>
HTMLのheader要素は、ウェブページの冒頭部分やセクションの導入部を表すために使用される要素です。一般的に、サイトのタイトル、ロゴ、グローバルナビゲーション（メニュー）、検索フォームなど、ページ全体で共通して表示されるような重要な情報を配置するのに適しています。この要素自体は、特定の引数を受け取ったり、特別な値を戻したりする機能はありません。純粋にコンテンツの構造を示す役割を果たします。
サンプルコードでは、このheader要素にCSSのposition: fixedプロパティを適用することで、画面の上部にヘッダーを固定しています。position: fixed;を設定すると、要素は文書の通常の流れから切り離され、ビューポート（画面表示領域）の特定の位置に固定されます。top: 0; left: 0; width: 100%;という指定により、ヘッダーは画面の最上部に横幅いっぱいに広がり、ユーザーがページをスクロールしても常にその位置に留まります。また、z-index: 1000;を設定することで、他のコンテンツの上にヘッダーが重なって表示されるように優先順位を高めています。
固定ヘッダーを使用する際の重要な注意点として、ヘッダーの高さ分のスペースをメインコンテンツやbody要素で確保する必要があります。サンプルでは、body要素にmargin-top: 60px;を設定し、固定ヘッダーによってメインコンテンツが隠れないようにしています。これにより、ユーザーはいつでもサイトの主要なナビゲーションにアクセスでき、かつコンテンツも適切に閲覧できるウェブページを実現できます。
このサンプルコードでは、HTMLのheader要素をCSSのposition: fixedプロパティを使って画面上部に固定しています。特に注意すべき点は、position: fixedを使うと、固定された要素が通常のコンテンツの流れから外れてしまうことです。そのため、固定ヘッダーの高さと同じくらいのスペースを、body要素やメインコンテンツ要素のmargin-topやpadding-topで確保しなければなりません。これを忘れると、ヘッダーの裏側にコンテンツが隠れて見えなくなってしまいます。
また、z-indexプロパティは、ヘッダーが他のコンテンツよりも手前に表示されるようにするための重要な設定です。この値を適切に設定することで、様々な要素が重なる場面でもヘッダーが常に最前面に表示されます。header要素は、サイトのロゴ、グローバルナビゲーション、検索フォームなど、ページ全体またはセクションの導入部分として使用するのが適切な利用方法です。