w3 валидация html5, якорь не допускается, как ребенку, ул

Question

Когда я проверить мой HTML на w3 валидатор, я получаю следующее сообщение об ошибке:

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

Сайт отображается неправильно (и якорь работает) на мой телефона, планшета и рабочего стола, и я действительно не понимаю это сообщение об ошибке. Может ли кто-нибудь сказать мне, что я сделал не так, и как это сделать правильно?

Вот часть кода, который производит ошибку:

<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> является «Элементом списка». Список должен содержать только элементы списка ...

Возможно, он работает в вашем браузере, но вы не должны его поддерживать. Некоторые браузеры будут автоматически исправлять вашу ошибку и обернуть <li> вокруг ваших элементов <a>, другие просто заставляют его выглядеть ужасно.

Если вы хотите исправить код, я предлагаю следующее:

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