为什么<a> parent with a list of </a> <a> inside render children separately

Question

I think I might be going insane. If I have this HTML (I need the section there, in fact there will be multiple sections):

<a>
  <section>
    <ul>
      <li>foo</li>
    </ul>
  </section>
</a>

It renders like this:

但如果我使用foo标记包围<a>，则将其设为超链接，如下所示：

<a>
  <section>
    <ul>
      <li><a href="#">foo</a></li>
    </ul>
  </section>
</a>

一切都变得绝对地狱：

我有一种感觉真是愚蠢，我忽略了，但是这里到底发生了什么。

亲自尝试：

＆＃13;

＆＃13;

<a>
  <section>
    <ul>
      <li><a href="#">foo</a></li>
    </ul>
  </section>
</a>

＆＃13;

＆＃13;

＆＃13;