How to use HTML tags inside JSF pages

Question

I am creating a Menu using dataTable and outputLink in a JSF page.
<div class="bodyarea">
<div id="location">
<ol>
<h:dataTable value="#{menuItem.breadCrumb}" var="bread" >
<h:column>
<li>
<h:outputLink id="crumbID" value="#{bread.menuLink}">
<h:outputText id="crumpName" value="#{bread.menuLabel}" style="width: 165px;"/>
</h:outputLink>
<li>
</h:column>
</h:dataTable>
</ol>
</div>
</div>
I want to use <li> HTML tag as shown in code above before and after every <tr> tag formed, but when i run it and see view source, this is how it shows:
NOTE: you can see it has thrown out of <table> tag itself.
<div class="bodyarea">
<div id="location">
<ol>
<li>
</li>
<table>
<tbody>
<tr>
<td><a id="_id0:0:crumbID" href="/eApps/admin/loginPage.jsp?MenuItem=-1"><span id="_id0:0:crumpName" style="width: 165px;">Home</span></a></td>
</tr>
<tr>
<td><a id="_id0:1:crumbID" href="/eApps/admin/loginPage.jsp?MenuItem=3~-1"><span id="_id0:1:crumpName" style="width: 165px;">HIM Admin</span></a></td>
</tr>
</tbody>
</table>
</ol>
</div>
</div>
Can some one help me, how do i use HTML tags inside <h:dataTable>.
Or is their any other way i should form my Menus, to fully utilize to HTML tags.
Thanks
Ravi

Answer 1

Hello,
You can embed the verbatim elements in your datatable, ie,
<h:dataTable value="#{menuItem.breadCrumb}" var="bread" >
  <h:column>
    <f:verbatim><li></f:verbatim>
    <h:outputLink id="crumbID" value="#{bread.menuLink}">
      <h:outputText id="crumpName" value="#{bread.menuLabel}" style="width: 165px;"/>
    </h:outputLink>
    <f:verbatim></li></f:verbatim>
  </h:column>
</h:dataTable>