Question

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

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

是否有一种更清晰，更有效的语义方式代表下面的代码？可以使用列表完成吗？任何代码示例都将受到赞赏。

部分分组相关内容

divider class 使用包装器

创建一行

文章用于每个部分

span_1_of_2 class 指定每列的％宽度

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

非常感谢。

Answer 1

我不是在讨论语义;但你可以使用定义列表，以及其他一些语义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>

编码干净的语义HTML5 li vs Div

1 个答案: