w3 html5 验证，锚点不允许作为 ul 的子项

Question

When I validate my html on w3 validator, I get the following error:

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

The site is displaying properly (and the anchor is working) on my phone, tablet and desktop, and I don't really understand this error message. Can somebody tell me what I did wrong and how to do this properly?

Here's the part of the code that produces the error:

<section id="skills">
    <div class="skills-header">
        <p>Pozdravljen Svet! Pišem lahko:</p>
    </div>
    <div class="skills-container">
        <ul>
            <li>< html5 ></li>
            <li> { css3 }</li>
            <li>javascript.js</li>
            <li class="break">$(jQuery)</li>
            <li class="break"><%= rails 4 %></li>
            <li class="break">< div class="bootstrap" ></li>
            <li class="break">$ sudo apt-get update</li>
            <a href="https://si.linkedin.com/pub/miha-šušteršič/b2/60/654"><li class="profile-icon ion-social-linkedin"></li></a>
            <a href="https://github.com/Shooshte"><li class="profile-icon ion-social-github"></li></a>
        </ul>
    </div>
</section>

Answer 1

<ul> can only contain <li> elements. It's as simple as that really.

<ul> is an "Unordered List", and an <li> is a "List Item". A list should only contain list items...

You may find it is working in your browser, but you shouldn't keep it that way. Some browsers will auto-correct your error and wrap an <li> around your <a> elements, others will just make it look awful.

If you want to correct your code I suggest the following:

<li><a href="https://si.linkedin.com/pub/miha-šušteršič/b2/60/654" class="profile-icon ion-social-linkedin"></a></li>
<li><a href="https://github.com/Shooshte" class="profile-icon ion-social-github"></a></li>

Answer 2

When I validate my html on w3 validator, I get the following error:

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

The site is displaying properly (and the anchor is working) on my phone, tablet and desktop, and I don't really understand this error message. Can somebody tell me what I did wrong and how to do this properly?

Here's the part of the code that produces the error:

<section id="skills">
    <div class="skills-header">
        <p>Pozdravljen Svet! Pišem lahko:</p>
    </div>
    <div class="skills-container">
        <ul>
            <li>< html5 ></li>
            <li> { css3 }</li>
            <li>javascript.js</li>
            <li class="break">$(jQuery)</li>
            <li class="break"><%= rails 4 %></li>
            <li class="break">< div class="bootstrap" ></li>
            <li class="break">$ sudo apt-get update</li>
            <a href="https://si.linkedin.com/pub/miha-šušteršič/b2/60/654"><li class="profile-icon ion-social-linkedin"></li></a>
            <a href="https://github.com/Shooshte"><li class="profile-icon ion-social-github"></li></a>
        </ul>
    </div>
</section>