Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    It is not possible to stack elements inside of each other directly in Svelte. You must reorganize your structure so that every link is independent in order to fix the lint mistake. This is one method of code refactoring:

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

    To avoid the invalid nesting, move the second tag outside of the first one. Now, every link can function independently.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search