headerを使用する項目

制作者の意図だけであったものが正式な意味を持つように

ここからはHTML5の記述について、より詳しく、事例も入れながら解説していきます。HTML5では、意味を持つ要素=セマンティックがさらに強化されることになりました。

ここからは制作者側の話になりますが、たとえばHTML5より前は、エリアとして分けるための枠を作る記述方法として、ページ上部のエリアの意味づけでは「div id= “header”」と名づけることを多くの人がしてきたと思います。しかし、その仕様はWeb上での規定ではなく、制作者側の思いや意図を反映させているに過ぎませんでした。

それが、HTML5からは、正式に要素として「head」を用いることで、マークアップを行う制作側の意図としてだけではなく、閲覧する側も含めた共通認識として統一されることになったのです。この共通認識がとても大切であり、すべての人に対し「ボーダーレスであれ」という願いが込められているようにも感じます。

headerを使用する項目

headerは、ページ内部の「イントロダクション」にあたるエリアに配置します。headerが意図する内容から、ページ上部で用いるのが一般的です。また、その枠内に含めるものは、たとえば次のような項目です。

  • 見出し(ページの見出し)
  • 見出しの補足(序説やリード・補足文)
  • リンクメニュー(グローバルナビゲーションなど)
  • ロゴ(企業の口ゴなど)
  • 検索フォーム(サイト内検索など)

上記すべての要素をheader内に入れなければならないということ以上に、スクロールせずに見えるファーストビューに配置するということを念頭に作成する必要があります。