Home/ Questions/Q 7051791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:18:21+00:00

Theres a section in a site that I’m building that has some informations separated

  • 0

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:
image taken from site's psd

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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”:

    • 0