Simon Willison’s Weblog

Tantek’s markup challenge

In A Touch of Class, Tantek continues his series of tips on writing better semantic markup and then issues a challenge: find related improvements that can be made to his blog. I couldn’t find anything in the overall structure, but I have a few (admittedly nit-picky) suggestions for his current entries. Firstly, the following line would, in my opinion, be better served with a titled <dfn> element:

New <strong title="shopping by surfing">shurfing</strong> tool.

Secondly, Tantek frequently uses a combination of a pre and a code tag to mark up sections of example code. This works fine, but could potentially be improved by adding a class element hinting at the type of code being displayed, for example:

<pre><code class="css">
p.sidebartext { 
  padding:0 5px 2px;
  font-size:11px; 
  margin-top:2px
}
</code></pre>

Finally, Tantek’s use of <a class="local"> to differentiate local and external links introduces (technically) redundant data—the fact that the link is to a local resource is implicit in its URL. This information can even be extracted using CSS3 selectors, as is demonstrated by Stuart’s ingenous article External link icons the CSS way.