HTML heading elements in labels [closed]

孤街醉人 提交于 2019-12-13 22:18:12

问题


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>

回答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.




回答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



来源:https://stackoverflow.com/questions/31838504/html-heading-elements-in-labels

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!