View Full Version : Semantic Markup for a Product Grid

Mar 4th, 2009, 05:50 PM
So I'm looking for some opinions on what semantic markup should be used for a product grid on a webstore.

When laying out the grid I try to use a list whenever possible and use classes to clear floats and what not.

<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
<li>Product 6</li>

Sometimes I'll use the below on some tricky designs the designers come up with.

<div class="row">
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div class="row">
<div>Product 4</div>
<div>Product 5</div>
<div>Product 6</div>

But the bigger thing I am looking for is marking up an individual product.

What I traditionally use and not particularly fond of as it just doesn't seem correct as there tend to be too many divs.

And note that I would have classes to mark the pieces to target with css but I didn't include them for purposes of this post.

<div><img alt="Product Title" src="path/to/thumbnail.jgp" /></div>
<div><!-- div to acheieve floating of product information without wrapping around the image -->
<h3>Product Title</h3>
<div>More Colors</div><!-- just a label more or less to say the product has more colors -->
<div><a href="similar.html">More like this</a></div>

Suggestions? Opinions? Thoughts?

Mar 4th, 2009, 05:57 PM
If your data is tabular (which seems to be implied by the word "grid"), then using an HTML table (http://www.w3schools.com/tags/tag_table.asp) is perfectly appropriate (http://phrogz.net/css/HowToDevelopWithCSS.html#tables) from a semantic standpoint:

<td>Product 1</td>
<td>Product 2</td>
<td>Product 3</td>
<td>Product 4</td>
<td>Product 5</td>
<td>Product 6</td>

If you can't decide whether or not a table is the right choice, ask yourself these questions:

“Do the rows or columns of information share a common attribute?”
“If I changed the order of the rows or columns, would it still make sense?”
“If I transposed the axes of the table (made rows into columns and vice-versa) would it still make sense?”

Also, remember to use the additional HTML tags having to do with tables, <colgroup> (http://www.w3schools.com/tags/tag_colgroup.asp), <th> (http://www.w3schools.com/tags/tag_th.asp) and the like, to make your markup even more meaningful (alliteration win! :D).

Hope that helps!

Mar 4th, 2009, 07:25 PM
It's not tablular data. It's a list of products in a grid layout.

Mar 4th, 2009, 08:12 PM
If it's not tabular data I'd say your semantics are on the right track. If there's any doubt, disable the CSS and see if it makes sense as an unstyled document. If it does, then you're probably okay. I say probably because a <p> and a <div> will appear identical to the "naked eye," but one may be more semantically-appropriate than another.

As far as treating some of the divitis in your product grid, you don't really need to add divs for the rows--just float the list items that contain the products left so they wrap to the next line in the container, e.g.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

* {
margin: 0;
padding: 0;

#wrap {
margin:0 auto;
border:1px solid #f00;

#wrap li {

#wrap div {



<ul id="wrap">
<li><div>Product 1</div></li>
<li><div>Product 2</div></li>
<li><div>Product 3</div></li>
<li><div>Product 4</div></li>
<li><div>Product 5</div></li>
<li><div>Product 6</div></li>
<li><div>Product 7</div></li>
<li><div>Product 8</div></li>

Don't need to define two rows in the markup--the CSS takes care of that by itself.

Also note how we can take advantage of the cascading quality of CSS to eliminate a lot of the id and class clutter from the markup.

Other than that... Read up on all the tags available (http://www.w3schools.com/tags/default.asp) and what they're actually describe them and use them as necessary. As far as how they'll interact with the CSS, familiarize yourself with which elements are inline (http://www.highdots.com/css-editor/html_tutorial/inline.html) and which are block level (http://www.highdots.com/css-editor/html_tutorial/block.html)--it will help you decide if you really need that containing div around an element which is already block-level and can be used accordingly.

Mar 4th, 2009, 09:00 PM
That's exactly what I'm after. Which is more semantically appropriate? I knew most of the other stuff, but should a p tag be used over a div? P is for paragraphs but a div seems more of a container than a specific tag for a specific piece of content. And span is an inline element so I don't think that's appropriate in certain cases either. So I toyed with the below code in my head (and meant to put it in the inital post but forgot) and wanted to get other people's thoughts.

<dt><h3>Product Title</h3></dt>
<dd>List of prices</dd>
<dd>More colors</dd>
<dd>Anything else</dd>

May 14th, 2010, 12:06 AM
I agree with using an unordered list, but, I also think a definition list connects the information more accurately. Unfortunetaly, the definition term "does not allow block level elements"..so no valuable header tags here..

Instead of regurgitating semantics/SEO involved, please take a look at the following which would explain the pros/cons