Question

I have seen examples of creating a Facelets page template where each defined “region” is wrapped in a div tag with a defined id. Is it a best practice to wrap these regions in a div tag with a defined id? What are some practical examples of why someone might benefit from wrapping in a div tag with a defined id like the example below?

    <div id="header">
    <ui:insert name="header" >
        <ui:include src="/template/common/commonHeader.xhtml" />
    </ui:insert>
    </div>

Answer 1

The practical benefit is more in the generated HTML. In this particular case, it’s just a semantic separation of the webpage’s “header”. You can then use pure CSS to style and position the entire header the way you want. You can then use pure JS to manipulate the entire header the way you want.

Note that in HTML5 such a <div id="header"> should be replaced by a <header> element. But we’re not at the stage yet wherein over ~95% of the used browsers support HTML5.

JSF/Facelets itself doesn’t care about this all. It’s after all “just” a HTML code generator.