4.5.1 a元素

Question

I'd like to nest some links inside each other in my website's banner, something like:

<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>

and have the page-specific inner links show up overlaid on top of the big banner link that returns the user to the site's homepage.

I know that wrapping block content in an <a> is legal in HTML 5，这也是合法的吗？

Answer 1

不。

HTML 5规范中4.5.1 The a element部分的两部分一起禁止这样做：

4.5.1 a元素

Categories:

Flow content。
  Phrasing content。
  的 Interactive content
  Palpable content

...

Content model

Transparent，但 必须没有interactive content后代 。

（强调我的）。

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

更重要的是，这在真正的浏览器中不起作用。如果您在浏览器中尝试问题（fiddle）中的HTML，您会发现浏览器会生成所有四个<a>元素兄弟，而不是让内部的从外面下来。

Answer 2

不允许嵌套锚链接。原因发布在another answer to this post。

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

HTML （adheres to standards）

<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>

<强> CSS

#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;
}

DEMO

是嵌套的<a> links legal?

2 个答案:

4.5.1 a元素

Categories:

Content model