6

I've a label element whose contents needs some styling. This label can't be adjusted, so it would be handy to use a <div> or block-level elements inside the label. So I'm wondering if it is valid to use a <div> in a <label> in HTML5.

Amber
  • 465
  • 1
  • 5
  • 13

2 Answers2

7

the label element:

Content model:
Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

phrasing content:

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

So no. Div elements may not be descendants of labels.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    Thanks, and what about using a `` which I turn into `display: block`. Guess this won't be valid as well? – Amber Mar 11 '16 at 13:49
  • 3
    The value of the display property has no bearing on the validity of the HTML. – Quentin Mar 11 '16 at 13:49
0

Use the span element. I drew up a simple example here: 

<label for="">click me <span>span</span> </label>

https://jsfiddle.net/hukxyxfq/1/

wgallop
  • 157
  • 2
  • 2
  • 11
  • Thought of this as well, but what if I need to put on some margin/padding? Then I need something like display:block. Is it still valid then? – Amber Mar 11 '16 at 13:48
  • You could make it display: block...please give more example code, don't just give hypotheticals. – wgallop Mar 11 '16 at 14:01