Is the label semantic or allowed to use what elements inside?

Question

Is the label semantic or allowed to use what elements inside?

Navigation

#1 by (5 votes)

3

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

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

Should the <label> tag be just to provide a descriptive of the following field?

In terms of accessibility, can I use title elements type 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 right thing to use inside the label?

What would be valid for W3C or WCGA?

html html5 acessibilidade

asked by anonymous 29.08.2018 / 16:10

1 answer

Testing mega sena games Assignment in conditional test in PHP

score 5 · Accepted Answer

As W3C and WHATWG , the allowed content is any element characterized as , which is the same as that allowed for the <p> element.

What are the allowed elements within the < P >? tag

However, elements that are labelable ( labelable ), such as <input> , with a particular exception will not be allowed. The <label> element has the for attribute that can receive the id of the <input> to which it is associated. In this case, <label> already has one control entry and therefore, you can not have others in your content. Therefore, if you use the for attribute, you can not set <input> in your content.

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

Elements characterized as phrasing content are:

The abbr, area (if descending from a <map> ) audio, b, bdi, bdo, br, button, cite, code, date, dfn, datalist, dfn iframe, img, input, ins, kbd, label, link (if allowed in the body), map, mark, MathML math, meta (if it has the itemprop attribute), meter, noscript, object, progress, q, ruby, samp, script, select, slot, small, span, sub, sup, svg, template, textarea, time, u, video, wbr, autonomous custom elements and text. p>

As well as the labelable elements are:

button, input (if not of type hidden ), meter, output, progress, select, textarea