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

Question

我想渲染一个包含标签及其相关值列表的配置文件用户容器.

这是我想要显示的信息和布局的摘录:

名字 ....... MyName

年龄 ................... MyAge

电子邮件 ................ MyEmail

我知道有很多可用的例子,但问题是似乎没有普遍接受的解决方案.

到目前为止,我已经看到以下用法:

什么是最语义正确的？什么是最容易显示(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>foo@bar.com</dd>
</dl>

然而,很明显,最简单的方法在表中显示它正在使用<table>,<th>和<td>.您可以使用以下内容使用定义列表将表格布局组合在一起:

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

有关<dl>标签的更多信息,请点击此处.

<dl>已在最新[html5规范](http://www.w3.org/TR/2011/WD-html-markup-20110405/dl.html#dl)中更名为描述列表.似乎澄清名称/值对是合适的. (5认同)
我想这取决于您对“定义”的定义。例如，在我的上下文中，我的名字定义为“ Dominic”。您是否认为对“ define [d]”一词的有效使用在一定程度上是主观的。 (2认同)
根据规范（http://www.w3.org/TR/html4/struct/lists.html#h-10.3)，DL不仅可以用于“定义”。列表类型旨在用作键-值对（或多个值）列表类型的列表。 (2认同)

Answer 2

哇.我们真的害怕所有人都对"桌面布局是邪恶的!使用CSS!"东西,不是吗？

一个表 - 包含<th>标签和<td>值 - 完全适用于这种内容,为您提供所需的渲染,并且至少在定义列表中具有语义正确性,可以说更多.两者都优于无语义的div.

可以说,这不是一个数据表,而是一个标签和值列表.如果有更多的价值,那肯定是一张桌子 (3认同)
@fabien.我想你错过了我的观点.我想说一个标签有多个值,那么你应该使用一个表.在这种情况下,标签/值是一对一的关系,那么实际上dl更合适.即使列表长达100个项目. (3认同)
我会尽力消除混乱。如果还有更多值...例如名字..... MyName，AnotherName等（例如数据行），则它是一个数据表。上面的代码显然只是标签/值的列表。 (2认同)