According to the Mozilla Developer Network web docs, "The head of an HTML document is the part that is not displayed in the web browser when the page is loaded."
Wrong!
You can see my live example of the following HTML source, which works the same in every web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<style>* { display: block; } /* This is a style element in the head. */</style>
<script>console.log("This is a script element in the head.");</script>
<title>This is the title element in the head.</title>
</head>
<body>
<style>:root { color-scheme: light dark; } /* This is a style element in the body. */</style>
<script>console.log("This is a script element in the body.");</script>
</body>
</html>For extra fun, I've actually added contenteditable="true" to the elements at the suggestion of a follower on Mastodon. Believe it or not, this allows you to live edit the title and CSS of the HTML document! You can also edit the text of the <script> elements, but that doesn't re-run the JavaScript.
By default, as defined by the user agent (browser) style sheet, HTML elements such as <script>, <style>, and <title> have a CSS display property of none, which is why you don't normally see those elements in the web page. However, it turns out that you can override the default and set display to a different value, thereby making the elements display.
I learned of this HTML "feature" by accident. My web browser extension StopTheMadness Pro can add custom <script> and <style> elements to a web page. A customer of StopTheMadness Pro reported that the custom element was getting displayed on a particular web page. After much debugging and hair pulling, I discovered the cause of the problem: the page style included the following CSS (more or less).
body > * { display: grid; }The custom element added to the HTML body by StopTheMadness Pro was thus affected by the CSS and displayed on the page.
I personally consider the behavior to be a bug in HTML. Some elements should never display, were never meant to be displayed, as evidenced by the (inaccurate) documentation quoted at the beginning of this blog post. On the other hand, I've heard from some people who consider it a feature, a kind of self-documenting source code, as it were. I'm not even sure where exactly one would file a bug report against HTML itself? Anyway, since this cross-browser behavior is unlikely to change in the near future, I guess that I'm going to have to work around the issue by adding a style my <style> elements! It's styles all the way down.