CODEWITHSUNDEEP
htmlvalidation
2339870
2339870

Reputation: 1487

W3C validation error: span element

When I validate my page I have the following error:

Element span not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

This is my HTML markup:

<nav>
<ul>
    <li class="nav-home">
        <a href="index.html" title="Home">Home</a>
    </li>
    <span class="solidus"> &#47;</span>
    <li class="nav-paints">
        <a href="paints.html" title="Paints">Paints</a>
    </li>
    <span class="solidus"> &#47;</span>
    <li class="nav-non-paints">
        <a href="non-paints.html" title="Non-paints" class="active">Non-paints</a>
    </li>
    <span class="solidus"> &#47;</span>
    <li class="nav-advies">
        <a href="advies.html" title="Advies">Advies</a>
    </li>
    <span class="solidus"> &#47;</span>
    <li class="nav-training">
        <a href="training.html" title="Training">Training</a>
    </li>
    <span class="solidus"> &#47;</span>
    <li class="nav-afvalbeheer">
        <a href="afvalbeheer.html" title="Afvalbeheer">Afvalbeheer</a>
    </li>
</ul>
</nav>

I tried replacing the spans by regular divs and put them on inline, however, this is apparently also not allowed. Any ideas on how to fix this error?

Upvotes: 0

Views: 1457

Answers (2)

Abbas
Abbas

Reputation: 14432

You should place the span inside the li, like this:

<li class="nav-home">
    <a href="index.html" title="Home">Home</a>
    <span class="solidus"> &#47;</span>
</li>

This is completely valid.

Upvotes: 2

Rafa Romero
Rafa Romero

Reputation: 2716

The problem is that the <span> element is not nested in any other tag and in any level, because you are putting the <span> element within a list but out of any <li> element. So the list is breaking out!

Try putting it inside any element, inside <li> element if you can, for example!

<nav>
<ul>
    <li class="nav-home">
        <a href="index.html" title="Home">Home</a>
        <span class="solidus"> &#47;</span>
    </li>
    <li class="nav-paints">
        <a href="paints.html" title="Paints">Paints</a>
    </li>
    <span class="solidus"> &#47;</span>
    <li class="nav-non-paints">
        <a href="non-paints.html" title="Non-paints" class="active">Non-paints</a>
        <span class="solidus"> &#47;</span>
    </li>
    <li class="nav-advies">
        <a href="advies.html" title="Advies">Advies</a>
        <span class="solidus"> &#47;</span>
    </li>
    <li class="nav-training">
        <a href="training.html" title="Training">Training</a>
        <span class="solidus"> &#47;</span>
    </li>
    <li class="nav-afvalbeheer">
        <a href="afvalbeheer.html" title="Afvalbeheer">Afvalbeheer</a>
        <span class="solidus"> &#47;</span>
    </li>
</ul>
</nav>

Upvotes: 1

Related Questions