この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
headerタグの基本
生徒今日は何について学ぶんですか？
先生今日はHTMLのheaderタグについて学ぶよ。このタグはウェブサイトのヘッダー部分を表すために使用されるよ。
生徒headerタグですか。あまり理解せずに使っていました。でもヘッダー部分とはどこを指すんですか？
先生ヘッダー部分は大きく分けて２種類あるから覚えておこう。
１つ目は「ページ全体のヘッダー」。これはページの上部に配置されることが多いよ。見出しやロゴ、ナビゲーションなどがあるエリアだね。
生徒見出しやメニューがページの一番上に表示されているのをよく見ます。あれがヘッダーですね。
先生コード上ではheaderタグは、bodyタグの直下に配置されることが多いよ。
先生もう一つは「各セクションのヘッダー」で、「記事ごとのヘッダー」とも言えるね。
- 「ヘッダー」には大きく以下の２種類があります
-
- ページ全体のヘッダー
- 各セクションのヘッダー（記事ごとのヘッダー）
- 具体的には、次のような内容を配置します
-
- 見出し
- ナビゲーション
- ロゴ
- まえがき
- 公開日
- 著者名
headerタグの使用例
生徒どのように使うのでしょうか？
先生まずは具体的な使用例を通じてheaderタグの使い方を見てみよう。
例１）body直下に設置してページ全体のヘッダーとした場合
先生はじめに、ページ全体のヘッダーを作成する例を見ていこう。
<body>
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>サービス</a></li>
<li><a href=”#”>会社概要</a></li>
<li><a href=”contact”>お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<!-- 本文 -->
</main>
<footer>
<!-- フッター -->
</footer>
</body>このコードには、headerタグの中にh1タグとnavタグがありますね。
先生h1タグでサイト名を表示し、navタグでナビゲーションメニューを表示しているね。
生徒よく見かける構造ですね。
先生これはページの最上部にheaderタグがあるタイプで、共通部分として使うことが多いよ。ユーザーはサイト内のどのページにいても、ここから各ページにアクセスできる。
例２）セクション内に配置して各セクションのヘッダーとした場合
先生次に、headerタグを各セクションのヘッダーとして使用する例を見てみよう。
<article>
<header>
<h1>記事タイトル</h1>
<p>作者: 田中太郎</p>
<p>公開日: 2023年10月10日</p>
</header>
<section>
<!-- 記事の本文 -->
</section>
<footer>
<!-- コメントセクションなど -->
</footer>
</article>こんなケースもあるんですね
先生記事などのメインコンテンツをセクショニングタグであるarticleタグで囲ったあとに、子要素として冒頭部にheaderタグを記述します。
生徒articleタグ内のheaderタグは、記事のタイトルや作者の情報、公開日などを含めるんですね。
先生その通り。この場合は、その記事に対するヘッダーを意味しているよ。
headerタグの使い方
先生headerタグを使う上で注意する点がいくつかあるのでお伝えしていくよ。
生徒お願いします。
headerタグを入れ子にしない
先生例外はあるものの、headerタグが入れ子になることは避けよう。
生徒わかりました。でも例外があるんですか？
先生headerタグの子要素に他のセクショニングタグ (<article>, <aside>, <nav>, <section>) で階層化されている場合はheaderタグを入れ子にすることが可能だよ。
<article>
<header>
<h1> <!-- 記事タイトル --> </h1>
<aside>
<header>
<h2> <!-- 見出し --> </h2>
<p> <!-- 本文 --> </p>
</header>
</aside>
</header>
<section>
<!-- 記事の本文 -->
</section>
</article>
アウトラインを生成
先生headerタグは「アウトライン」を生成しないという特徴があるのだけれど、この点が他のセマンティックタグであるarticleタグやsectionタグとは違うんだ。
生徒「アウトライン」を生成しない、とはどういう意味ですか？
先生「アウトライン」は、ページの構造を表すもので、主に見出しタグ (<h1>～<h6>) によって自動的に形成されるよ。
生徒自動的に形成されるんですね。でも僕はウェブサイトを見ているときに「アウトライン」を見たり、気にしたりしたことがないです。
先生「アウトライン」はページの構造を表すためのものだから、スクリーンリーダーなどを使わないと気が付かないかもしれないね。
原文：The header element is not sectioning content; it doesn’t introduce a new section.
訳：このheader要素はコンテンツをセクション化していません。新しいセクションは導入されません。
出典：HTML Standard｜https://html.spec.whatwg.org/multipage/sections.html#the-header-element
見出しは必須ではない
先生headerタグ内に見出しは必須ではないよ。この性質は前述の「アウトラインを生成しない」と関連するんだけど。
生徒headerタグはアウトラインを生成しないから、見出しが有っても無くても影響が無いということですね。
先生その通り。とはいえ、一般的には見出しが含まれることが自然だね。
原文：A header element is intended to usually contain a heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
訳：headerには通常、見出し ( h1-h6要素またはhgroup要素) が含まれるように設計されていますが、これは必須ではありません。このheader要素は、セクションの目次、検索フォーム、または関連するロゴをラップするために使用することもできます。
出典：HTML Standard｜https://html.spec.whatwg.org/multipage/sections.html#the-header-element
headタグとの区別
先生headerタグはheadタグと名前が似ているから混同しやすいけど、実際には全く異なる要素だから注意してね。
生徒似て非なるタグなのですね。
先生headタグ内にはHTMLの設定情報が含まれる場所で、コンテンツの冒頭を表すheaderタグとは役割が全然違うよ。
<head>
<title>ドキュメントのタイトル</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>まとめ
先生headerタグを適切に使うことで、ウェブサイトの構造が明確になり、アクセシビリティの向上とSEO対策に効果を発揮するから、使い方を理解しておこう。
生徒ありがとうございました！
