是否使用 HTML 标签来包装元素语义？

Question

我正在考虑使用 label 来包裹 h3 和 p 标签。在我看来，这是有道理的，因为标签有标题和描述，并且都与输入相关。但是我似乎无法在规范中找到任何关于是否可以做到这一点的信息。

这是一个例子：

<label for="test1">
    <h3>Label Heading</h3>
    <p>Label Description</p>
</label>

<input id="test1" name="test" type="radio"/>

如果不是有没有人有更好的建议？

Answer 1

如果您要验证您的 HTML/CSS 和其他代码，可以使用一个很棒的官方网站：

W3C Validator

您可以通过指定您的网站地址或复制粘贴源代码来查看。

超越每个人的喜好，在谈论WWW时，您将有信心通过"ruler"（不知道怎么说）进行测试。

Answer 2

在 W3 HTML Validator 中粘贴以下代码会产生两个错误

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <label for="test1">
            <h3>Label Heading</h3>
            <p>Label Description</p>
        </label>
        <input id="test1" name="test" type="radio"/>
    </body>
</html>

Element h3 not allowed as child of element label in this context.

Element p not allowed as child of element label in this context.

所以这个代码是相当无效的。

我还要说这是语义 "invalid"（或者至少很奇怪），因为我认为标签是对输入框的描述，而标题不适合那里。

Answer 3

根据 W3c，他们建议不要在内联元素中使用块元素。由于标签是行内元素，标题和段落是块元素。

Answer 4

This link应该向你描述为什么你不应该那样写。

您可以在 label-tag 中使用 <span class="labelHead"></span> <span class="labelDescription"></span>，但我不推荐它。

最好写成<h3>...</h3><label for="...">...</label><input..。

除了屏幕阅读器、机器人等，for 属性仅用于使文本可点击以将焦点放在输入字段上，对吧？

Answer 5

听起来您正试图在每个输入的基础上复制 fieldset and legend。

您可能想要的是 aria-describedby。

<label for="emailInput" id="email-address-label" aria-describedby="email-address-label-description">Email</label>
<span class="label-description" id="email-address-label-description">This will also be your login username</span>
<input type="email" id="emailInput" autocapitalize="none" spellcheck="off" autocomplete="email" inputmode="email" />

是否使用 HTML 标签来包装元素语义？

Is using a HTML Label to wrap elements semantic?

html

validation

semantics