この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「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タグとは全く別物なのでご注意ください。
