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

Solution 1:

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.

Solution 2:

  • 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.