W3 HTML5 验证，不允许将锚点作为 ul 的子项

Question

当我在 w3 验证器上验证我的 html 时，出现以下错误：

在此上下文中，不允许将元素 a 作为元素 ul 的子元素。（禁止显示此子树中的进一步错误。

该网站在我的手机、平板电脑和台式机上正常显示（并且锚点正在工作），我不太理解此错误消息。有人可以告诉我我做错了什么以及如何正确地做到这一点吗？

下面是生成错误的代码部分：

<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>只能包含<li>元素。就这么简单。

<ul>是"无序列表"，<li>是"列表项"。列表应仅包含列表项...

您可能会发现它正在浏览器中工作，但您不应该保持这种状态。有些浏览器会自动纠正您的错误并在您的<a>元素周围包裹<li>，而其他浏览器只会让它看起来很糟糕。

如果你想纠正你的代码，我建议如下：

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