ヘッダー要素(header)の仕様と使い方

カテゴリ:HTML5編

header要素の概要

header要素
header要素は一般的にサイトヘッダーとしてサイトのタイトルロゴやメニューなどが置かれます。

要素名はhead要素と似ていて紛らわしいですが、headはhtmlのヘッダー(ユーザーに見えない部分)を意味するのに対し、headerはbody内のコンテンツのヘッダー部(ユーザーに見える部分)を意味します。

一般的にヘッダーはページヘッダーセクションヘッダーに分けられます。

ページヘッダーとセクションヘッダー

ページヘッダーはページの最上部に配置されます。つまりheader要素はbody要素内直下に最初に現れる要素になります。
また、通常はページヘッダーはすべてのページ共通のヘッダーとして配置されるため、サイトヘッダーの意味合いも持っています。
つまり同じWebサイト内の各ページは同じサイトタイトル、メニューを持つため、典型的にはページヘッダー=サイトヘッダーとなるのです。これはページフッターにも同じことが言えます。

一方各セクション(article、aside、nav、section)内直下に配置した場合、そのセクションのヘッダーを意味します。
つまり属する直接の親要素によってどの要素のヘッダーであるか、その意味合いが変わってきます。

一般的な構成例

headerと対をなす要素はページの最下部に配置されるfooterとなり、以下の例のようにbody要素直下にはメインコンテンツ(main要素)やサイドバー(aside要素)を上下で挟むようにheader要素とfooter要素を配置する構成が一般的です。
更に必要に応じてarticleなどのセクション内にそのセクションを表すヘッダー(以下の例の場合記事のヘッダー)やフッターを配置します。

典型的なHTML5要素の構成例)

<body>
    <header>
        ページヘッダー(サイトタイトル、メニューなど)
        <nav>
            サイトメニュー
        </nav>
    </header>
    <main>
        記事などのメインコンテンツ
        <article>
            <header>
                記事ヘッダー
            </header>
            記事本文
            <footer>
                記事フッター
            </footer>
        </article>
    </main>
    <aside>
        サイドバーなどのメイン以外のコンテンツ
    </aside>
    <footer>
        ページフッター(メニュー、コピーライトなど)
    </footer>
</body>

header要素の利点

HTML5の前までは、ヘッダー部は典型的には
<div id="header">
など、div要素+idもしくはclass名で表していましたが、これはHTML上の意味はなく、統一的な表し方はありませんでした。
HTML5ではヘッダーとしての意味を持つ
<header>
で表す事ができ、CSSも要素名を指定して設定できるようになりました。
これは、スクリーンリーダーがボディ内のヘッダー部を識別する際にも用いられます。

なお上述したようにheader要素はbody直下に配置されればページ全体のヘッダー部を表しますが、何らかのセクション内にあればそのセクションのヘッダーとして識別されます
そのためheader要素をページヘッダーとして使用する場合は、特別な意図がない限りbody要素の直下に配置しましょう。

W3Cによるheader要素の説明

header要素は、最も近い先祖のメイン要素、セクショニングコンテンツ、またはセクショニングルート要素の紹介コンテンツを表します。ヘッダーには通常、導入部またはナビゲーション補助用のグループが含まれています。

header要素の最も近い先祖のセクショニングルート要素がbody要素で、main要素またはセクショニングコンテンツ要素の子孫ではない場合、そのheaderはbody要素にスコープされ、ページ全体の紹介コンテンツを表します。

公開日時: 2019年06月02日  16:31:41

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

HTML5編に戻る

「HTML5編」に関する他の手順
「HTML5編」に関するTips

「HTML5編」に関するTipsはありません。

このページのトップに戻る