headタグとheaderタグ
みなさん head タグ使ってますか。
僕はめっちゃ使ってます。
最近 header タグというものの存在を知って色々混乱したので備忘録的にに残したいと思います。
この記事を読まなくても、 head タグと header タグという全く別物があることは頭の中に残しておいてください。
head タグとは？
参考:
上記から、 head タグとは、人に読ませる目的ではない title タグやOGPタグといったmetaデータを格納する箇所であるとわかります。
記載場所は html タグ配下になっています。
ここで厄介なのが、
要素内で最初に存在するものが要素である場合、開始タグを省略可能。
要素に続く最初のものが空白文字やコメントでない場合、終了タグが省略可能。
といった仕様。
つまり、うっかり許可されていないタグなどを記述してしまった場合、強制的にタグが閉じられて headタグ内に記載すべき要素が headタグの外に漏れ出てしまいます。
許可されているのは以下のタグになります。
<title> <base> <link> <style> <meta> <script> <noscript> <template>
最近は head タグ内に記載することを指定されているタグも、うっかり body タグに記載してもちゃんと動く事が多いです。しかし、それは結局想定されていない利用方法になってしまうので、何が起きても文句は言えません。
うっかりwebページ全体に悪影響がでてしまう事故が起きてしまう可能性があるということです。
webメディアを運用する人はこちらの仕様はしっかりと頭に入れておいたほうが良いでしょう。
header タグとは？
参考 :
head タグと名前がよく似たこちら、 必須なタグではなく、 例えば、 body タグの内部に設置しても大丈夫なタグです。
基本的に内部に header タグや footer タグを除いたすべてのタグが記載可能であり、勝手に閉じることはありません。
<div class="header"></div> みたいに記載してたやつの代わりに使えそうなタグですね。
これだけだったら超名前似てるけど使い方全く違うややこしいタグがあるで済みます。
まぁそれでも検索でうっかり head タグと header タグの調査結果を取り違えるなどはありそうなので、本当にこの名付けは個人的には勘弁してほしいものです。
さて、ここで前述の参考(https://developer.mozilla.org/ja/docs/Web/HTML/Element/header)から、衝撃的な文言を見つけました。
要素は HTML5 まで仕様書には現れていませんでしたが、実は HTML の最初期に存在していました。 the very first website に見られるように、元は 要素として使用されていました。ある時点で、別な名前を使用することが決定されました。これによって が自由になり、のちに別な役割を担うことができるようになりました。
つまり、元は head 要素として使われてたってことですね。
昔のHTMLはつまりいつの間にか事故の起こるHTMLという話になっていたようです。
これはちょっと個人的にはひどいなぁとは思います。なんで昔別の用途で使われてたものをこんな再利用の仕方をしたのか。。。
今の時代、うっかり取り違えても表示やパースで大事故がおこるというのはそうそうなさそうですが、HTMLの仕様をすべて追えてる人ではないと確実にひっかかりそうな話です。
最後に
もちろん、ちゃんとHTMLの仕様を追っていた人には関係のない話です。
不勉強なやつらめ、で済む話ですが、個人的にはもう少し別の名前をつけてほしかったなぁと思う今日このごろ
