Key/Value pairs separated in the markup. Is there any other way for better SEO?

Question

Theres a section in a site that I'm building that has some informations separated into two columns. The left column has the "keys" (don't know how else to call it, sorry) and the right column has the values, as seen below:

Floating the inner divs and aplying some other styles, I can achieve that exact result using something like this:

<div id="container">
  <div>
    <ul>
      <li>Size</li>
      <li>etc...</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>10MB</li>
      <li>etc...</li>
    </ul>
  </div>
</div>

But since each key is completely separated from its value, the markup doesn't seem to be search engine friendly at all. Is there any other way of doing that, maintaining the centered style and having the markup be more semantic?

Thanks for the help,
Daniel.

Answer 1

You can certainly use tables for this data, it would probably be appropriate. Another option you might use is a description list:

<dl>
    <dt>Size</dt>
    <dd>2.63 MB</dd>
    <dt>Views</dt>
    <dd>34,412</dd>
    <dt>Downloads</dt>
    <dd>2,125</dd>
    <dt>Likes</dt>
    <dd>1.368</dd>
    <dt>Category</dt>
    <dd>Test</dd>
</dl>

Add some CSS...

dt, dd {
    font-family:sans-serif;
}
dt {
   float:left;
   clear:left;  
   text-align:right;
   width:50%;
   color:#bbb;
}
dd {
   float:left;
   margin-left:3em;
   color:#999
}

And there you have it. http://jsfiddle.net/FuaNk/

I can't comment on whether or not this helps SEO, but the values are adjacent to the keys, which seems to fit your requirements.

More info on <dl>, formerly known as the "definition list":

• http://html5doctor.com/the-dl-element/
• http://dev.w3.org/html5/markup/dl.html