32

In my web application I got Header.jsp file which contains default header contents. Im including it in all other pages using jsp:include tag inside body tag of each individual pages.

Header.jsp contains its own HEAD tag to specify default meta tags, link stylesheets, scripts and some HTML elements. At the same time I will have another set of HEAD tag in all other individual pages to define title, page specific script and stylesheets.

For example:

Header.jsp

<head>
   <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/favicon.ico" type="image/x-icon" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <script src="js/jquery.js"></script>
   <link rel=stylesheet type="text/css" href="dashboard.css" >
</head>
<h2>Dashboard</h2>

Main.jsp

<!DOCTYPE html> 
<html>
   <head>
      <title>Main page</title>
      <script src="main.js"></script>
   </head>
   <body>
      <jsp:include page="Header.jsp" flush="true" />
      .....
      other HTML contents specific to main page
      .....
   </body>
</html>

whether it is valid to do like this?

sureshd
  • 555
  • 1
  • 5
  • 16
  • can't you include the jsp file inside the `` and just use the lines you need like ` – Déjà vu Jun 11 '14 at 08:16
  • 3
    Off course you 'can'. The real question is : 'Is it valid to have two head tags?'. And the answer is no, following the W3C specifications – Gwenc37 Jun 11 '14 at 08:22

7 Answers7

86

The short answer is YES.

It's not a good solution but it will absolutely work.

People usually answer these questions in theory, like "no, because it's not valid by the standards". That's right, it's not. Future browsers might not support it, some source parsers may get confused, HR/IT experts checking out your portfolio may think you know less than Jon Snow, and all sorts of bad things. In theory. But it does happen out there in the real world, and browsers are not stupid: they know what you mean, they will take both head tags and work as expected.

And it's not just by chance.
They have very good reasons:

1. Head tag is optional. (see notes below the article!)
Browsers accept headtag-like contents even outside it, so in effect they ignore the tag itself completely. And if they ignore one, they will probably ignore several, too.

