あなたに合った学習プランは？LINE適正コース診断はこちら プログラミングが全て無料で学習可能！
HTMLにおけるヘッダー（headerタグ）の基本と実装方法 - 忍者CODEマガジン

HTMLにおけるヘッダー（headerタグ）の基本と実装方法

プログラミング言語の辞書
2024.06.11

Webサイトの一番上に配置される「ヘッダー」は、サイト全体の印象を大きく左右する重要な要素です。
本記事では、<header>タグの基本からよく使われる構成パターンをわかりやすく解説していきます。

＼満足度90%以上！／

プログラミングスクール忍者CODE
無料相談はこちら>

ヘッダーの主な役割

WebサイトにおけるヘッダーはWebページの上部に表示され、以下の画像のように、ロゴやナビゲーションメニューが配置されます。

※当サイトのヘッダー

ヘッダーには、次のような役割があります。

サイトの第一印象を決める

ヘッダーは、ウェブサイトにアクセスした瞬間にユーザーが最初に目にする部分でもあります。
ロゴやデザイン性などページ冒頭にまとめられた情報が、サイトの印象や信頼感を大きく左右します。

ページ内容を理解するためのナビゲーションとなる

ヘッダーにナビゲーションを整備すると、ユーザーはページやサイトの構造をひと目で把握でき、目的のコンテンツに迷わずアクセスできます。
ユーザーにページやサイト全体の構造を視覚的に把握してもらうためにとても重要です。

SEOへの効果を高める

ヘッダーを正しく使うと、ページ構造が明確になり検索エンジンに内容を正しく伝えることができます。
これによりSEO評価が向上し、検索結果で上位に表示される可能性も高まります。

公式LINE登録で5大特典無料プレゼント！！

headerタグの基本の書き方

HTMLでヘッダーを作成するには、＜header＞タグを利用します。

基本的な書き方の例

次のコードはサイトタイトルとナビゲーションバーをまとめたヘッダーの基本例です。

ヘッダーの基本的な書き方はとてもシンプルで、＜header＞タグで囲み、タイトルやメニューを配置します。

<header>
  <h1>サイト名</h1>
  <nav>
    <ul>
     <li><a href="#">ホーム</a></li>
     <li><a href="#">サービス</a></li>
     <li><a href="#">ブログ</a></li>
     <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

よく使われる要素とタグ

「ヘッダー内にどんな要素を入れたいか」に応じて、適切なタグを使うことも大切です。

たとえば「サイトタイトルなら <h1>」、「ナビゲーションなら <nav>」というように、役割に合わせたタグを使うことで、検索エンジンにも正しく伝わり、構造的にもわかりやすいヘッダーになります。

<h1>~<h6>:見出しタグ

ヘッダー内の見出しタグは タイトルを示したり・構造を整理する役割があります。
適切な見出しタグの使用は、SEO評価を向上させることにもつながります。

<nav>：ナビゲーションタグ

<nav> タグは、ナビゲーションメニューをひとまとめにするためのタグです。
ページ内リンクや別ページへのリンクを整理して表示することでユーザーが目的のページにスムーズにアクセスできます。

<a>タグ

<a>タグは リンクを作るタグ で、ユーザーが別のページや同じページ内の特定の場所に移動できるようにします。
ヘッダーでは、ナビゲーションバーやロゴのリンクとしてよく使われます。

<img>タグ

<img> タグは 画像を表示するタグ です。
ヘッダーでは主に サイトのロゴやアイコン、装飾用の画像 に使われます。

＼満足度90%以上！／

プログラミングスクール忍者CODE
無料相談はこちら>

ヘッダーを作成してみよう

<header>タグの基本を理解したところで、次は実際にコードを書きながら理解を深めていきましょう。

<header>タグを 設置する

まず、ヘッダー全体を囲む<header>タグを作ります。

<header>
</header>

タイトルを追加する

次にサイトやページのタイトルを <h1>タグで追加します。
ページのメインタイトルは<h1>で表示することで、重要な情報として検索エンジンに伝わります。

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

ナビゲーションメニューを作る

ヘッダー内でメニューを作るときは、まず <nav>タグを使ってナビゲーションのまとまりを作ります。
その中で<ul>タグと<li>タグを使ってリスト形式で項目を整理します。

<header>
<h1>サイト名<h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>

サンプルコード

最後に、<header> タグのサンプルコードを紹介します。
先ほどのコードに CSS を適用し、企業サイトでよく使われる「タイトル＋横並びナビゲーション」型に仕上げました。

このコードはあくまで一例です。
<header>タグの基本を理解したら、ぜひ自分なりにアレンジして、自分だけのヘッダーを作ってみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヘッダーサンプル</title>
<style>
/* ヘッダー全体 */
header {
background-color: #333;
color: #fff;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}

/* ロゴ */
.logo {
font-size: 1.5rem;
font-weight: bold;
}

/* ナビゲーション */
nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
gap: 20px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}

</style>
</head>
<body>
<header>
<div class="logo">サイト名</div>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
</body>
</html>

公式LINE登録で5大特典無料プレゼント！！

まとめ：HTMLにおけるヘッダー（headerタグ）は超重要

ここまで、<header> タグの基本から、サンプルコードまで見てきました。

ヘッダーはサイトの「顔」となる部分であり、タイトルやナビゲーションを分かりやすく配置すること が大切です。シンプルな構造でも、CSSでデザインを加えれば一気に見やすく、おしゃれな印象に変わります。

ヘッダー作成のポイントを押さえておけば、これから作るWebページの完成度もぐっと上がります。ぜひ実際に手を動かして、理解を深めてみてください！

HTMLが学べる忍者CODEのWeb制作コースについて

「忍者CODE」は未経験からでもWeb制作のプロを目指せるオンラインスクールです。