Wrapping in an <a> the whole <li> element instead of just the text of it

I had to run this task, but instead of wrapping just text of the <li> in the the <a> tag, I wrapped the whole <li> element and it still runs fine, but I get an error from the console to do it the way it asks.

Is this just for convention, or is there a further reason why it is recomended to wrap just the text instead of wrapping the whole <li> element?


<a/> is not an expected child element of <ul/> which is expecting <li/> as direct children. <li/> is not an expected child element of <a/>, either.

Anchors are inline elements by default so that we can embed links in textual material. When we have a declared list, then we should construct the list and then fill the list items with content.

<li><a href="#">link text</a></li>
<!-- ... -->