嵌套的<a>链接是否合法？

Question

我想在我网站的横幅中互相嵌入一些链接,例如:

<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中包装块内容<a>是合法的,这也是合法的吗？

Answer 1

不.

4.5.1a部分的两部分HTML 5规范中的元素一起禁止这样:

4.5.1 a元素

分类:

流量内容.
短语内容.
互动内容.
可触及的内容.

...

内容模型:

透明,但必须没有互动内容后代.

(强调我的).

由于<a>元素不能包含交互式内容,但它们本身是交互式内容,因此<a>元素不能包含其他<a>元素.

更重要的是,这在真正的浏览器中不起作用.如果你在浏览器中尝试问题(小提琴)中的HTML ,你会发现浏览器会使所有四个<a>元素成为兄弟姐妹,而不是让内部元素从外部元素中下降.