HTMLのheaderタグの正しい使い方｜入れてよい要素・NG例を初心者向けに解説
生徒
「HTMLのheaderタグって、ページの一番上に置けばいいんですよね？」
先生
「位置だけで判断すると間違いやすいですね。headerタグには役割があります。」
生徒
「じゃあ、何を入れてよくて、何を入れちゃダメなんですか？」
先生
「それを理解すると、HTML構造が一気に分かりやすくなります。具体例で確認していきましょう。」
1. HTMLのheaderタグとは何か
headerタグは、ページやセクションの導入部分を表すHTML構造タグです。見た目を整えるためのタグではなく、「ここは見出しや案内のまとまりです」と意味を伝える役割があります。本で例えると、章のタイトルと概要が書かれている部分に近い存在です。
2. headerタグが使われる正しい場面
headerタグはページ全体の先頭だけでなく、記事やセクションの先頭にも使えます。その内容の説明や案内になる部分に使うのが基本です。必ずしも画面の一番上にある必要はなく、役割で判断することが大切です。
<header>
<h1>サイトタイトル</h1>
<p>サイトの説明文</p>
</header>
3. headerタグに入れてよい要素
headerタグには、その内容を説明する要素を入れます。代表的なのは見出し、説明文、ロゴ画像、ナビゲーションリンクです。これらは「この先に何があるか」を伝える役割を持ちます。
<header>
<h2>ブログ記事タイトル</h2>
<p>この記事の概要説明</p>
</header>
4. ナビゲーションとheaderタグの関係
headerタグの中にはナビゲーションメニューを含めることもあります。サイト全体の案内として機能するため、headerとの相性が良い構造です。ただし、ナビゲーション自体はnavタグで表すことで意味が明確になります。
<header>
<h1>サイト名</h1>
<nav>
<a href="#">ホーム</a>
<a href="#">記事一覧</a>
</nav>
</header>
5. headerタグに入れてはいけない内容
headerタグには、その後の本文そのものは入れません。長い文章や詳細説明、メインコンテンツは役割が異なるため不適切です。headerはあくまで案内役であり、主役ではありません。
<header>
<p>これは記事の本文です。内容が長く続きます。</p>
</header>
6. headerタグのNGな使い方例
よくある間違いとして、ページ上部の装飾用コンテナとして使ってしまうケースがあります。見た目だけでheaderを使うと、HTML構造が分かりにくくなります。意味を考えずに使うのは避けましょう。
7. SEOとheaderタグの正しい使い方
検索エンジンはheaderタグの中身を参考に、そのページやセクションの内容を理解します。見出しや要点が適切に入っていると、ページ構造が正しく伝わりやすくなります。SEO対策としても、意味を意識したheaderの使用は重要です。
8. 初心者が意識したいheaderタグの考え方
headerタグは「この内容の顔」と考えると分かりやすいです。何について書かれているのか、どんな情報が続くのかを示す場所として使います。この意識を持つだけで、HTML構造は一気に整理されます。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
