htmltypescriptsveltesvelte-5

How to nest <a> inside <a>?

I'm using Svelte 5.

<a href="my-first-link">
    <div>
        <!-- Some elements -->
    </div>
    <a href="my-second-link">
        <div>
            <!-- Some other elements -->
        </div>
    </a>
    <div>
        <!-- Some elements -->
    </div>
</a>

Svelte is throwing a lint error:

`<a>` is invalid inside `<a>`svelte(node_invalid_placement)

What is expected in this situation to fix this issue?

Solution

  • That's expected. You can't have interactive content inside an <a> tag. Since <a> tags are interactive elements themself, you can't nest them. You'll have to redesign your markup to account for this.

    https://html.spec.whatwg.org/#interactive-content