Html 是嵌套的<；a>；链接合法吗？

我想在我网站的横幅中相互嵌套一些链接，例如：

<a href="/" class="hero-image">
    <a href="/some-page" class="navigation-button">Some page</a>
    <a href="/some-other-page" class="navigation-button">Some other page</a>
    <a href="/yet-another-page" class="navigation-button">Yet another page</a>
</a>

并将特定于页面的内部链接覆盖在大横幅链接之上，该链接将用户返回到网站主页

我知道在

中包装块内容，那么这也是合法的吗？
不

HTML 5规范第节的两个部分一起禁止此操作：

4.5.1 a元素的定义
.

.





:
，但不能有后代

（我的重点）

由于浏览器中的
），您将看到浏览器使所有四个
元素成为兄弟元素，而不是让内部元素从外部元素下降。
不允许嵌套锚链接。原因已张贴在

但是，要实现问题中描述的链接设置，可以执行以下操作：

HTML（）

它在
text/html
序列化中不起作用。嵌套的a元素可以在
应用程序/xhtml+xml
序列化或通过JavaScript无效地构造。但是，如果您这样做，浏览器就不会对它们进行互操作，因此单击
a
元素上的堆栈将在某些浏览器中导航到外部元素的链接，在其他浏览器中导航到内部元素的链接。为什么HTML中不允许嵌套交互内容？是否存在可用性问题？
<nav id="main-container">
    <a href="/" class="hero-image">Link 1</a>
    <div id="overlaying-container">
        <a href="/some-page" class="navigation-button">Link 2</a>
        <a href="/some-other-page" class="navigation-button">Link 3</a>
        <a href="/yet-another-page" class="navigation-button">Link 4</a>
    </div>
</nav>

#main-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    position: relative;
}

.hero-image {
    height: 100%;
    width: 100%;
}

#overlaying-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    display: flex;
}

.navigation-button {
    box-sizing: border-box;
    text-align: center;
    flex: 1;
    height: 50px;
    padding: 10px;
    margin: 5px;
}