Html Heading Elements In Labels
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" />
Post a Comment for "Html Heading Elements In Labels"