HTML heading elements in labels

Question

When I need place a title, I use h-number tags. But in case that I need a title in a label, for instance, should I use h-number, too?

Example:

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

Answer 1

There is no need to do so. Just use styles

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>

Generally, you do not want to put block elements (such as heading tags) inside of inline elements (such as a label). However, you can always alter their display style.

Another thing to remember is that heading tags should be reserved for headings. Label tags should be reserved for labels. In your case, the h1 tag inside of the label doesn't "make sense" since it is not the heading of the page. You would want to use something less prominent, such as a span, but make it look how you want.

Answer 2

A label should be used as a caption and does not require <h1> <h2> etc. Valid markup would look like

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

Feel free to move the <input /> outside of the <label /> by using the for= attribute, or keep the <input /> inside your label as you have it.

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

See more here