HTML：表单外“标签”的最佳标签

Question

对于此类信息，您会使用哪些 HTML 标记：

---

姓名：约翰
年龄：40岁
城市：法兰克福
国家/地区：德国状态：有效

---

我喜欢在这里使用p 标签中的<label> 标签，这听起来像是很好的语义。但是，此信息不在表单内。 W3C 说：

label: The label element represents a caption for a form control.

那我应该用什么？我可以清楚地使用<strong>，但这没有“强烈的重要性”并且感觉不正确。

更新

在注意到 DEFINITION LIST 建议后，我想问一下，如果我在同一页面上有几条此类信息，这是否仍然是最好的？这意味着我多次用不同的“定义”定义“名称”。例如：

---

姓名：约翰
年龄：40岁
城市：法兰克福
国家/地区：德国状态：有效

---

姓名：玛丽亚
年龄：30
城市：波恩
国家 ：德国
状态：不活动

---

<dl> 仍然是最好的选择吗？

Answer 1

definition list 可能适合这里：

<dl>
    <dt>Name</dt>
    <dd>John</dd>
    <dt>Age</dt>
    <dd>40</dd>
    <dt>City</dt>
    <dd>Frankfurt</dd>
    <dt>Country</dt>
    <dd>Germany</dd>
    <dt>Status</dt>
    <dd>Active</dd>
</dl>

http://www.w3.org/TR/html401/struct/lists.html#h-10.3 - 使用 DL 元素创建的定义列表通常由一系列术语/定义对组成（尽管定义列表可能有其他应用）。

但是，仅仅因为您想要粗体格式并不意味着您仅限于<strong> 或<b>。您可以使用非语义 <span> 并简单地使用 CSS 应用格式。

此外，您可以使用 CSS 来添加冒号，而不是将它们放在您的标记中：

dt:after { content:":"; }

也许是为了帮助澄清一些关于它的正确用法的困惑，看起来 HTML5 会将这个标签称为 描述列表。

http://www.w3.org/TR/html5/grouping-content.html#the-dl-element - dl 元素表示由零个或多个名称-值组（描述列表）组成的关联列表。

Answer 2

这是 DL 结构的正确位置：

<dl>
   <dt>Name</dt>
   <dd>John</dd>

   <dt>Age</dt>
   <dd>40</dd>

   <dt>City</dt>
   <dd>Frankfurt</dd>

   <dt>Country</dt>
   <dd>Germany</dd>

   <dt>Status</dt>
   <dd>Active</dd>
</dl>

请注意，您需要添加样式以使其看起来像这样，但这是正确的逻辑结构。

Answer 3

也许您可以使用定义列表（dl、dt、dd），但这听起来也不正确。

正如 W3C 所说，它代表表单控件的标题，标签旁边的文本不是控件，因此for 属性变得毫无意义。

我会选择strong，也因为它是没有 CSS 的最佳表示。

---

编辑：

由于这是关于人的，您还可以使用与 HTML 等效的 vCard：hCard。示例：

<div class="vcard">
    <div class="fn">
        <strong class="type">Name</strong>:
        <span class="value">John</span>
    </div>
    <div class="note">
        <strong class="type">Age</strong>:
        <span class="value">40</span>
    </div>
    <div class="adr">
        <div class="locality">
            <strong class="type">City</strong>:
            <span class="value">Frankfurt</span>
        </div>
        <div class="country-name">
            <strong class="type">Country</strong>:
            <span class="value">Germany</span>
        </div>
    </div>
    <div class="note">
        <strong class="type">Status</strong>:
        <span class="value">Active</span>
    </div>
</div>

然后您可以在<ul> 或<ol> 中使用尽可能多的这些。一些浏览器会识别这些属性并将它们转换为应用程序使用的链接。例如，adr 属性可以链接到映射工具。

这只是一个标准，并不意味着在语义上是正确的。据我所知，您可以在这些 hCard 中使用您喜欢的任何标记（HTML 标签）。详情见链接。

Answer 4

我同意其他答案，即<dl> 列表是这里最语义化的选项。过去我不确定这是否是正确使用<dl>，因为我看到的<dl> 元素的所有官方描述都将其描述为“定义列表”，用于实际定义术语表中的术语（在@Cristian 的回答中查看我的 cmets）。但是，在查看了 HTML 5 规范的latest editor's draft 之后，我注意到它已被重命名为“描述列表”而不是“定义列表”，并且给出的示例实际上与此处问题中的示例非常相似。

另一方面，<dfn> 似乎仅用于实际定义术语。以下是上述链接中的一些相关引述：

dt 元素本身，当用于 dl 元素时，并不表示 它的内容是一个正在定义的术语，但这可以表明 使用 dfn 元素。

...

dfn 元素表示术语的定义实例。作为 dfn 元素最近祖先的段落、描述列表组或部分还必须包含 dfn 元素给出的术语的定义。

因此，总而言之，我会支持使用 <dl> 元素的建议，即使它的默认样式与 OP 的示例不同。

下面是示例样式中 <dl> 的可重用 CSS 类：

.dl-inline dt, .dl-inline dd {display:inline; margin:0;}
.dl-inline dt:after {content:': '}
.dl-inline dd + dt:before {content:''; display:block;}

<dl class="dl-inline">
	<dt>Name</dt>
	<dd>John</dd>
	<dt>Age</dt>
	<dd>40</dd>
	<!-- ... -->
</dl>

或 SASS 版本：

.dl-inline {
    dt,dd {display:inline; margin:0;}
    dt:after {content:': '}
    dd + dt:before {content:''; display:block;}
}

Answer 5

我会主张使用<dfn> 标签。

它简短、语义化且易于设置样式。

元素标记正在定义的术语；定义 该术语的应由周围的

给出，

或定义列表组（通常是一个

，

对）。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn