The Perfect Portlet Markup

I thought I’d throw together a quick precursor to another post I plan on finishing in the next few days. This post is about portlets - or, how to structure the HTML markup for a JSR168/JSR286 portlet, to be more specific.

I’ve worked on theming portal user interfaces for a few years now, primarily on IBM WebSphere Portal and JBoss Portal. On WebSphere, you develop what’s called a ’skin’ - where the markup for a given portlet lives. JBoss has a similar but more granular concept called ‘renderers’. Being a big fan of the principle of semantic markup or POSH, I’ve come to think that all portlets should have the same general shell or HTML markup.

So, I present the perfect portlet markup:

<div class="portlet-window">
	<div class="decoration">
		<h2 class="title">portlet title</h2>
		<ul class="controls">
			<li class="skip"><a href="#skip_$PORTLET_ID">skip this window</a></li>
			<li class="mode edit"><a href="#">edit this window</a></li>
			<li class="mode view"><a href="#">view this window</a></li>
			<li class="windowstate minimized"><a href="#">minimize this window</a></li>
			<li class="windowstate maximized"><a href="#">maximize this window</a></li>
		</ul>
	</div>
	<div class="portlet-content">
		portlet content
	</div>
</div>
<a name="skip_$PORTLET_ID"></a>

You might notice this layout:

• follows the JSR168/JSR286 naming standards for window, decoration, controls, etc.
• marks the portlet title up as a level 2 heading; from my experience this is the ‘right’ choice for the portlet title as the portal page title itself should be the level 1 heading
• to promote accessibility, renders actual text content in the mode/state menu anchor links (which should be internationalized and can be replaced with appropriate icon images using your css image replacement technique of choice, of course)
• to promote accessibility, adds a skip link to the mode/state menu for skipping the content of a given portlet (this is very useful for screen readers and can be removed from the page using your css text hiding method of choice)

Note that one or more the elements in the shell may be removed. For example, sometimes portlets won’t display their portlet title, which is often the case with content-manged portlets (ideally, this would be a configuration rather than separate skin or renderer).

By the way, this post is intended to be a bit controversial; hoping to challenge my audience (if there is one =P) and maybe to come to some kind of consensus.

So what do you think? Did I get it right? What would you change or improve to this portlet markup?