Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts

    Semantic Markup for a Product Grid

    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.

    Code:
    <ul>
    	<li>Product 1</li>
    	<li>Product 2</li>
    	<li>Product 3</li>
    	<li>Product 4</li>
    	<li>Product 5</li>
    	<li>Product 6</li>
    </ul>
    Sometimes I'll use the below on some tricky designs the designers come up with.

    Code:
    <div class="row">
    	<div>Product 1</div>
    	<div>Product 2</div>
    	<div>Product 3</div>
    </div>
    <div class="row">
    	<div>Product 4</div>
    	<div>Product 5</div>
    	<div>Product 6</div>
    </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.

    Code:
    <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>
    	<p>Description</p>
    	<div>Promos</div>
    	<div>More Colors</div><!-- just a label more or less to say the product has more colors -->
    	<ul>
    		<li>$19.99</li>
    		<li>$9.99</li>
    	</ul>
    	<div><a href="similar.html">More like this</a></div>
    </div>
    Suggestions? Opinions? Thoughts?
    Last edited by sobrien79; 03-04-2009 at 07:27 PM. Reason: corrected grammar

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    If your data is tabular (which seems to be implied by the word "grid"), then using an HTML table is perfectly appropriate from a semantic standpoint:

    Code:
    <table>
    	<tr>
    		<td>Product 1</td>
    		<td>Product 2</td>
    		<td>Product 3</td>
    	</tr>
    	<tr>
    		<td>Product 4</td>
    		<td>Product 5</td>
    		<td>Product 6</td>
    	</tr>
    </table>
    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>, <th> and the like, to make your markup even more meaningful (alliteration win! ).

    Hope that helps!
    Last edited by BoldUlysses; 03-04-2009 at 06:00 PM.
    matt | design | blog

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    It's not tablular data. It's a list of products in a grid layout.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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.:

    Code:
    <!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">
    <head>
    	<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;
    			width:800px;
    			border:1px solid #f00;
    			overflow:auto;
    			list-style-type:none;
    		}
    		
    		#wrap li {
    			float:left;
    		}
    		
    		#wrap div {
    			width:200px;
    			height:100px;
    			line-height:100px;
    			text-align:center;
    			background-color:#00f;
    			color:#fff;
    		}
    		
    	</style>
    
    </head>
    
    <body>
        <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>
        </ul>
    </body>
    </html>
    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 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 and which are block level--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.
    matt | design | blog

  • #5
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    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.

    Code:
    <dl>
        <dt><h3>Product Title</h3></dt>
        <dd>Description</dd>
        <dd>List of prices</dd>
        <dd>More colors</dd>
        <dd>Promos</dd>
        <dd>Anything else</dd>
    </dl>
    Last edited by sobrien79; 03-04-2009 at 09:00 PM. Reason: corrected some wording

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    http://css-tricks.com/utilizing-the-...finition-list/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •