HTML 标签中的标题元素

Question

当我需要放置标题时，我使用 h-number 标签。但是如果我需要 label 中的标题，我也应该使用 h-number 吗？

示例：

<label ...>
    <h1>Username</h1>
    <input ... />
</label>

Answer 1

没有必要这样做。只需使用样式

label,
label span {font-size: 20px; font-weight: bold}

<label for="username-input">Username</label>
<input type="text" name="username" id="username-input">

<!-- Or, if you want the input inside of the label -->
<label>
  <span>Username</span>
  <input type="text" name="username">
</label>

通常，您不希望将块元素（例如标题标签）放在行内元素（例如标签）中。但是，您可以随时更改它们的显示样式。

另一件要记住的事情是标题标签应该保留给标题。 label 标记应保留用于标签。 在您的情况下，标签内的 h1 标签不会 "make sense" 因为它不是页面的标题。您可能想要使用一些 不太显眼的东西，例如 span，但要使它看起来像您想要的那样。

Answer 2

标签应用作标题并且不需要 <h1> <h2> 等。有效的标记看起来像

<label>
    Username
    <input />
</label>

您可以使用 for= 属性将 <input /> 移到 <label /> 之外，或者将 <input /> 保留在您的标签内。

<label for="username">Username</label>
<input id="username" type="text" />

See more here

HTML 标签中的标题元素

HTML heading elements in labels

html

html-heading