Page 2 of 5 The traditional way to build a teaser thumbnail list is with a table of two columns. This creates the grid shape that typifies this sort of list, but it's not the ideal markup from a semantic point of view. It can result in bloated markup and a rigid design that doesn't accept variable amounts of content well or can't be restyled easily. Better options include:
I think a definition list is the best choice for most teaser thumbnail lists, so it will be used for this tutorial. If you prefer another markup method, the other options listed above are acceptable as well, so feel free to switch pieces of the markup as you see fit.
Did you know that definition lists aren't just for providing lists of terms and definitions? For more information on definition lists, see Semantic (X)HTML Markup: Structuring Lists and the HTML 4.01 specification.
Using a definition list, we end up with markup like this:
<dl>
<dt>CSS</dt>
<dd><img src="icon_css.gif" alt="" width="50" height="50" /></dd>
<dd>Articles and tutorials on visually formatting your pages using cascading style sheets.</dd>
<dt>HTML</dt>
<dd><img src="icon_html.gif" alt="" width="50" height="50" /></dd>
<dd>Articles and tutorials on marking up your page content correctly and effectively.</dd>
<dt>Accessibility</dt>
<dd><img src="icon_accessibility.gif" alt="" width="50" height="50" /></dd>
<dd>Articles and tutorials on creating pages that can be used by a variety of people on all sorts of devices.</dd>
</dl>
This markup makes a lot of sense: each category name is a term (dt element), which is defined visually by an icon and verbally by a description, both set as definitions (dd elements). Even without CSS applied, the markup produces a layout that makes it clear which category name goes with which icon and description.
Image 5: The definition list without any CSS applied, only default browser styles.
Page 2 of 5 Previous
1
2
3
4
5
Next
Keywords
CSS, cascading style sheets, stylesheets, styles, styling, XHTML, HTML, definition lists, floats, floating, thumbnails, two columns
