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 <head> or in the the very beginning of the <body> tag?
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 <head> to the very first position of <body> tag?
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?
EDIT
I found something very interesting. Check this code:
<script type="text/javascript">
document.write("testing");
</script>
If I place it in the <head> or in the top of the <body> the "testing" word will be inserted in the top of the <body> . 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 and in any case, YMMV.)
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.
Eg, 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>
<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="..."> . Just FWIW, this is my absolute baseline minimal document:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The title</title>
</head>
<body>
</body>
</html>
Yes, granted, several of those tags are technically optional, and this is technically an equivalent document per spec:
<!doctype html>
<meta charset="UTF-8">
<title>The title</title>
...but they don't cost much and I prefer the clarity.
1 There's been talk of scoped style elements, which would be valid outside head 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.
If I can move all my embeded JS and CSS to the body tag
You can't. CSS is not allowed in the body.
what is the purpose of the head tag?
Meta and Title elements are also only allowed in the Head. Meta is useful for specifying the encoding of the document. Title is mandatory.
But I want to know if there is any issue moving all the script and stylesheet imports from the <head> to the very first position of <body> tag?
Moving the scripts is unlikely to make any practical difference (they will block the content just as much at the top of the body as they do in the head).
Moving the CSS makes the document invalid. Browser error recovery is pretty good, but there is no point in triggering it if you can help it.
I found something very interesting
The start and end tags of the head and body elements are optional (the elements are still mandatory, they can just be inferred).
Generating content with document.write inserts it after the script element.
The parser then finds that content after the script element. Since it isn't allowed in head, it ends the head and starts the body.
If it then encounters a head end tag or a body start tag it discards them as part of its recovery from invalid code.
As I said earlier, browser error recovery is pretty good, but there is no point in triggering it if you can help it. Error recovery is one of the most likely places you are to find code which behaves differently in different browsers.
链接地址: http://www.djcxy.com/p/71526.html上一篇: JQuery $ function（）激发什么事件？
下一篇: 从HTML中删除头标签