HTMLのheaderタグの使い方！

html

HTMLのheaderタグについて書いています。

headerタグは、Webページやセクションの導入部分を示すために使用されます。
通常、サイト名やロゴ、グローバルナビゲーション、検索フォームなど、そのコンテンツのヘッダーとなる要素を包含します。

headerタグの基本的な使い方と配置

headerタグは、ヘッダーとしてまとめたいコンテンツを囲むだけで使用できます。

通常、Webページ全体のヘッダーとして<body>直下に配置されることが多いです。
ですが<article>や<section>などのセクション内にも配置して、そのセクションのヘッダーを示すこともできます。

<body>
  <header>
    <h1>サイト名</h1>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
        <li><a href="/products">製品情報</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>記事のタイトル</h2>
        <p class="byline">投稿日：2025年5月16日</p>
      </header>
      <p>記事の内容...</p>
    </article>
  </main>
</body>

上記の例では、Webページ全体のヘッダーと、<article>要素内のセクションヘッダーの両方にheaderタグが使用されています。
ブラウザで実際に表示すると、下記のようになりました。
headerタグを使用して表示確認

headerタグの意味合いと重要性

headerタグは、囲まれたコンテンツが導入部分やナビゲーションなどのヘッダーであることを示す意味合い（セマンティクス）を持っています。

これは、単に見た目をヘッダーのようにするためだけでなく、Webページの構造を明確にします。
そして、検索エンジンやスクリーンリーダーなどの支援技術がヘッダーコンテンツを認識できるようにするために重要です。

headerタグとアクセシビリティ

headerタグを適切に使用することは、Webサイトのアクセシビリティ向上に貢献します。

  • 構造の理解: スクリーンリーダーは、headerタグを認識し、ユーザーに「これはヘッダーコンテンツである」と伝えることができます。これにより、Webページの構造を理解しやすくなります。
  • 主要コンテンツへのスキップ: headerタグの直後に主要なコンテンツが続く場合、適切な見出し (<h1> など) を使用することで、スクリーンリーダーのユーザーがヘッダー部分をスキップして主要なコンテンツに直接移動できるようになります。

headerタグの使用例

headerタグは、以下のようなコンテンツを包含するために使用できます。

  • サイト名やロゴ: Webサイトのブランドを象徴する要素。
  • グローバルナビゲーション: サイト全体の主要なページへのリンク (<nav>タグと組み合わせて使用することが多い)。
  • 検索フォーム: サイト内検索機能を提供するためのフォーム。
  • キャッチフレーズやスローガン: サイトの目的や特徴を簡潔に伝えるテキスト。
  • 認証関連のリンク: ログイン、サインアップなどへのリンク。
  • 言語選択: サイトの言語を切り替えるためのコントロール。

headerタグ内に複数の要素を配置し、CSSでレイアウトを調整することで、様々なデザインのヘッダーを作成できます。

headerタグを使用する際の注意点

  • 1つの<header>要素（グローバルヘッダー）: 通常、Webページ全体を表すヘッダーは <body> 直下に1つだけ配置することが推奨されます。<article>や<section>などのセクション内には、それぞれのヘッダーを記述するために<header>タグを複数使用できます。
  • 主要な導入コンテンツ:headerタグは、そのコンテンツの導入部分を示すために使用します。本文の内容を記述する場所ではありません。
  • 適切な見出し要素: ヘッダー内には、通常、最も重要な見出し要素 (<h1>など) を含めることが推奨されます。
  • <nav>タグとの連携: グローバルナビゲーションは、headerタグの中に<nav>タグを配置してマークアップすることが一般的です。
  • スタイリングはCSSで:<header>タグやその内部の要素の見た目は、CSSで制御します。

headerタグの記述例

以下に、様々な状況における<header>タグの記述例を示します。

<body>
  <header>
    <div class="logo">
      <a href="/"><img src="logo.png" alt="サイトロゴ"></a>
    </div>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/services">サービス</a></li>
        <li><a href="/portfolio">ポートフォリオ</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
    <div class="search-form">
      <input type="text" placeholder="サイト内検索">
      <button type="submit">検索</button>
    </div>
  </header>

  <main>
    <article>
      <header>
        <h1>最新のテクノロジー動向</h1>
        <p class="byline">執筆：山田 太郎 | 公開日：2025年5月16日</p>
      </header>
      <p>記事の内容...</p>
    </article>
  </main>

  <footer>
    <p>© 2025 〇〇株式会社</p>
  </footer>
</body>

見た目を整えるためにCSSも用意しました。

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between; /* 要素を左右に配置 */
  align-items: center; /* 要素を垂直方向中央に配置 */
}

header .logo a {
  display: block;
}

header .logo img {
  max-height: 50px; /* ロゴの最大高さ */
}

header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

header nav ul li {
  margin-left: 20px;
}

header nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
}

header nav ul li a:hover {
  background-color: #555;
}

header .search-form {
  display: flex;
}

header .search-form input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 5px 0 0 5px;
  margin-right: 5px;
}

header .search-form button[type="submit"] {
  background-color: #5cb85c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

main {
  padding: 20px;
}

article header {
  background-color: transparent;
  color: #333;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  display: block; /* flexの解除 */
  align-items: flex-start; /* flexアイテムの配置 */
}

article header h1 {
  margin-bottom: 5px;
}

article header .byline {
  color: #777;
  font-size: 0.9em;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

ブラウザで実際に表示すると、下記のようになりました。
headerタグの記述例

まとめ

headerタグは、Webページやセクションの導入部分を意味的にマークアップするための重要なHTML要素です。

サイト名、ナビゲーション、検索フォームなど、ヘッダーに必要な要素を適切にheaderタグで囲みます。
そうすることで、Webページの構造が明確になり、アクセシビリティが向上し、検索エンジンにも理解されやすくなります。

グローバルヘッダーとセクションヘッダーの使い分けを理解し、適切に活用しましょう。

HTML
yasuaki

コメント