0

I am working on a navbar and I want the entire li element to be clickable rather than just the text in it. Currently it's structured very standardly:

<ul>
  <li><a>link 1</a></li>
  <li><a>link 2</a></li>
</ul>

With styling, when you hover over li the background changes, but you can only click on the text which is in the a element. What I would like to do is change the code to look like this:

<ul>
  <a><span>link 1</span></a>
  <a><span>link 2</span></a>
</ul>

It works perfectly, there are no major changes minus the fact that now as soon as you hover over what would've been the li element, it is all clickable as is a normal a element. My question is is this proper practice? Should I be doing this for my future projects if need be or should I maintain using <ul><li></li></ul> format for navbars, for example, to maintain some sort of proper html coding etiquette?

RossEcuador
  • 39
  • 3
  • This thread - https://stackoverflow.com/questions/6056142/is-anything-except-lis-allowed-in-a-ul - still seems to be applicable here. – raina77ow Jun 30 '21 at 17:34

1 Answers1

0

nop ! in fact this syntax works but :

  1. your browser can create error in futur update
  2. if another dev want to read your code it's pretty hard to understand
  3. if you use some kind of linter this can be detect has a syntax error

if you don't want to use li you have to delete ul as well (but you can use other html tags like divs, span, ... with some css display like grid or flex)

tazertazer
  • 71
  • 3