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>

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.

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