Validation Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Question

I am trying to find a solution to this validation error. I have an image grid with thumbnails that bring up a modal when clicked. Everything works correctly but it does not validate. I can't put li around the modal image or it shows before clicked. I am pretty new to coding, any help would be great.

Line 54, Column 41: Element a not allowed as child of element ul in this context. 
(Suppressing further errors from this subtree.)

<a href="#_" class="lightbox" id="img10">

code:

<ul class="cbp-rfgrid">
    <li>
        <a href="#img10"><img src="images/portfolio/goat-tn2.jpg" alt="logo"></a>
    </li>
    <a href="#_" class="lightbox" id="img10">
      <img src="images/portfolio/goat.jpg" alt="logo">
    </a>
</ul>

Overjoy

<a> is not a valid child element of <ul>. You need to put it in a <li> – Jollification

@johnconde is there a way I could do that and not have the image display until clicked? – Overjoy

Answer 1

The content model of ul does not allow an a child, in any version of HTML. You need to wrap the a element inside an li element, if you wish to have it inside a ul element.

It is not clear why you are using ul in the first place. If the second image is not visible initially, that surely depends entirely on style sheets and scripts involved. As they have not been disclosed, it is impossible to say how you should rewrite the code.

Dove

Answer 2

You must wrap every inner ULs with an LI.

The children (direct descendants) of a ul element must all be li elements. This is a purely syntactic requirement.

You can see then hope fully clear. correct semantics for ul in ul

<ul class="menu">
<li>
    <a href="">Demo1</a>
</li>
<li> <----
    <ul class="inside">
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem</a></li>
    </ul>
</li> <----

Zia

or not every "a" just <li><a href="#">Lorem ipsum</a><a href="#">Lorem</a></li> it's easier.. – Cymogene