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

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

在此上下文中，元素h3不允许作为元素标签的子元素。

在此上下文中，元素p不允许作为元素标签的子元素。

所以这段代码无效。

我还会说在语义上“无效”（或至少很奇怪），因为我认为标签是输入框的描述，而标题不适合那里。< / p>

Answer 2

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

Answer 3

听起来你正试图在每个输入的基础上复制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" />

Answer 4

如果您正在尝试验证HTML / CSS和其他代码，那么它就是一个很棒的官方网站：

W3C Validator

您只需指定网站地址或复制粘贴源代码即可查看。

除了每个人的喜好之外，您还可以确保自己得到“统治者”的测试。（在谈论WWW时，不要知道怎么说）。

Answer 5

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

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

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

除了屏幕阅读器，机器人和类似设备外，for属性仅用于使文字可点击以获得对输入字段的关注，对吧？

使用HTML Label来包装元素语义？

5 个答案: