Is <label> semantic or allowed to use which elements inside?

Asked

Viewed 145 times

3

Studying I saw some examples of code where the input is placed inside the label, that brought me a doubt, it would be semantic to use what elements within a label?

<label for="campo">Descritivo do campo
   <input type="text" id="campo" />
</label>

The tag <label> should not only be to offer a description of the following field?

In terms of accessibility I can use type title elements H2 or H3 within a label? Semantically this seems wrong... I keep imagining the screen reader finding a title h2 within a label

<label for="campo">
   <h2>título do campo</h2>
   <input type="text" id="campo" />
</label>

What would be the correct to use inside the label?

What would be valid by W3C or WCGA?

1 answer

5


In accordance with W3C and WHATWG, the permitted content is any element characterized as phrasing content, which is the same as permitted for the element <p>.

However, elements that are labelled (labelable), just as <input>, with one particular exception. The element <label> has the attribute for that may receive the id of <input> to which it is associated. In this case, the <label> already has a control entry and therefore cannot have other in its content. So, if you use the attribute for, cannot define <input> in its content.

Already, when the attribute for is not used, will be considered as control input the first labelable field of its content. In this case, the first <input> what to find inside <label>. This way, not using the attribute, you can have one, and only one, element labelable as child.

The elements characterized as phrasing content sane:

a, abbr, area (if descended from a <map>), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link (if allowed in the body), map, mark, mathml Math, meta (if you have the attribute itemprop), meter, noscript, Object, output, picture, Progress, q, ruby, s, Samp, script, select, slot, small, span, Strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Autonomous custom Elements and text.

As well as the labelable elements are:

button, input (if not of the type Hidden), meter, output, Progress, select, textarea

  • Thanks for the young enlightenment!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.