Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Multiple Heads


NOTE: I am in no way advocating multiple heads within a page


I'm using Apache Tiles and I have a few tiles that include their own heads. The result of the Tiles renders into an HTML page with multiple heads.

My questions:

  1. How is the resulting page handled in IE and Chrome? [It renders and appears successful]
  2. WITH APACHE TILES What is the best practice for dealing with/avoiding multiple heads [for CSS/Javascript] without having to demand all pages use the same JS and CSS files.

For Example with Question Two: Lets say you have the following pages: home, profile, and gallery listing. Gallery listing has fancy JQuery+YUI+... and more styles. For most users, they would only be interested in the home and profile pages, so why slow them down with loading the JS and CSS files associated with Gallery.

This is what is generated

<html>
    <head>
       <title>The Template's Title</title>
    </head>
    <body>
       <head> <script src="javascriptfile.js"/></head> Tile One Content
       <head> <script src="javascriptfile2.js"/></head> Title Two Content
    </body>
</html>

The generated contents is running the script in javascriptfile.js, and javascriptfile2. What I'm asking in the first question: is the extra heads ignored, and the contents considers? are they combined into the html/head level? Is it possible to include CSS files in the second or later head? Will this create an error with a stricter DTD?

like image 415
monksy Avatar asked Sep 27 '11 20:09

monksy


Video Answer


2 Answers

Well, in modern Chrome, it's at least possible to know what happens. Chrome uses the HTML5 parser algorithm which describes exactly how invalid mark-up is processed. The gory details are at http://dev.w3.org/html5/spec/tree-construction.html#parsing-main-inbody

What happens in your example is that the first <head> in <body> is discarded. Then the <script src="javascriptfile.js"/> tag is processed, which is a start tag, not a self-closing tag, so everything that follows, including everything that looks like a tag, becomes a text child of the script element. Nothing is displayed and no script is run. If <script src="javascriptfile.js"/> is replaced by <script src="javascriptfile.js"></script>, and ditto for <script src="javascriptfile2.js"/>, the head start and end tags are silent discarded, and the script elements are not moved. "Tile One Content Title Two Content" is displayed and the scripts are run. The DTD makes no difference at all.

IE is somewhat trickier to know, as before IE10, it doesn't use the HTML5 parser algorithm and therefore it's exact behaviour is a mystery. However, a cursory experiment appears to show that it has the same behaviour as described above.

Although some legacy browsers move elements that can only appear in the head - such as <link> - into the head, other browsers do not, and no such behaviour can be relied upon.

All in all, best steer well clear of such constructs.

I don't know about practices for Apache Tiles.

like image 92
Alohci Avatar answered Oct 03 '22 05:10

Alohci


What is the purpose of doing something so egregiously invalid? And why you're asking this seems very unclear.

Not only should you only have ONE <head></head> section on a page, under no circumstances is the <head></head> to be nested anywhere inside the <body></body> section.

This practice makes absolutely no sense whatsoever....

(Side-note: Certain browsers ignore or move invalid tags when the DOM is constructed which will defeat your entire purpose of doing this.)

EDIT (based on comments):

For anyone interested in including <script> tags within the <body>, you can read more about the specific details in my answer here...

Will linking javascript files in the body rather than in the header cause a problem?

like image 30
Sparky Avatar answered Oct 03 '22 06:10

Sparky