Link within link causes collection display inception

Hey guys! Long time reader, first time writer. Lol. So every time I try to display an anchor tag within an anchor tag it causes a glitch in the matrix and displays some unexpected resulting HTML output. Seemingly even if I place an empty anchor tag within the parent anchor tag, it causes this to happen. Not sure what the issue could be. If I don't add an inner anchor tag it displays HTML as expected from the loop. What can I change to achieve the expected results?

Example template code:

          {{ collection:team_members limit="3" }}
            {{ entries }}
              <div class="col-12 col-md-4">
                <a href="{{ url }}" class="team-wrapper">
                  <img class="lazy" src="{{ profile_photo }}" alt="">
                  <div class="info-box">
                    <h3>{{ title }}</h3>
                    <p class="position">{{ job_title }}</p>
                    <p class="small-spacer-border"><a href="mailto:{{ email }}">{{ email }}</a></p>

                  </div>
                </a>
              </div>
            {{ /entries }}
          {{ /collection:team_members }}

resulting HTML output....

<div class="col-12 col-md-4">
  <a href="/about/team-member-1" class="team-wrapper">
    <img class="lazy loaded" src="/assets/staff/team-member-1.jpg" alt="" loading="lazy" data-was-processed="true">
  </a>
  <div class="info-box">
    <a href="/about/team-member-1" class="team-wrapper">
      <h3>Team Member 1</h3>
      <p class="position">Partner</p>
    </a>
    <p class="small-spacer-border"><a href="/about/team-member-1" class="team-wrapper"></a><a href="mailto:[email protected]">[email protected]</a></p>

  </div>

</div>

For some reason I can't seem to figure out, it unnecessarily repeats the /about anchor tag and a very unexpected way.

What can I do to get my desired HTML output?

<div class="col-12 col-md-4">
  <a href="/about/team-member-1" class="team-wrapper">
    <img class="lazy loaded" src="/assets/staff/team-member-1.jpg" alt="" loading="lazy" data-was-processed="true">
    <div class="info-box">
      <h3>Team Member 1</h3>
      <p class="position">Partner</p>
      <p class="small-spacer-border"><a href="mailto:[email protected]">[email protected]</a></p>

    </div>
  </a>
</div>

Thank you ahead of time for helping me save my sanity.

>>>>>>> Unanswered <<<<<<<
1 Reply
2 Followers