Is <Div> Inside <Label> Block Correct

Is div inside label block correct?

No, HTML does not allow a <label> to contain a <div>.


See the specification for 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.

Where phrasing content links to:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

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 textarea time u var video wbr text

Is there any fix for divs inside of label

The valid HTML would be to use a <span> instead of a <div>. Reason is that label represents a text construct and div represents a container object.

Is it correct to use DIV inside FORM?

It is totally fine .

The form will submit only its input type controls ( *also Textarea , Select , etc...).

You have nothing to worry about a div within a form.

html5 div inside label

Set display:block for the label

label {  display:block;}
<label><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</label><label><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</label><label><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</label>

Should I put input elements inside a label element?

From the W3's HTML4 specification:

The label itself may be positioned before, after or around the
associated control.


<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Is putting a div inside an anchor ever correct?

Depending on the version of HTML you're catering to:

  • HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

  • HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

    Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

    However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.



Related Topics



Leave a reply



Submit