2. Visitors are precious.
Browsers want you to enjoy your time. They want to show you the best possible page they can compose out of the mess they've got. It's their intention, they want to show you that the internet works, not teach you how bad your favorite website is. If they can find out what the html code wants to express (and there's no deadly ambiguity in the structure), they will do their best to fix the page.

3. Bad markup tolerance is a thing.
Browsers are not just patient and forgiving, but sometimes they do acrobatic moves to get your stuff working. Look at this horrible mess:

<!-- no doctype! -->
<!-- no HTML tag! we're all gonna die! -->
<head>
    <style>
        body {background:#002233;}
    </style>
</head>
<head><!-- let's twist again! -->
    <style>
        body {color:white}
    </style>
<!-- we didn't even close the second one!! -->

See this text?<br>
With the background AND color properly set?<br>
<br>
Your browser's quite a badass.

About browser tolerance, here's a lot more with super-ugly examples - make sure you forget everything you've seen when you're back!)

So yes, of course, the principle is "be a good friend of your browser", no matter how cleverly it fixes your mistakes. But if you wake up in a dark dungeon with hungry lions around and your only way out is using two <head> tags - well, don't hesitate! It's not broken syntax, it's not a serious violation of HTML5 rules - it's no more than a convenient cheat. And don't fall for the widespread myth that non-standard, non-tidy sites prosper a lot worse: people usually just don't know for sure and want to stay on the safe side. Typically they are the ones who describe hell as a place where validator-failing web authors go.

TLDR: In practice, two head tags work.

Now please have only one if possible.


ADDITIONAL NOTES

As @StanislavBerkov pointed out, both W3C and MDN suggests that the HEAD tag is implied, meaning it's probably better to just leave the head tag entirely. I would not recommend this approach if you have the standard option of using only one of it, but having none is apparently better than having two. The documentation is not very clear around the topic so make sure you test everything in the major browsers - but again, in practice, you'll face no issues.

wizzwizz4
  • 6,140
  • 2
  • 26
  • 62
dkellner
  • 8,726
  • 2
  • 49
  • 47
  • 10
    Probably the most well-written answer I've read on SO. Informative and entertaining yet still succinct. – Félix Paradis Mar 26 '18 at 21:58
  • 2
    best answer for sure – AhammadaliPK Jul 17 '18 at 04:53
  • 1
    worth adding a comment: according to https://www.w3.org/TR/html401/struct/global.html for head `Start tag: optional, End tag: optional`. Also according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head `The start tag may be omitted if the first thing inside the element is an element.`. So we can consider `head` as implied element. Just don't use `head` tag and place content right info `html` tag. @dkellner please update your post) – Stanislav Berkov Sep 02 '19 at 06:58
  • @StanislavBerkov Interesting addition! Also, the docs seem a bit unclear - "head can be omitted if the first thing in the head is an element", okay but how do you know which one is the first within the element when it doesn't have a start tag? Does it include the newline after the html tag, indentation spaces, etc. Maybe it's just poor wording by MDN. Also, "end tag can be omitted if the first thing following the head element is not a space or a comment", same problem. Maybe I'm not getting it. But an update seems necessary anyway! – dkellner Sep 02 '19 at 09:41
  • As an example of that usage in action, you can checkout https://learnxinyminutes.com/docs/html/ – Onat Korucu Oct 30 '19 at 08:49
18

It's not valid according to the standard

Relevant part:

4.2.1 The head element

Categories: None.

Contexts in which this element can be used: As the first element in an html element.

Your second <head> element wouldn't be the first element in the html document.

mvillar
  • 472
  • 3
  • 14
  • 3
    Technically, you are citing a document that says: “This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.” But the principle is the same in all HTML specifications and drafts: exactly one `head` element is allowed per document. – Jukka K. Korpela Jun 11 '14 at 12:09
  • 1
    Of course, because the HTML5 specification is still in an RC state, but the poster asked for HTML5, as noted by the tag chosen. – mvillar Jun 11 '14 at 12:11
  • 1
    So it is not a standard, still less “the standard”. – Jukka K. Korpela Jun 11 '14 at 12:14
  • As an example of that usage in action, you can checkout https://learnxinyminutes.com/docs/html/ – Onat Korucu Oct 30 '19 at 08:49
2

Good response @Gwenc37. You can have any tags in any other tags, but it is always best to keep to the W3C standards and specifications. Later on in the project you might get to a point where your HTML does not parse correctly in a browser or even worse breaks.

To be safe, rather keep to the W3C standards. This way you cannot go wrong. Hope this helps.

heinkasner
  • 425
  • 5
  • 18
2

Here is an idea you could try

In your main head do this

<!DOCTYPE html> 
<html>
<head>
   <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/favicon.ico" type="image/x-icon" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <script src="js/jquery.js"></script>
   <link rel=stylesheet type="text/css" href="dashboard.css" >

Notice I have left off the end head tag. Then in all your files you have to either close the head tag, or add extra header stuff and then close your head tag eg

      <title>Main page</title>
      <script src="main.js"></script>
   </head>
   <body>
      <jsp:include page="Header.jsp" flush="true" />
      .....
      other HTML contents specific to main page
      .....
   </body>
</html>

As for your page title you can run a little php to determine what page you are on

Thomas Williams
  • 1,528
  • 1
  • 18
  • 37
1

As per W3C standards, No! you can not have it.

In your case, you are using JSP as a server side scripting. The problem can be solved by using CONSTANTS for stylesheet/scripts/other html elements.

You just need to add condition in your "main.jsp" file as per the page requirement.

Sagar Awasthi
  • 538
  • 5
  • 10
0

As per W3C standards, you can not have two HEAD tags.

Concerning your issue, you can call header.jsp file without HEAD tag or may be you can rename to scripts.jsp or constants.jsp

For example:

Header.jsp

<link rel="shortcut icon" href="<%=request.getContextPath()%>/images/favicon.ico" type="image/x-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/jquery.js"></script>
<link rel=stylesheet type="text/css" href="dashboard.css" >

Main.jsp

<!DOCTYPE html>
<html>
<head> 
<title>Main page</title>
<script src="main.js"></script>
<jsp:include page="Header.jsp" flush="true" />
</head>
<body> 
..... 
other HTML contents specific to main page
..... 
</body>
</html>
Sagar Awasthi
  • 538
  • 5
  • 10
0

actuality.. yes

you can add Tow tag in HTML like this example :

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>
</head>

<head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
  </head>