【HTML】headerタグ（ヘッダーの作り方）を３分で解説

Webサイトのヘッダーとは、サイト名やロゴ、ナビゲーションメニューなどの重要な情報を表示するWebページの上の部分のこと。

これをコード上で表現するために用いるのが、HTMLの<header>タグとなります。

参考　HTMLとは？

この記事では、<header>タグを中心に、ヘッダーを構成する各要素の使い方や配列をご説明。さらに、SEO対策を施し、ユーザビリティを考慮した効果的なヘッダーの設計についても解説します。

このページで学べる内容

<header>タグとは
ヘッダーの要素（ヘッダーの構成）
ヘッダーの作成方法

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　HTMLの基本構文ルールを３分で学習

HTML：<header>タグとは
1. <header>タグの使用方法
header（ヘッダー）内に設置する要素
ヘッダーの作成
【HTML】headerタグ（ヘッダーの作り方）のまとめ

HTML：<header>タグとは

HTMLでは、特定の意味を持つ要素をマークアップするために、様々なタグが用意されていますが、その中でヘッダーを表現するために使用されるタグが<header>です。

参考　マークアップとは？

<header>タグは、Webページやそのセクションの冒頭を表します。具体的には、サイト名やロゴ、ナビゲーションメニューなど、ウェブページの最上部に表示する内容を囲むために使用されます。

<header>タグの使用方法

以下が<header>タグの基本的な使用例です。

<!-- コードの例 -->
<header>
  <h1>サイト名</h1>
  <nav>
    <ul>
      <li><a href="#section1">セクション1</a></li>
      <li><a href="#section2">セクション2</a></li>
    </ul>
  </nav>
</header>

参考　h1タグ / ulタグ /navタグ

この例では、<header>タグでサイト名とナビゲーションメニューを囲んでいます。サイト名は<h1>タグで、ナビゲーションメニューは<nav>タグと<ul>タグを使用しています。

これらのタグをうまく利用することで、ヘッダーに各ページへのリンクを設定したり、画像やテキストなどを表示することができるようになります。

次の章では、headerタグ内で利用できる主なタグの使い方と、そのサンプルを見ていきましょう。

header（ヘッダー）内に設置する要素

<header>タグ内には、ヘッダーを構成するための様々な要素（＝HTMLタグ）を含むことができます。これらの要素を適切に組み合わせることで、ユーザーにとって使いやすい、そして情報を効果的に伝えるヘッダーを設計することができます。

以下に、主な要素をいくつか紹介します。

例１　<h1>～<h6>: ヘッダータグ

Webサイトのタイトルやセクションのタイトルを表示するために使用します。以下は、その基本的な使い方の一例です。

<!-- h1タグの使用例 -->
<header>
  <h1>ここはサイト名</h1>
</header>

h1~h6タグの使い方・使い分けについて復習したい方は以下の記事をご覧ください。

例２　<nav>: ナビゲーションタグ

ヘッダー内にメニューやリンクのリストを配置する際に使います。Webサイト内の他のページへのリンクや、ページ内リンクを整理して表示します。

<!-- navタグの使用例 -->
<header>
  <nav>
    <ul>
      <li><a href="#section1">セクション1</a></li>
      <li><a href="#section2">セクション2</a></li>
    </ul>
  </nav>
</header>

参考　ul・liタグ（リスト） / aタグ（リンクタグ）

<nav>タグの意味と使い方のコツは以下の記事をご覧ください。

例３　<img>: イメージタグ

ヘッダー内で画像を表示するには<img>タグが用いられます。これはロゴやアイコンなどを配置する際に非常に重要です。

<!-- imgタグの使用例 -->
<header>
  <img src="logo.png" alt="ロゴ">
</header>

例４　<form>: フォームタグ

ユーザーからの入力を受け付ける場合には<form>タグを使用します。これは検索バーやログインフォームなどをヘッダーに配置する際に重要となります。

<!-- formタグの使用例 -->
<header>
  <form action="/search" method="get">
    <input type="search" name="q" placeholder="検索...">
  </form>
</header>

参考　formタグの使い方

これらの要素を組み合わせることで、情報を効果的に伝えるユーザーにとって使いやすいヘッダーを設計できます。

