Samul Samul - 4 months ago 8x
Javascript Question

Removing head tag from HTML

I am just trying to learn better HTML and I came up with this question: If I can move all my embeded JS and CSS to the body tag, what is the purpose of the head tag?

I know in the head I can set and all sorts of meta tags. Ok. But related to scripts and css, does it make any difference placing the code inside

or in the the very beginning of the

I am aware that importing scripts stops page rendering and also stops the browser from downloading more than X resources from the same hostname. I know it's best practice move the scripts to the end of the (when possible). Every case is a different case, I know! But I want to know if there is any issue moving all the script and stylesheet imports from the
to the very first position of

I know some old browser will render some space if I put script tags inside the body tag, but apart from that, is there any other issue?


I found something very interesting. Check this code:

<script type="text/javascript">

If I place it in the
or in the top of the
the "testing" word will be inserted in the top of the
. So, again it is clear that placing js css code inside head is invalid but can be moved to with no problem (every case is a different case).


Having script tags in body is entirely normal.

Technically, it's invalid to put style elements1 or link elements in body. In practical terms, it's functional and I've never heard of issues related to it, but it's invalid HTML. If you look for them in the DOM later, you may find that the browser has relocated them into head (possibly a head it generated itself). (My experience with cheating on style, which I had to do on a project once for pragmatic reasons, was that it wasn't relocated; can't speak for link.)

Similarly, it's technically invalid for a document not to have any head content if it's not an iframe src document. From the spec:

4.2.1 The head element
... Content Model:
If the document is an iframe srcdoc document...[snip]
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.

E.g., you must have a head element in your document, and it must have a title. Note that this doesn't mean you actually have to type <head> and </head> as both tags are sometimes optional (as is the opening <body> tag). For instance, this is a perfectly valid HTML5 document:

<!doctype html>
<title>My Document</title>
<div>Hi there</div>

I do not recommend it, but it's valid.

...what is the purpose of the head tag?

From the spec:

The head element represents a collection of metadata for the Document.

It not only includes CSS and script resources, but things such as the title and frequently a <meta charset="..."> declaration in case the document is being used without a mechanism that specifies the encoding.

So I'd recommend putting CSS in the head, being explicit about head, and including the required title and the recommended <meta charset="...">.

1 There's been talk of scoped style elements, which would be valid if they're ever formalized. The idea's been kicking around since at least 2011, but even as of today, neither the W3C spec linked above nor WHAT-WG spec allows scope on style elements.