html tidy strange behaviour on stackoverflow snippet

Question

I try to tidy the following html code, and I get an strange result. li elements are not aligned. Is it correct to have al ul tag and text inside an a

<a> Text Inside a
<ul>
  <li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>

</a>

Why It could happens?

Answer 1

The accepted ways of providing indentation to your code is by using 2-space or 4-space indentation (Every time you open a child tag in the next line give it 2/4 space ). Although in HTML indentation does not matter, your code will work perfectly fine with whatever way you wish to do indentation.

tidy code (2-space indentation):

<a href="Link_to_anything"> Text Inside a
  <ul>
    <li>li1 content</li>
    <li>li2 content</li>
    <li>li3 content</li>
  </ul>
</a>

I have added href attribute , as the purpose of the <a> tag is to link the contents inside to another web page or part of a web page

DEFINITION: The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.

The anchor tag can hold most tags inside it like <img>, <p>, <h1> to <h6>,etc. You can perfectly add <ul> tag within the <a> tag

Answer 2

ul tag is a block element tag - a tag is a inline-block element tag - it is not recommended to put block elements within inline-block elements.

If you had a basic navigation it would look like

    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>

As explained earlier - within the ul tag you can assign the a tags to navigate to other links/webpages.