Html 我是否可以使用定义列表来显示跋涉信息，如距离和上升？

我有一系列基于步行距离、上升等的信息要显示。我可以做我一直做的事情，并使用

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>

距离17公里/10.5英里

时间7-9小时

上升1352M

网格参考号NN123731

这是否有效：

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

距离
17公里/10.5英里
时间
7-9小时
上升
1352M
网格参考
NN123731

根据HTML5的建议，使用

s表示键值对是完全合法的

引用自：

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

引用自：

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

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

名称
哥斯拉
天生的
1952
出生地
日本
颜色
绿色

---

依我看，

dl

比嵌套的

div

s/

span

s更适合于键值对组（如您的情况）

就布局而言，您认为将这4个拆分为单独的

dl

？只有考虑到这一点，因为我的生活，当谈到造型！如果所有元数据（所有键值对）都引用同一个实体（在您的案例中是同一个过程），并且键之间存在某种关联，那么从语义上讲，将它们划分为不同的

dl

s是不好的。但是您可以在

dt

s和

dd

s中使用

span

，以及

dt

s/

dd

s上的

class

属性进行样式设置。