結論
- headタグ内のstyleはbodyタグ内のstyleで上書きされる
- HTML Living Standardでは仕様としてはheadタグ内を推奨しているが、主要なサイトではbodyタグ内に記述している事例はある
背景🎏
業務でhead,body内にstyleタグを埋め込む処理を実装していました。
実際どのような違いがあるのか分からなかったのでこの度調べてみます！
headタグ内のstyleはbodyタグ内のstyleで上書きされる🎨
headタグ内のstyleはbodyタグ内のstyleで上書きされるそうです。
サンプルコード
See the Pen style overwrite by style element within body by 山根大生 (@uuylkesg-the-styleful) on CodePen.
以下が理由だそうです。
headタグ内に指定したstyleタグが先に実行されます。
その後にstyle属性が、styleタグを上書きする形で実行されます。
確かに上書きされています。
styleタグを記述する際は上書することもあると頭に入れておく必要があります。
HTML Living Standardではbodyタグ内にstyleタグを書くことについて触れられていない😵
HTML5.2でbodyタグ内にstyleタグを書くことが可能になったそうです。
引用
HTML5に変わって現在の標準であるHTML Standardではheadタグにstyleタグを書くと書かれています。
In a noscript element that is a child of a head element.
whatwg
つまり、bodyタグにstyleタグを書くことについて触れられていないです。
禁止されているような文言が見当たらなった為、触れられていないと表現しています。
「style tag should be allowed in body」🗣️
styleタグをbodyタグ内で使うことに関する議論が過去にされていたそうです。
主要なwebサイトでもbodyタグ内にstyleタグを使用している
Do we have proof that <style> in <body> significantly affects performance on a real website?
「bodyタグ内のstyleタグが実際のウェブサイトのパフォーマンスに大きく影響するのか」という問いの答えは出ないままcloseされています。
参考
- HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！
- HTMLのbody内に定義は作法的にOKでしょうか？
- style tag should be allowed in body
- 参考コード付き】htmlにstyleを直書きする方法について解説
最後に
- bodyタグ、headタグにstyleタグを記述する際の違いについて勉強になりました
- 仕様としてはheadタグ内を推奨しているが、主要なサイトではbodyタグ内に記述している事例もあるということを知り興味深かったです
- 過去に「bodyタグ内にstyleタグを記述する」ことについて議論があったことを初めて知りました