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

你会用什么HTML标签来获取这种信息:


名字 :约翰
年龄 :40岁
城市 :法兰克福
国家 :德国
状态 :有效


我喜欢在这里使用p标签中的<label>标签,这听起来像很好的语义。 但是,这些信息不在表格内。 W3C表示:

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

那我该用什么呢? 我可以明确地使用<strong> ,但是这没有“强烈的重要性”,并且不正确。

UPDATE

在注意到“定义列表”的build议之后,我想问一下,如果我在同一页面上有几条这样的信息,这样做还是最好的吗? 这将意味着我用几次不同的“定义”来定义“名称”。 例如:


名字 :约翰
年龄 :40岁
城市 :法兰克福
国家 :德国
状态 :有效


名字 :玛丽亚
年龄 :30岁
城市 :波恩
国家 :德国
状态 :无效


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

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

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

另外,你可以使用CSS来添加冒号,而不是把它们放在你的标记中:

 dt:after { content:":"; } 

也许为了帮助理清关于它的正确用法的一些混淆,看起来HTML5将会把这个标签作为一个描述列表

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

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

请注意,您需要添加样式才能看起来像这样,但是这是正确的逻辑结构。

也许你可以使用定义列表( dldtdd ),但是这听起来不正确。

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

我只想strong ,也是因为这是没有CSS的最好的代表。


编辑

由于这一点关于人,你也可以使用HTML: hCard的vCard等价物。 例:

 <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>使用其中的许多function。 有些浏览器会识别这些属性,并将它们转换为与应用程序一起使用的链接。 例如, adr属性可以链接到一个映射工具。

这只是一个标准,并不意味着语义上的正确。 据我所知,你可以在这些hCards中使用你喜欢的任何标记(HTML标签)。 请参阅链接的详细信息。

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

它简短,语义,可以很容易地风格。

<dfn>元素标记正在定义的术语; 该术语的定义应该由周围的<p>,<section>或定义列表组(通常是一个<dt>,<dd>对)给出。

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

我同意其他答案,一个<dl>列表是这里最有语义的选项。 在过去,我不确定这是否正确使用<dl>因为我所看到的<dl>元素的所有官方描述都将其描述为一个“定义列表”,用于在术语表中实际定义术语看到@ Cristian的回答我的意见)。 但是,在看了HTML 5规范的最新编辑草案之后,我注意到它已经被重新命名为“描述列表”而不是“定义列表”,给出的例子其实和这个问题中的例子非常相似。

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

dt元素本身在dl元素中使用时,并不表示其内容是一个定义的项,但是可以使用dfn元素来指示。

dfn元素表示一个术语的定义实例。 段落,描述列表组或者离dfn元素最近的祖先部分还必须包含由dfn元素给出的术语的定义。

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

下面是一个可重用的CSS类,其样式为<dl>

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