Thursday, October 6, 2011

Facelets with HTML5

After reading this post on StackOverflow I have decided to use HTML5 DOCTYPE in JSF. Why to write long DOCTYPE with DTD, (X)HTML, Transitional, etc. like this one
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      ... >
      
</html>
if we can write much simpler <!DOCTYPE html>?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      ... >
      
</html>
Using HTML5 DOCTYPE doesn't have side effects with Facelets parser and works fine in all browsers expect of IE6 which will render pages in quirks mode. IE6 usage is decreasing last years and it's not supported by many JSF libraries (like PrimeFaces) anymore. So, it doesn't hurt. If you are using HTML5 specific elements (e.g. file upload in PrimeFaces) and the browser doesn't support them, fallbacks will be applied. HTML5 specific elements will be gracefully degraded to HTML4.

One small issue I had during my changes of DOCTYPE was the entity &nbsp; which I sometimes use for non-breaking space. The Facelets parser says
 
The entity "nbsp" was referenced, but not declared.
 
The solution is to replace &nbsp; by the character reference &#160; Also other entities like &copy; should be replaced by character references. Apart from that JSF components which I use in my web apps are okey so far.

Summary: Using of <!DOCTYPE html> in Facelets is highly recommended. It's simple and future-proof.

1 comment:

  1. Hi,

    Just one glitch here, you are still using the xhtml namespace in your html-tag. Does it render as html5 then? Don't think so. Also, did you name your files *.html og *.xhtml?

    Did you change the default suffix in web.xml to HTML instead of XHTML?

    ReplyDelete

Note: Only a member of this blog may post a comment.