编码干净的语义 HTML5 li vs Div答案

【问题标题】：Coding clean semantic HTML5 li vs Div编码干净的语义 HTML5 li vs Div
【发布时间】：2015-02-15 12:23:57
【问题描述】：

我正在创建一个网页来显示汽车零件的列表。

页面分为多个部分，每个部分包含两列（每个汽车部件一列）。

有没有一种更简洁更有效的方式来语义表示下面的代码？这可以使用列表来完成吗？任何代码示例将不胜感激。

部分对相关内容进行分组

分隔器类使用包装器创建一行

文章用于每个部分

span_1_of_2 类分配每列的百分比宽度

<section> <!-- GROUPS related content -->

  <div class="divider"> <!-- **creates a row** -->
  <article class="col span_1_of_2"> <!-- **span controls width** -->
    <h3>Brake discs</h3>
    <img src="styles/images/trek-speed.jpg" alt="Trek speed bike"/> 

    <ul class="info"> <!-- **product details** -->
      <li>Wheel Size 24</li>
      <li>Carbon</li>
    </ul>  
  </article>


   <article class="col span_1_of_2"> <!-- **PRODUCT 2** -->
    <h3>Alloy Wheels</h3>
    <img src="alloy.jpg> 

    <ul class="info"> <!-- **product info** -->
      <li>Wheel Size</li>
      <li>Carbon</li>
    </ul>  
  </article>

  </div> <!-- **end divider** -->
</section>

非常感谢。

【问题讨论】：

目前还不清楚您认为应该在哪里使用列表。
附加说明：添加 cmets 时，应使用语言的常规注释样式，因为这样不会破坏语法突出显示，并且更易于阅读 html 代码。

标签： html semantics

【解决方案1】：

我不太喜欢争论 samantics ;) 但您可以为此使用定义列表，以及其他一些语义 HTML5 元素，例如...

<dl class="col span_1_of_2">
    <dt>brake disks</dt>
    <dd><img src="" alt=""></dd>    
    <dd>Wheel Size 24</dd>  
    <dd>Carbon</dd>
</dl>

还需要指出的是，在定义列表中使用多个定义术语<dt> 和/或定义描述<dd>. 是完全可以接受的

<dl>
    <dt>term 1</dt>
    <dt>term 2</dt>
    <dd>definition 1</dd>   
    <dd>definition 2</dd>   
    <dd>definition 3</dd>
</dl>

【讨论】：

figure 元素不是dl 元素的有效子元素。此外，它是figcaption 而不是figurecaption。
@t.niese 是的。我编辑了答案。我这样做时认为定义标题不能包含块级元素，但定义描述可以。确实这样更好。