Element h3 not allowed as child of element label in this context. [html]

Question

I have currently this code:

<ul class="char">
            <li>
            <label class="textOverImage" style="background-image:url(img/text.png)">
               <input type="checkbox">
               <h3>Joyce Byers</h3>
               <div>
               text
               </div>
            </label>
            </li>

w3.validator.org gives me this error: Element h3 not allowed as child of element label in this context.

Element div not allowed as child of element label in this context.

I really don't know another way to do this. Is there a way to get what I want without an error?

i"m trying to make this: https://codepen.io/zFunx/pen/QvzeBN

Thank you in advantage

why do you need h3? you can use span and style that span – Farshad Apr 27 '18 at 19:24 — Farshad, Apr 27 '18 at 19:24

score 2 · Accepted Answer · answered Apr 27 '18 at 19:23

2

In you code, you have

<label class="textOverImage" style="background-image:url(img/text.png)">
     <input type="checkbox">
     <h3>Joyce Byers</h3>
     <div>
         text
     </div>
</label>

Which means inside your label, you have an input, a h3 and a div.
The only things you can have inside a label is text and/or an input.
You need to move the div and the h3 out of the label or use something else than a label to group the h3 and the div

answered Apr 27 '18 at 19:23

Liora Haydont

1,252
1
12
25

I'm trying to create this https://codepen.io/zFunx/pen/QvzeBN What should I use instead of label to group h3 and div? That would be the best i suppose. – Eric mansen Apr 27 '18 at 19:25
1

This codepen is not valid html, it is possible but you won't be able to use this example – Liora Haydont Apr 27 '18 at 19:27

score 2 · Answer 2 · answered Apr 27 '18 at 19:25

You can use one of these scenarios :

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

you can find more information in this thread

Element h3 not allowed as child of element label in this context. [html]

2 Answers2