Search code examples
htmlsyntaxmarkup

Nesting <a> tags between <ul> and <li>

A quick HTML question. Is it sufficient to nest a <a> tag between the <ul> and <li> tags like this:

<ul>
  <a href="somewhere.html">
    <li>Option 1<li>
  </a>
  <a href="somewhereElse.html">
    <li>Option 2<li>
  </a>
<ul>

Thanks!

Solution

  • This is invalid because inline elements cannot contain block elements. Inline elements can only contain other inline elements. Block elements can contain both inline and other block elements.

    The correct HTML:

    <ul>
     <li>
          <a href="somewhere.html">Option 1</a>
     </li>
     <li>
          <a href="somewhereElse.html">Option 2</a>
     </li>
</ul>

    Both li and a tags are inline by default. ul is block by default. See list of inline elements and list of block elements for further reading