What's the difference between <h:head> and <head> in Java Facelets?

R

2

10

When and why to use <h:head>, instead of <head>?

I've seen Primefaces won't work with <head>, though.

Rachellerachis answered 17/5, 2011 at 8:23 Comment(1)

For anybody reading this question, the accepted answer is 'wrong' in the part that <h:head> or <head> should not make a difference. The other answer has the explanation. – Aspect 11/8, 2016 at 13:33

M

14

The <head> tag is a HTML tag, which defines the head of the HTML page (this is where you define metadata, or include the resources such as JavaScript or CSS for example).
The <h:head> is a JSF tag (introduced with JSF 2.0) that handles the <head> part of your page. The interest of having such JSF tag is that this head becomes part of your JSF components tree, and thus, you can manipulate it in your Java code.

Regarding the <head> incompatibility with Primefaces, I don't see why it happens. Facelets introduced in JSF 1.x the ability to mix HTML code and JSF (XHTML) code, and you should not have any trouble to insert a HTML <head> tag in your page, even if you use Primefaces. Facelets is natively integrated with JSF 2.x.

Monro answered 18/5, 2011 at 10:19 Comment(2)

What is intended/allowed inside of <h:head>? I get a org.w3c.dom.DOMException: HIERARCHY_REQUEST_ERR: An attempt was made to insert a node where it is not permitted. if i add something like <h:outputStylesheet>, or even a simple html <link> element. – Diestock 19/7, 2011 at 22:6

There is a good reason PrimeFaces (amongst others) does not work well when an <head/> is used instead of an <h:head> See the other answer – Aspect 11/8, 2016 at 13:34

F

23

The <h:head> is a JSF component which provides a hook to programmatically include JavaScript and CSS resources in the generated HTML <head>. PrimeFaces uses it to include the necessary JS/CSS code for the Ajax works and fancy look'n'feel.

As a test, create a page with a <h:head> and a PrimeFaces component, open the page in the webbrowser and check the generated HTML source by rightclick - View Source. You'll see that several JSF and PrimeFaces specific JS/CSS files are been added. Now replace <h:head> by <head> and check the generated HTML source once again, you'll see nothing this time.

Forwardlooking answered 18/5, 2011 at 11:35 Comment(0)

M

14

The <head> tag is a HTML tag, which defines the head of the HTML page (this is where you define metadata, or include the resources such as JavaScript or CSS for example).
The <h:head> is a JSF tag (introduced with JSF 2.0) that handles the <head> part of your page. The interest of having such JSF tag is that this head becomes part of your JSF components tree, and thus, you can manipulate it in your Java code.

Regarding the <head> incompatibility with Primefaces, I don't see why it happens. Facelets introduced in JSF 1.x the ability to mix HTML code and JSF (XHTML) code, and you should not have any trouble to insert a HTML <head> tag in your page, even if you use Primefaces. Facelets is natively integrated with JSF 2.x.

Monro answered 18/5, 2011 at 10:19 Comment(2)

What is intended/allowed inside of <h:head>? I get a org.w3c.dom.DOMException: HIERARCHY_REQUEST_ERR: An attempt was made to insert a node where it is not permitted. if i add something like <h:outputStylesheet>, or even a simple html <link> element. – Diestock 19/7, 2011 at 22:6

There is a good reason PrimeFaces (amongst others) does not work well when an <head/> is used instead of an <h:head> See the other answer – Aspect 11/8, 2016 at 13:34

Recommended topics

Hot tags