headerタグとは

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

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

目次

headerタグとは

HTMLのheaderタグは、「見出し」やロゴ」、「作者名」および「ナビゲーション」などのセクションの導入部分となるコンテンツのグループを表します。共通部分として使うことが多いです。

<header>タグの特徴

headerタグはアウトインを生成しない

headerタグはarticleタグやsectionタグのようにアウトラインを生成しません。

見出しは必須ではない

headerタグ内には、見出し(<h1>~</h6>)が設置されることが多いですが、headerタグはHTMLのアウトラインを生成しないので見出しは必須ではありません。

複数回使用できる

headerタグ必要であれば、同一ページ内で何回でもheaderタグを使用可能です。

基本的に入れ子にしない

headerタグの子要素にheaderタグを入れてはいけません。

ただしセクショニングタグで区分されていれば入れ子にできる

HTML 5.1 では、headerタグの子要素にセクショニングタグ (article, aside, nav, section) がある場合には、header タグを入れ子にすることが可能です。

視覚的な効果はない

視覚的な効果は得られません。装飾目的の場合は必要に応じてdivタグを使い、スタイルシートで調整しましょう。

headタグとは全く別の要素

headerタグとメタ情報を記述するheadタグは全く別の役割を持った要素です。名前が似ているので混同しないように気をつけましょう。

使い方

<body>直下や<article>直後に使われるケースが多いです。

body直下に設置してサイト全体の先頭部分とした場合

以下の例は、ページの最上部に<header>を設置し、子要素のh1で記述したサイト名が、サイト全体の導入部分となっています。

例1

<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>
                            <section>
                                          <h1>見出し</h1>
                                          <p>コンテンツの内容</p>
                            </section>
              </main>
              <footer>
                            フッター
              </footer>
</body>

articleタグ直下に配置して各コンテンツの先頭部分とした場合

articleタグの中にheaderタグを入れるケースもあります。記事などのメインコンテンツをarticleタグで囲ったあとに、子要素として冒頭部にheaderタグを記述します。headerタグの内容には記事の見出しや執筆者名、公開日時などを記載します。

例2

<article>
              <header>
                            <h1>全体の見出し</h1>
                            <time datetime=”2022-11-10″ pubdate>2022年11月10日</time>
                            <cite><a href=”https://twitter.com/ “>執筆者アカウント</a></cite>
              </header>
              <section>
                            <h1>セクションの見出し</h1>
                            <p>コンテンツの内容</p>
              </section>
              <section>
                            <h1>セクションの見出し</h1>
                            <p>コンテンツの内容</p>
              </section>
</article>

まとめ

headerタグはページの導入部分やナビゲーションなどを表す際に、セクションの先頭で利用するものです。メタ情報を記述するheadタグとは全く別物なのでご注意ください。

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

お取引企業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(祝祭日を除く月曜日~金曜日)
目次