我可以使用定义列表来显示诸如距离和上升之类的艰苦跋涉信息吗？

Question

我根据步行距离，上升等显示一系列信息。我可以做我一直做的事情并使用div，但我想知道是否有更多的语义方式标记此信息。它与dl更相关吗？

我想试试

以下是设计中的数据：

以下是我的标记目前的工作方式：

<div class="contain mission-data--wrap">
    <div class="mission__line"></div>
    <div class="mission__data--distance">
        <p>Distance <span>17km/10.5 miles</span></p>
    </div>
    <div class="mission__data--time">
        <p>Time <span>7 - 9 Hours</span></p>
    </div>
    <div class="mission__date--accent">
        <p>Ascent <span>1352M</span></p>
    </div>
    <div class="mission__data--gridref">
        <p>Grid Ref <span>NN123731</span></p>
    </div>
</div>

这是否有效：

<dl class="contain mission-data--wrap">
    <dt class="mission__data--distance">Distance</dt>
    <dd>17km/10.5 miles</dd>

    <dt class="mission__data--time">Time</dt>
    <dd>7 - 9 Hours</dd>

    <dt class="mission__date--accent">Ascent</dt>
    <dd>1352M</dd>

    <dt class="mission__data--gridref">Grid Ref</dt>
    <dd>NN123731</dd>
</dl>

Answer 1

根据HTML5建议，使用<dl>来表示键值对是完全合法的。

来自W3C的引文：

  

dl 元素表示描述列表，其由零个或多个术语描述（名称 - 值）分组组成;每个分组将一个或多个术语/ 名称（dt元素的内容）与一个或多个描述/ 值（dd元素的内容）相关联。

来自MDN的引文：

  

描述列表对于将元数据显示为键值对列表非常有用。

<dl>
   <dt>Name</dt>    
   <dd>Godzilla</dd>
   <dt>Born</dt>
   <dd>1952</dd>
   <dt>Birthplace</dt>
   <dd>Japan</dd>
   <dt>Color</dt>
   <dd>Green</dd>
</dl>

IMO，dl更适合键组对（如您的情况），而不是嵌套div s / span。