标记中分隔的键/值对.有更好的SEO的其他方式吗？

Question

我正在建立的网站中有一些部分,其中有一些信息分为两列.左栏有"键"(不知道怎么称呼它,对不起),右栏有值,如下所示:

浮动内部div并使用其他一些样式,我可以使用以下内容实现完全结果:

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

但由于每个键都与其值完全分离,因此标记似乎根本不是搜索引擎友好的.还有其他方法可以做到这一点,保持居中的风格并使标记更具语义性吗？

谢谢你的帮助,
丹尼尔.

Answer 1

你当然可以使用表来获取这些数据,这可能是合适的.您可能使用的另一个选项是描述列表:

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

添加一些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
}

你有它.http://jsfiddle.net/FuaNk/

我无法评论这是否有助于搜索引擎优化,但价值与键相邻,这似乎符合您的要求.

更多信息<dl>,以前称为"定义列表":

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