どうも7noteです。いろいろなサイトを見ていると気になる、「<header>」と「id="header"」の違いについて
ヘッダーを作る際、参考に他のサイトを見ていると2種類の書き方を見かけます。
・<header>
・<div id="header">
これらの違いはなんだろう？と気になった方もいるとおもいますが解説していきたいと思います。
「<header>」と「<div id="header">」の違いはHTML5かそうでないかの違い
<header>はHTML5でのヘッダーの書き方です。
HTML5とは、まぁ簡単にいうとHTML界の最新型iPhoneのようなものです。これまであった機能などをより簡単に幅広く使えるようになったHTMLだと思ってください。
そして、<header>もHTML5から新しく作られた要素です。
逆にいえば<div id="header">はHTML5が出るよりも前の主流のヘッダーの書き方というわけです。
▼１番の違い
じゃあ具体的に機能としては何が違うのか。それは「googleなどの検索エンジンのAI（クローラー）が瞬時にヘッダーだと認識できるかどうか」の違いです。
なんのこっちゃと思う人もいるかもしれませんので、もう少し説明をいれますね。
まずgoogleなどの検索エンジンには、一般で公開されているwebサイトの構造を理解して評価し、検索結果の順位に反映をしています。これにより、ユーザーが欲しいと思った記事を上位に表示させることで、「google使いやすい、LOVE♥」となるわけです。
ではweb開発者の視点からみれば、googleのクローラーから、より高い評価をもらわなければなりません。
そのため、検索上位を狙うのであればクローラーが喜ぶようなタグの使い方やサイト構成を意識してサイトを作る必要があります。
これが「<header>」と「<div id="header">」の最も違う点です。
<div id="header">は使ってはいけないのか？
決して使ってはいけないというわけではありません。ただ、少しでもgoogleからの評価を受けやすいサイトにするのであれば、ヘッダーを作る際は<header>を使ったほうが良いとされているという話であり、自分で好きなサイト（もしくは一般公開しないサイト等）を作る場合は正直どちらでもいいと思います。
<header>の正しい使い方
基本的にwebサイトのヘッダーは1つしかありません。
そのため、<header>はbodyの直下に1つだけの設定がオススメです。
<header>の特性として、body以外のタグの直下で使ってしまうと、サイトのヘッダーという認識ではなく、そのタグのヘッダーと認識されてしまう可能性があります。
この辺については正直ちょっとややこしいので、はじめのうちはbodyの直下に1つだけ<header>を設定するオススメです。
おまけ
「<div id="header">と<div class="header">の違いは？」
こちらはgoogleのクローラーからの評価に大きな差はないでしょう。
ただ製作者的に「idは1ページ内に1つ、classは1ページ内に複数可能」という違いがあるため、制作するときに間違いのないようidで作成していることが多いという話だと思います。
ヘッダーは基本サイトに1つというルールが一般的なので、固有のものにするためidが使われていることが多いのです。
classで作ったとしても、webサイト的には普通に作れますし、見た目がそれで変わることはありません。
まとめ
・「<header>」と「<div id="header">」の違いはHTML5かそうでないかの違い
・<div id="header">はHTML5が出るよりも前の主流のヘッダーの書き方
・bodyの直下に1つだけ<header>を設定する
<div id="header">だからといって、検索の上位に絶対でないというわけではありません。
あくまで評価の基準となる一部の指標なので、検索にヒットしやすいサイトでも<div id="header">で作っているサイトはあります。
ですが、これから新しく作るサイトであれば私は「<header>」でヘッダーを作ることをオススメします！
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