If you’re getting started with semantic HTML coding, you’ve probably thought about using an unordered list (ul) for a list of navigation elements. Consider, for example, the navigation items on the left side of this page — they were created with just such a list (well, several consecutive list, in any case). And, it makes sense to code them that way since a group of links is fundamentally a list of related elements (which is the semantic definition of an unordered list).

There’s not much to it — or, there shouldn’t be. (more…)

Image Replacement is becoming a more common technique in CSS development. Essentially, it allows image-based headers to appear normally in the HTML, just like a text-based header. So, instead of something like this:


<img src="images/pageheader.png" width="100" height="25" alt="Page header" />


… you can now have something like this:


<h1 id="pageheader">Page header</h1>


The original idea was developed by Tood Fahrner and it came to be known as the Fahrner Image Replacement technique (FIR). He used display:none alongside a CSS-based background to hide the HTML text while displaying the appropriate image. (more…)