headerタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

目次

headerタグの基本

生徒

今日は何について学ぶんですか?

先生

今日はHTMLのheaderタグについて学ぶよ。このタグはウェブサイトのヘッダー部分を表すために使用されるよ。

生徒

headerタグですか。あまり理解せずに使っていました。でもヘッダー部分とはどこを指すんですか?

先生

ヘッダー部分は大きく分けて2種類あるから覚えておこう。
1つ目は「ページ全体のヘッダー」。これはページの上部に配置されることが多いよ。見出しやロゴ、ナビゲーションなどがあるエリアだね。

生徒

見出しやメニューがページの一番上に表示されているのをよく見ます。あれがヘッダーですね。

先生

コード上ではheaderタグは、bodyタグの直下に配置されることが多いよ。

先生

もう一つは「各セクションのヘッダー」で、「記事ごとのヘッダー」とも言えるね。

「ヘッダー」には大きく以下の2種類があります
  • ページ全体のヘッダー
  • 各セクションのヘッダー(記事ごとのヘッダー)
具体的には、次のような内容を配置します
  • 見出し
  • ナビゲーション
  • ロゴ
  • まえがき
  • 公開日
  • 著者名

headerタグの使用例

生徒

どのように使うのでしょうか?

先生

まずは具体的な使用例を通じてheaderタグの使い方を見てみよう。

例1)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タグがあるタイプで、共通部分として使うことが多いよ。ユーザーはサイト内のどのページにいても、ここから各ページにアクセスできる。

例2)セクション内に配置して各セクションのヘッダーとした場合

先生

次に、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

見出しとアウトライン
HTML Standard | https://html.spec.whatwg.org/multipage/sections.html#outline

見出しは必須ではない

先生

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対策に効果を発揮するから、使い方を理解しておこう。

生徒

ありがとうございました!

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次