CODEWITHSUNDEEP
htmlcssvalidationhtml-lists
user3453751
user3453751

Reputation: 61

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

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>

Upvotes: 6

Views: 67084

Answers (2)

Bipon Biswas
Bipon Biswas

Reputation: 11635

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

Upvotes: 10

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

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.

Upvotes: 11

Related Questions