次の章では、これらの要素を具体的にどのように組み合わせながら、ヘッダーの作成方法についてステップバイステップで解説していきます。

ヘッダーの作成

Webサイトのヘッダー作成はそのサイトの「顔」を作る作業で、これは利用者にとっての第一印象を決定付けます。ここでは具体的な手順と共に、その注意点や効果的な実装方法について解説します。

ここでは、サンプルとして「サイト名」「ナビゲーションメニュー」そして「検索バー」を含むヘッダーを作成してみます。

ステップ１　<header>タグを設定

最初のステップとしてヘッダー全体を囲む<header>タグを設定します。これはヘッダー部分の開始と終了を明示的に示す役割を果たします。

<header>
  <!-- ここにヘッダーの内容を記述 -->
</header>

ステップ２　サイト名を設定

次に、<h1>タグを使用してサイト名を設定します。<h1>タグはページの主題を示すもので、検索エンジンのクローラーにとって重要な手がかりとなります。

<header>
  <h1>ここはサイト名</h1>
</header>

ここでは、１つのページには１つの<h1>タグが設置するようにしましょう。これはSEOの観点から非常に重要なポイントとなります。

ステップ３　ナビゲーションメニューを設定

ナビゲーションメニューはユーザーがサイト内を自由に移動できるようにする重要な要素です。これには<nav>タグと、リストを表現する<ul>、<li>タグを組み合わせます。

<header>
  <h1>ここはサイト名</h1>
  <nav>
    <ul>
      <li><a href="#section1">セクション1</a></li>
      <li><a href="#section2">セクション2</a></li>
    </ul>
  </nav>
</header>

ここでのTipsは、アクセスしたいコンテンツへの直感的なアクセスを提供すること。ナビゲーションメニューの項目は、サイトの内容を一目で把握できるように選びましょう。

ステップ４　検索バーを設定

最後に、検索バーを追加します。これには<form>タグと<input>タグを使用します。検索バーは大規模なサイトで特に有効で、ユーザーが目的のコンテンツを素早く見つけられるようにします。

<header>
  <h1>ここはサイト名</h1>
  <nav>
    <ul>
      <li><a href="#section1">セクション1</a></li>
      <li><a href="#section2">セクション2</a></li>
    </ul>
  </nav>
  <form action="/search" method="get">
    <input type="search" name="q" placeholder="検索...">
  </form>
</header>

以上の手順により、基本的なヘッダーの作成が完了します。

ただし、これはあくまで一例です。そのため、必要に応じてロゴの追加や、別の要素の追加・変更など、自由にカスタマイズしてみてください。ヘッダーはユーザーとサイトとの第一接触点であるため、そのサイトの特性やブランドを反映するよう心がけましょう。

カスタマイズ例

<header>
  <!-- ロゴとトップページへのリンク -->
  <a href="index.html">
    <img src="logo.png" alt="ロゴ画像">
  </a>

  <!-- ナビゲーションメニュー -->
  <nav>
    <ul>
      <!-- ドロップダウンメニュー -->
      <li>
        <a href="#section1">セクション1</a>
        <ul>
          <li><a href="#subsection1">サブセクション1</a></li>
          <li><a href="#subsection2">サブセクション2</a></li>
        </ul>
      </li>

      <li><a href="#section2">セクション2</a></li>
    </ul>
  </nav>

  <!-- 検索バー -->
  <form action="/search" method="get">
    <input type="search" name="q" placeholder="検索...">
  </form>

  <!-- ソーシャルメディアのリンク -->
  <div class="social-links">
    <a href="http://twitter.com/example"><img src="twitter-icon.png" alt="Twitterリンク"></a>
    <a href="http://facebook.com/example"><img src="facebook-icon.png" alt="Facebookリンク"></a>
  </div>
</header>

ロゴ: <img>タグを使用してロゴ画像を表示し、<a>タグで囲むことでクリックするとトップページに戻るリンクになります。
ドロップダウンメニュー: <li>タグの中に別の<ul>タグを入れることで、ドロップダウンメニューを作成します。
ソーシャルメディアのリンク: ソーシャルメディアへのリンクを画像として追加し、ユーザーがそれらのプラットフォームでサイトを共有しやすくしています。