Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is a <head> element always available in the DOM, even if absent in the HTML markup?

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?

like image 442
Bungle Avatar asked Aug 29 '10 05:08

Bungle


People also ask

What will happen if you omit writing the head element?

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.

Where is the head section of HTML?

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

What is the head element in HTML?

The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

Is Head mandatory in HTML?

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.


2 Answers

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.

like image 196
Larry K Avatar answered Sep 19 '22 15:09

Larry K


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.

like image 45
phuang07 Avatar answered Sep 22 '22 15:09

phuang07