使用什么 html 标记来显示标签/值数据？

Question

我想渲染一个配置文件用户容器，其中包含标签列表及其关联值。

以下是我想显示的信息和布局的摘录：

名字.......我的名字

年龄............我的年龄

电子邮件........我的电子邮件

我知道有大量可用的示例，但问题是似乎没有普遍接受的解决方案。

到目前为止我已经看到了以下用法：

1. 带有标记的表格（以及 < tr >、< td >...）
2. 带有 < ul > 标记的无序列表（以及 < li >、< div >...）
3. 常规标记为 < h1 >,< h2 >...< p >
4. 含 < DL >、< DT > 和 < DD >
的定义列表
5. < label >...?

什么是语义上最正确的？什么是最容易显示的（在 2 列布局中）？您建议我使用什么以及出于什么原因？

（非常欢迎 html/css 代码片段）

Answer 1

我认为语义上最正确的是

<dl>

、

<dt>

和

<dd>

，因为您显示的内容实际上是名字、年龄和电子邮件的定义。

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>[email protected]</dd>
</dl>

但是，显然，在表格中显示它的最简单方法是使用

<table>

、

<th>

和

<td>

。您可以使用定义列表来组合表格布局，如下所示：

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>[email protected]</dd>
</dl>

有关

<dl>

标签的更多信息请参见此处。

Answer 2

哇。我们真的用“表格布局是邪恶的！”吓跑了所有人。使用CSS！”东西，不是吗？

表格 — 带有

<th>

的标签和

<td>

的值 — 完全适用于此类内容，为您提供所需的渲染，并且至少在语义上与定义列表一样正确，甚至可以说更正确。两者都比无语义的 div 更可取。

Answer 3

我知道这个问题已经得到解答，但我认为定义列表是完全合适的。
我确实同意bobince，即表格始终适合列表数据......
然而，我在许多我喜欢避免使用表格的地方使用了这个方法 - 而且我不认为这是一个不正确的方法。

定义列表：

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dl dd {
  margin-left: 215px;
}

<dl>
  <dt>Label</dt>
  <dd>Value</dd>
  
  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

Answer 4

这是一个很好的问题，也是一个有很多争论的问题，因为没有固定的方法来做到这一点。

其中许多观点都有争议，但就我个人而言，我会保持简单。

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

或

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSS 看起来像这样；

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

不在 CSS 中引用任何特定 html 节点名称的原因是，如果将来有一种公认的方法可以做到这一点，您只需更改 HTML 中的节点名称即可。