Лучший способ заменить <a><li></li></a>?

Question

Я пишу веб-страницу, на данный момент, и только подтверждено it- W3C, валидатор не нравится:

<nav id="footNav"> 
    <ul> 
      <a href="contact.html"><li>Contact</li></a> 
      <a href="access.html"><li>Accessibility</li></a><br> 
      <li>&copy; A dev, 2015</li> 
    </ul> 
<nav id="footNav"> 

Как ссылки находятся вне элементов списка. Я могу признать, что это неправильный способ сделать это, но что я должен заменить? Эффект, который я собираюсь сделать, это «кнопки», то есть вам не нужно нажимать на текст, вы можете щелкнуть в любом месте общей (дополненной) области ссылки.

Спасибо!

Answer 1

Да, это недопустимая разметка. Элемент ul может содержать только детей li. Вы можете поменять элементы a на элементы списка и использовать правило display: block в своем CSS. Теперь элементы a: блок элементы, которые занимают все свободное место.

<style> 
#footNav li a { 
    display: block; 
} 
</style> 
<nav id="footNav"> 
    <ul> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="access.html">Accessibility</a></li> 
     <li>&copy; A dev, 2015</li> 
    </ul> 
</nav>