6

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?

scunliffe
  • 57,883
  • 24
  • 118
  • 156
monksy
  • 13,745
  • 16
  • 68
  • 121
  • My personal theory is that the html/body/head[*] tags are being ignored and the script tags are being run at the position they are at in the text. The javascript is running. – monksy Sep 27 '11 at 20:41
  • 1
    Are the ``'s necessary in the templates? – mellamokb Sep 27 '11 at 20:43
  • 3
    @monksy: Why on earth would you add multiple head sections in an HTML document??? – PeeHaa Sep 27 '11 at 20:44
  • 3
    Technically it should be possible to have more than one head section, but I would do anything humanly possible to avoid it like the plaig. – adeneo Sep 27 '11 at 20:45
  • I understand that it basically invokes the worst nightmares one can possibly imagine, however I'm dealing with code that was inherited, and the JSP files have their own CSS and JS contexts. – monksy Sep 27 '11 at 20:47
  • If they are just including some scripts, style files... you should be fine (if you can get rid of the head tags). Its not optimal (e.g. styles should be included in the head if possible, and script should be at the bottom of the page (if possible) but it should work. – scunliffe Sep 27 '11 at 20:51
  • 6
    crazy post of the day! – vtortola Sep 27 '11 at 20:51
  • @monksy: From whom did you inherit the code? I would shoot the person on sight :D – PeeHaa Sep 27 '11 at 20:55
  • 2
    Their classpath is: localhost.home. So you might want to do a whois on localhost... it'll give you their location. – monksy Sep 27 '11 at 20:59
  • Also: put a warning note to the people who look at the words multiple head and automatically downvote it – monksy Sep 27 '11 at 21:03
  • This looks like something that would be good to freak out people on 1 April next year. – monksy Sep 27 '11 at 21:21

4 Answers4

8

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.

Alohci
  • 70,004
  • 12
  • 103
  • 143
6

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?

Community
  • 1
  • 1
Sparky
  • 94,381
  • 25
  • 183
  • 265
  • 2
    Small addition: You can just put the INSIDE the body, it doesn't need to be inside the ... in fact, this is recommended by some people for performance reasons (See: http://developer.yahoo.com/performance/rules.html) -- I'm not sure if this is possible with CSS, but it's certainly not recommended! – Martin Tournoij Sep 27 '11 at 21:12
  • 1
    I was considering delving into the performance benefits of putting `script` tags/includes at the end of the page inside the `body` but I thought I'd be getting off my point too much. – Sparky Sep 27 '11 at 21:19
2

You don't really need extra heads to include additional css/js. You can 'inline' the whole <style type="text/css">...</style> part and it will render fine. Will it validate? No. But will run fine.

vector
  • 6,979
  • 7
  • 48
  • 74
  • I realize that you can use the styles tag and script tags within the body, but how would links within the body work. – monksy Sep 27 '11 at 20:53
  • 5
    Inline css is rarely the answer. On second thought it is actually never the answer. – adeneo Sep 27 '11 at 20:55
  • I didn't say this the right way to do it, but it's still better than having multiple heads. In an ideal world this would never happen, except who develops there? Don't know about you downvote, but some of us have to deal with sewage of this sort. – vector Sep 27 '11 at 20:56
  • I didn't downvote... I actually upvoted after I saw -2. Your answer, although ignores – monksy Sep 27 '11 at 21:06
  • 1
    ... oh that was just for however down voted it. I used shake my head at code that violated rules like this until I got exposure to some really ugly stuff that happily lives in production and pays the bills regardless. Sigh ... Thanks for the upvote ;-) – vector Sep 27 '11 at 21:12
0

How is the resulting page handled in IE and Chrome? [It renders and appears successful]

I don't know and I really don't want to know.

What is the best practice for dealing with multiple heads [for CSS/Javascript] without having to demand all pages use the same JS and CSS.

Don't do it :-)

Is there a reason you can't just include the JS files in the body / head without the extra tags?

Or add the css / js files in the 'normal' head section of the document (where it should be).

Well atleast you want the CSS files to be loaded as soon as the page starts loading. JS files can (sometimes) be loaded at the end of the HTML.
For example if the JS files need to have a completely loaded DOM (for e.g. accessing DOM elements).

Note

Sorry this isn't really an answer to your question, however what you are doing just looks way bad. :) And is almost certainly not needed / there will be a better solution for it.

PeeHaa
  • 66,697
  • 53
  • 182
  • 254