PR

【HTML】headerタグ(ヘッダーの作り方)を3分で解説

HTML

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

図1:当サイトのヘッダー

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

参考 HTMLとは?

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

このページで学べる内容
  • <header>タグとは
  • ヘッダーの要素(ヘッダーの構成)
  • ヘッダーの作成方法

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

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

スポンサーリンク

HTML:<header>タグとは

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

参考 マークアップとは?

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

図1:当サイトのヘッダー

<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タグ)を含むことができます。これらの要素を適切に組み合わせることで、ユーザーにとって使いやすい、そして情報を効果的に伝えるヘッダーを設計することができます。

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

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

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

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

例2 <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タグ(リンクタグ)

ヘッダーのナビゲーション
図2:ヘッダーのナビゲーション

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

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

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

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

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

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

参考 formタグの使い方

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

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

ヘッダーの作成

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

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

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

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

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

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

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

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

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

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

ナビゲーションメニューはユーザーがサイト内を自由に移動できるようにする重要な要素です。これには<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は、アクセスしたいコンテンツへの直感的なアクセスを提供すること。ナビゲーションメニューの項目は、サイトの内容を一目で把握できるように選びましょう。

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

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

このように、ヘッダーはウェブサイトの多様な要素を一緒に表示するのに適した場所であり、それらを効果的に配置することで、サイトの使用体験を向上させることができます。

ここで示したコードはHTMLのみのものであり、ドロップダウンメニューのような動的な要素を実装するにはJavaScriptやCSSも必要になります。また、表示される画像やリンクは仮のものであり、実際のウェブサイトに適したものに置き換えて使用してください。

参考 JavaScript・CSS

【HTML】headerタグ(ヘッダーの作り方)のまとめ

  1. ヘッダーはWebサイトやWebページの上部に位置するエリア。
  2. <header>タグはHTML5で導入され、ヘッダーエリアをセマンティック(意味的)にマークアップするための要素。
  3. <header>タグによって、Webブラウザや検索エンジンはそのエリアがページやセクションのヘッダーであることを認識し、適切に解釈・表示する。

Webデザインを勉強するのって結構難しいですよね。

でもその悩みを抱えているのは一人じゃありません。全てのWebデザイナーが同じ道を進んできました。

HTMLやCSS・JavaScriptをはじめとするプログラミングスキルを武器に、時間と場所に捉われない自由な生き方を目指してみませんか?今すぐ行動したい方は以下の記事をチェック!

読者料典 【無料】ゼロから学ぶHTML/CSS/JavaScript入門 ←こちらから!

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
HTMLWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました