Marking a whole to be clickable

Question

I have a list with options like this:

<ul>
<li><a href="somewhere">Somewhere</a></li>
<li><a href="A">A</a></li>
<li><a href="B">B</a></li>
<li><a href="C">C</a></li>
</ul>

However only the letters are clickable so I tried this:

   <a href="somewhere"><li>somewhere</li></a>

Now the whole li is clickable as desired but JetBrains tell me that the element is not allowed there. Is there a proper way to do this?

This doesn't have anything to do with Javascript.

Answer 1

You should change your CSS so that the entire area is covered by the <a>.

You probably want display: block.