HTMLのheaderをheadと間違えないための使い方というタイトルにしたのは、もちろんheaderとheadの違いの再確認のためでもありますが、違いに加えてHTML5から追加されたheaderの使い方が変わったので、まとめておきたいと思ったからです。
そしてHTML headerの書き方で検索したらheaderの書き方ではなくheadの書き方が上位表示されてたので、初心者さんならheadとheaderを間違えてしまうかもしれないな。とも思えたからです。
headerとheadの違い
headerとheadの違いから
header
headerとheadの大きな違いは、HTML文書の中での使い方が全く異なる使い方だということです。
head
headerはHTMLのbody要素の中にコンテンツの要素を定義してマークアップしやすくします。そしてブラウザにheader要素を宣言するためにも使います。
headは、そのWebサイトやページにタイトルやディスクリプションの検索エンジン向けの情報を記述したり、外部ファイルを読み込んだりする情報を追加するのがheadです。
- header要素のコンテンツはブラウザの画面に表示される
- headの中に書いた内容はブラウザの画面に表示されない
headタグはheaderタグよりも前に記述します。
headの下にbody、そしてbodyの中でheaderタグの使用なので、全く違う使い方になるため、headの中でheaderを使うこともないし、headerの中でheadを使うことがないように使い分けします。
さらなる違いは、headは文書の中で一度しか使えないけどheaderは文書の中で複数使うことができます。
headとheaderの違いを覚えるときは、headを先に理解してしまったほうがHTML文書で一度しか出てこないし、HTML文書の上のほうに必ずあるのでheadから理解するとheaderとの違いの理解が早いです。
逆にheaderはHTML5から新しく追加されたタグで、個人的にはheaderの使い方が難しく感じるときがありました。なので少しでも理解不足を埋めておきたいと思います。
header要素はHTML5から追加された要素
header要素はHTML5で追加された要素です。
HTML5からのheaderタグの追加によって、ヘッダーをheader要素だけでページや各セクションのヘッダーを表すことができます。
そのためHTML構造が分かりやすくなったり、ヘッダーとしての意味を強調できる良い面があります。
HTML5から追加されたheader要素はWebサイト制作者さんたちがheaderをマークアップしやすくできるようにとの理由などから、追加したheader要素といえるのかもしれません。
個人的に趣味でHTMLで遊んでる私には、なかなかHTML5で追加されたheaderの素晴らしさは分かってないことが多いですがヘッダーがheader要素で分かりやすくなったということだけは伝わります(多分)
HTML5以前のheaderはどうだったのか
そんなHTML5で新発売されたheader要素を私はHTML5から使い始めた人だったので、HTML5以前を知りません。
知らなかったながらも当然のように使っていたのが以下の書き方です。
<div id=”header” ヘッダー部分</div>
今までは適切な要素がない場合には、<div>で囲ってid属性でheaderとして文書構造を示すやり方です。
今までというより今も使うことがあるけど、よろしくないのだろうか疑問(いや良き)
<div id=”header”>
<h1>その昔HTML5以前のお話</h1>
<p>こんな感じの使い方</p>
</div>
divに属性をつけるマークアップは、よく見ることも多いので私もマネしてheaderのマークアップで使うことが多い方法ですが、HTML５からのheader要素の登場で、ブラウザや検索エンジンに対して、より明確に文書構造を伝えられるようになったということで使い方の理解が必要かもと思えてきました。
header要素で使える中身
HTMLのheaderの中身には何を書くことができるのか。
- ページのタイトル
- 文書や記事の発行日時
- サイト内検索、商品検索
- グローバルナビ
- ロゴ
主にページのタイトルとグローバルナビしか使ってませんが上記はheader要素の中身で使うことができます。
そしてセクションの見出しもオッケーで、header要素は使える範囲が広い？というかHTML文書全体のheaderだけではなくて、セクション単位のヘッダーにも使えるのでセクションのタイトルを含めることができます。
過去にheaderのタイトルとheadのタイトル部分が同じように見えてしまうという違いの分からない人のわたしでしたが、headのタイトルはブラウザのタブに表示されるWebサイトのタイトル。headerのタイトルはページに表示されるタイトルのようなことが理解できてから違いの分かる人になれたので、もし同じような方がいたらヒントになればと思います。
「headerの中身を知ってheadを知る」ということが言いたかったのです。
headerを使った書き方
headerの書き方です。
headerタグは見た目のレイアウト目的では使わないようにします。HTML5以前はdivでheaderを属性にしてCSSをあてて書くクセで属性をつけてしまいそうですが、HTML5のheaderでは使い方が変わります。
<html>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<footer>...</footer>
</body>
</html>
header要素をbody要素の子要素として配置した場合は、文書全体のヘッダーを表すことになります。
headerはあくまでも、文書構造上のコンテンツの先頭や導入部を表すものなので。
そしてサイトにheader要素を1つしか使ってはいけないということはないのでした。
複数のheader要素を使っても大丈夫というのは、それぞれのheaderは、ドキュメントの各セクションの1つ1つとかに対するヘッダーにもなれるからです。
でも個人的ですが、複数でheaderを使用してもいいとはいえ実際にはなんかheader祭りみたいな感じがして私は見ずらかったです。
それなのでheader要素は多く使わないでsectionとかarticleを使ったほうが構造がベストなのではと思いました。いえ思います。
<article>
<header>
<h1>コンテンツの見出し</h1>
</header>
<section>
<h1>セクションの見出し</h1>
<p>コンテンツの内容</p>
<p>コンテンツの内容</p>
</section>
<section>
<h1>セクションの見出し</h1>
<p>コンテンツの内容</p>
<p>コンテンツの内容</p>
</section>
</article>
header要素をarticleの子要素としてarticleの直後に使ったりします。
article要素の下にheader。その下にh1見出しを書いてheaderを閉じる。
そして下に各section要素ごとに見出しをh1タグで書いてコンテンツを書いていく。
あ、細かくて頭痛い。
このような書き方は、主要なブラウザでheader要素がブロック・レベル要素としてレンダリングされるようにするために、それをブロックとしてCSSで明示的に宣言する必要があるということも考えると、複数使うより少数でheaderを示したほうが協調されるのかなとの考えもできるのかもしれません。
まぁ肝心なのはheaderとheadは全く異なる扱いなんだという初歩的な理解ができたら、header要素はHTML5から追加された要素なので、使うときにはスタイルあてのために属性をつけたりしないということですかね。
