<label> 的语义使用也超出了<form>?

2022-01-25 00:00:00 label forms html css semantic-markup

我对使用标签label有疑问.

我有一个 div 作为模拟高级下拉列表的 widget.

I have a div acting as a widget that simulates an advanced dropdown-list.

<div class="control">
    <label class="description">Choose:</label>
    <div class="widget__list">...some other content...</div>
</div>

这里是 W3C 规范 (http://www.w3.org/TR/html401/interact/forms.html#h-17.9)说:

Here the W3C specifications (http://www.w3.org/TR/html401/interact/forms.html#h-17.9) say:

LABEL 元素用于为没有隐式标签的控件指定标签

The LABEL element is used to specify labels for controls that do not have implicit labels

(更新:请不要依赖上面的(过时的)引用.请参阅下面链接的 HTML5 规范)

向上滚动到控件"部分(http://www.w3.org/TR/html401/interact/forms.html#h-17.2) 我可以看到在控件类型"列表中有类型<强>菜单.

Scrolling up to the "Controls" section (http://www.w3.org/TR/html401/interact/forms.html#h-17.2) I can see that in the list of "control types" there is the type menu.

我想知道的是:

  • 我的 div-widget 是否属于菜单控件的类别?
  • 如果是，即使我没有任何 HTML 原生控件(input、select、button等)在里面?
  • 我是否错误地使用了 label 元素(不在 form 的上下文中)，我是否应该将其更改为 span?
  • does my div-widget belong to the category of menu controls?
  • if yes, should my widget be wrapped into a form element, even if I don't have any HTML native control (input, select, button, etc.) in it?
  • am I using incorrectly the label element (not being in the context of a form), and should I maybe change it to span?

这些问题的语义上最正式的答案是什么?

What are the most semantically formal answers to these questions?

引用引用了 HTML4 规范，从而引发了上述问题.label 的当前 HTML5 规范 已经给出了我需要的答案(感谢 @PeterKrauss).

The quote refers to the HTML4 specs, leading to raise the above questions. The current HTML5 specs for label gives already the answers that I needed (thanks @PeterKrauss).

推荐答案

你的文档是 根据W3C 验证器.

这意味着您的 label 案例在当前 HTML 标准中未被定义为错误.因此，您不必再担心语义，只需像这里一样使用它——如果它对您来说是自然的并且它是否按预期工作.

That means your label case isn’t defined as an error in the current HTML standard. So you shouldn’t worry more about the semantics, and just use it as you have here—if it’s natural for you and if it works as expected.

向上滚动到控件"部分(http://www.w3.org/TR/html401/interact/forms.html#h-17.2)

Scrolling up to the "Controls" section (http://www.w3.org/TR/html401/interact/forms.html#h-17.2)

您不想在任何事情上使用旧的 HTML4 规范.它于 1999 年出版.

You don’t want to use the old HTML4 spec for anything. It was in published in 1999.

当前的 HTML 标准位于 https://html.spec.whatwg.org/multipage/.该规范中关于 label 元素的部分位于 https://html.spec.whatwg.org/multipage/forms.html#the-label-element.

The current HTML standard is at https://html.spec.whatwg.org/multipage/. The section of that spec on the label element is at https://html.spec.whatwg.org/multipage/forms.html#the-label-element.

我的 div-widget 是否属于菜单控件的类别?

does my div-widget belong to the category of menu controls?

当前的 HTML 标准没有定义称为菜单控件"的类别；所以 label 元素是否适合作为一个类别并不重要.

The current HTML standard doesn’t define a category called "menu controls"; so it doesn’t matter whether the label element fits into that as a category.

我是否错误地使用了标签元素(不在表单的上下文中)，我是否应该将其更改为 span?

am I using incorrectly the label element (not being in the context of a form), and should I maybe change it to span?

您没有正确使用它.如果是，W3C 验证器会将其标记为错误.换句话说，您的案例在当前的 HTML 标准中没有被定义为错误.所以你很高兴.

You’re not using it incorrectly. If you were, the W3C validator would flag it as an error. In other words, your case isn’t defined as an error in the current HTML standard. So you’re good to go.

相关文章