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>
请注意,您需要添加样式才能看起来像这样,但是这是正确的逻辑结构。
也许你可以使用定义列表( dl
, dt
, dd
),但是这听起来不正确。
正如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>