能否在<label>元素内嵌套标题等标签？是否为良好编码实践？

1. 先明确HTML规范的边界 #

从HTML5的官方规则来看：

• <label>属于短语内容容器，允许嵌套<b>、<em>、<span>这类行内元素，所以你写的<label><b>like this</b></label>是符合规范的，浏览器也能正常运行。
• 但<h1>、<h2>这类块级标题元素绝对不能嵌套在<label>里——虽然浏览器不会直接报错，但这完全违反了HTML的语义逻辑：标题是用来定义页面内容层级的大纲元素，把它塞进表单标签里会彻底打乱文档的语义结构，屏幕阅读器等辅助设备根本没法正确解析内容的层级关系。

2. 哪种方式更合理？ #

关于<b>这类行内元素 #

如果只是为了让文本视觉加粗，完全没必要用<b>，直接给<label>加CSS的font-weight: bold更干净；如果是要强调文本的重要性（比如必填项提示），应该用<strong>（语义化的强调元素），而不是仅负责视觉样式的<b>。

关于标题元素 #

别在<label>里嵌套标题！如果表单区块需要标题，把标题放在<label>外面作为区块的头部才是正确的做法，比如：

<h2>账号设置</h2>
<label for="email">绑定邮箱：</label>
<input type="email" id="email">

3. 更优的代码示例 #

实现标签文本加粗（纯样式需求） #

<!-- 整行加粗 -->
<label for="B" style="font-weight: bold;">喜欢这个选项</label>
<!-- 局部加粗 -->
<label for="B">普通文本 <span style="font-weight: bold;">重点内容</span></label>

强调重要性（语义化需求） #

<label for="required-item"><strong>* 必填项：</strong>请输入姓名</label>
<input type="text" id="required-item" required>

内容的提问来源于stack exchange，提问作者Unknown