Question

您将使用哪些HTML标记来获取此类信息：

<小时/> 姓名：约翰年龄：40
城市：法兰克福国家：德国
状态：有效

我喜欢在<label>标记中使用p标记，这听起来像是很好的语义。但是，此信息不在表单内。 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属性可以链接到映射工具。

这只是一个标准，它并不意味着在语义上是正确的。据我所知，您可以在这些hCards中使用您喜欢的任何标记（HTML标记）。有关详细信息，请参阅链接。

Answer 4

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

另一方面，

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

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

...

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

总而言之，我会推荐使用<dl>元素的建议，即使它的默认样式与OP的例子不同。

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

＆＃13;

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

＆＃13;

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

＆＃13;

或SASS版本：

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

Answer 5

我会争辩使用<dfn>标签。

它简短，语义清晰，易于设计。

＆lt; dfn＆gt; element标记定义的术语;定义该术语应由周围的＆lt; p＆gt;给出，＆lt;节＆GT;或定义列表组（通常是＆lt; dt＆gt;，＆LT峰; dd＆GT;对）。

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

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

5 个答案: