Skip to content Skip to sidebar Skip to footer

Html Heading Elements In Labels

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:

Solution 1:

There is no need to do so. Just use styles

label,
labelspan {font-size: 20px; font-weight: bold}
<labelfor="username-input">Username</label><inputtype="text"name="username"id="username-input"><!-- Or, if you want the input inside of the label --><label><span>Username</span><inputtype="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.

Solution 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

Post a Comment for "Html Heading Elements In Labels"