Every browser I've observed creates a <head>
element that's accessible in the DOM even if there are no explicit <head></head>
tags in the document's markup.
However, Google Analytics uses the following code for dynamic script insertion:
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
The following line:
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
seems to make a special concession for cases where a <head>
element is not present.
Is this just a case of extreme backwards-compatibility (e.g., for Netscape 4, or the like), or is there a case to be made for not assuming that modern browsers (i.e., Internet Explorer 6 and more recent) will always have access to a <head>
element in the DOM?
6 Answers. Show activity on this post. Omitting the html , head , and body tags is certainly allowed by the HTML specifications. The underlying reason is that browsers have always sought to be consistent with existing web pages, and the very early versions of HTML didn't define those elements.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
In HTML 5 it is not mandatory to include a <head> tag inside the HTML document but in previous versions(4.0. 1) it was mandatory to include it. The tags like <title>, <meta> or <link> which are generally contained inside head will also work fine without the <head> tag or outside the <head> tag.
The modern browsers are creating the head element for you when needed.
But assuming that the client will do so is not smart if you want your code to be bullet-proof. So the Googlers are being conservative and safe.
The extra clause in their statement is de minimus, but adds additional reliability. So it's a good thing.
ps Good job on the question and pulling out the relevant code.
Added:
The HTML spec says that the head tag is optional. I don't think the browers' creation of the head "element" in the dom is required by the spec. Google doesn't want to (and shouldn't) count on it being there.
In fact, not all the browser automatically create <head></head>
when the document is load. I mean not even on modern browser such as Chrome (Version: 9.0.597.102).
When you load an image directly to the browser, like for example:http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg
,
the browser will only generate the <body>
tag to contain the image and the <head>
tag can not be found on the source code.
Google using this code:
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
We can not create <head>
using document.createElement('head')
: using that will get an error: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3"
.
Thus when there's no head tag, you cannot append anything to it. That's why google put the element into the <body>
instead.
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