HTML: 最适合在表单外使用的'label'标签是什么?

55

您要如何使用HTML标签来呈现以下信息:


姓名: 约翰
年龄: 40岁
城市: 法兰克福
国家: 德国
状态: 活跃


我建议在

标签中使用

label: label元素为表单控件提供标题。

那么应该使用什么标签呢?显然可以使用标签,但它没有“强调”的含义,也不太正确。

更新:

在注意到“定义列表”(definition list)建议后,如果我在同一页上有多段这样的信息,这仍然是最佳选择吗?这意味着我需要多次定义“名称”和不同的“定义”。例如:


名称:约翰
年龄:40岁
城市:法兰克福
国家:德国
状态:活跃


名称:玛丽亚
年龄:30岁
城市:波恩
国家:德国
状态:不活跃


那么

标签仍然是最好的选择吗?


5
绝对地说,深度学习是正确的方向。不要把“definition”理解得太严格,将其视为实例定义。即使是w3c规范也表示:“DL的另一个应用是用于标记对话,其中每个DT命名一个发言者,每个DD包含他或她的话语。”因此,他们对此非常宽松。 - John Green
1
<dl>仍然是适当的,它不仅限于用于字面上的定义。即使它严格用于定义(比如词典中的单词定义),也很正常看到同一项有多个定义。 - Wesley Murch
5
事实上,我相信HTML5现在称它为“描述列表”http://dev.w3.org/html5/markup/dl.html。 - Wesley Murch
3
现今(2017年),HTML5是一个被巩固的标准,并且我们采用了更多语义化,而非更少... 使用 <label> 标签进行标注 没有任何矛盾(!)... 所以,是的,你可以使用它。 请参考Mozilla指南/Element/label, "内容类别: 流内容, 短语内容, ...". 也可查看 https://dev59.com/GI7ea4cB1Zd3GeqPFsma#32408312 - Peter Krauss
值得注意的是,虽然<dl>标签在语义上是合适的,但如果您正在构建响应式网站,需要知道没有办法将<dt><dd>元素保持在一起(防止术语和定义之间的断开),除非在每对术语和定义周围使用非语义包装器。如果这是一个问题,那么可能需要使用不同的HTML结构。 - t-jam
5个回答

44

这里可以使用 定义列表:

<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元素表示零个或多个名称-值组成的关联列表(即描述列表)。


3
+1 是因为你打字比我快很多,而且提供的信息也更详细。我的唯一意见是,如果我对语义非常挑剔的话,我会放弃使用“:”,而是通过 CSS 的 dt:after 选择器来设置“:”作为内容的样式。 - John Green
谢谢您的快速回复,但这真的是W3C所期望的“定义列表”吗?毕竟,我并没有真正地“定义”这些术语,我只是给它们赋了一个值,这个值可能会从页面到页面不同(而定义应该是固定的,我猜测)。我更新了我的问题。 - joh-3
@plua:对于名称/值对来说,它非常适合。看看我链接的页面上的一些示例。DL也用于对话框(例如脚本)。此外,搜索“html定义列表语义学”,您将看到它在各种应用中的使用。我同意它有点可疑,但我认为没有其他更合适的HTML标签。 - Wesley Murch
这里有一个漂亮的CSS格式化定义列表的方法:http://www.the-art-of-web.com/css/format-dl/#.UnV1fxBBHrg - Tomas Kubes
1
嗯...今天(2017年和HTML5更语义化的使用)已经改变了,你可以使用<label>,请参见https://dev59.com/GI7ea4cB1Zd3GeqPFsma#32408312。 - Peter Krauss

4
这是一个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>

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

1
也许您可以使用定义列表(dldtdd),但这似乎也不正确。
正如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标签)。有关详细信息,请参见链接。


看起来W3C已经将<dl>从仅限于“定义列表”更改为任何类型的“描述列表”,因此根据最新规范,<dl>确实是正确的。请参见我的答案 - Matt Browne

1
我同意其他答案,<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>

或者SASS版本:

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

不错的发现.. 不过我对 CSS 不太确定。我认为 HTML 本身应该有一些基本布局,这样即使没有 CSS 也能读得懂。 - Midas
1
我认为<dl>标签本身是可读的,它只是跨越多行而不是在同一行上具有字段值。 - Matt Browne

0

据我所知(并根据规范阅读),<dfn> 似乎是用于像字典或词汇表中定义术语,或在文章文本中定义术语的。因此,将其用于显示“名称”、“年龄”等字段的值对我来说并不太符合语义......另一方面,这肯定比在表单外使用 <label> 要好得多,因为 <label> 明确指定仅用于表单中。 - Matt Browne
我对此持矛盾态度,因为为了保持一致,认为这种使用 <dfn> 并不真正“定义术语”的论点将成为反对使用已接受答案中的 <dt><dd> 标签的论据,我认为这可能过于限制了这些标签的实用性。如果违背严格语义并不是太大的问题,我实际上最喜欢在问题中使用 <dfn> 的想法,因为您不必编写与 <dl> 相比更多的 CSS 覆盖。 - Matt Browne

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接