Menu
The problem: When I place link, style or script elements in the head element then the browsers appear to erroneously move these elements into the body element as detected by walking the JavaScript node tree. By erroneously I mean that they violate the specification. For example http://www.whatwg.org/specs/web-apps/current-work/#the-link-element which states:
Note: If the rel attribute is used, the element is restricted to the head element.
here is my code
<!DOCTYPE html>
<html>
<head>
<title>head test</title>
<meta charset="utf-8" />.
<link href="sample.css" rel="stylesheet" />
<script></script>
<style>p{font-family:"Times New Roman";font-size:20px;}</style>
</head>
<body>
<p>test paragraph</p>
<script type="text/javascript">
function htmlTree(obj){
var obj = obj || document.getElementsByTagName('html')[0];
var str = "<ul><li>" + obj.tagName;
if (obj.hasChildNodes()) {
var child = obj.firstChild;
while (child) {
if (child.nodeType === 1) {
str += htmlTree(child)
}
child = child.nextSibling;
}
}
str += "</li></ul>";
return str;
}
window.onload=document.write(htmlTree());
and here is the result:
HTML
HEAD
TITLE
META
BODY
LINK
SCRIPT
STYLE
P
SCRIPT
Note that the link, script, and style elements that were in the head have been moved to the body while the title and meta elements are correct. Unfortunately this has become an issue with me because when I use HTML5 contentedible and move elements the elements get all jumbled up and cannot be untangled. Since html5 supports class attributes on these elements I'm wondering if I could use a "headtype" class to distinguish these specific elements.
This is somewhat similar to Webkit moves head content to body, and adds extra space? but more detailed. That question was specific to WebKit but I have tested this in WebKit, Chrome, IE, and Firefox and get the same results in each browser which puzzles me.
Since all the major browsers have the same behavior I suspect I misunderstand something and would appreciate any help.
989
If it's in the HEAD section, the script will be parsed before any HTML or CSS elements are loaded. If your Javascript references any of the web page's elements, there may be a slight delay in the fancy effects you want to apply, or it may just not work at all.
Script tags inside the head element will be loaded and interpreted before any HTML is rendered, this blocks HTML/CSS rendering. Script tags at the bottom of the body tag, will not block HTML/CSS and since you can only play around with the DOM on DomReady, this is the best position to put your JavaScript.
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.
When you place a script in the head section, you will ensure that the script is loaded before anyone uses it. Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.
After some more investigation trying to characterize the parameters of the problem more succinctly I found the problem. After doing a hex dump of the HTML file of the file I had copied for my test case I found some hidden control characters after the meta tag that displayed as a dot as Rob W noticed. After removing the control characters the HTML worked correctly. Since I am constrained to use HTML generated elsewhere it looks like I'll have to preprocess the HTML prior to loading the browser.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
