Bootstrap Carousel HTML structure and funny output [closed]

Question

I built a wordpress site with a bootstrap carousel at the top. As you might have seen, that carousel's code goes:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true">
    </span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" 
role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
  </a>
</div>

What i did (since i need it to be dynamic) was:

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="8"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="9"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$postsSlider = new WP_Query(array(
    'cat' => 7,
    'posts_per_page' => 10,
));
$first = true;
if ($postsSlider->have_posts()) :
while ($postsSlider->have_posts()) : $postsSlider->the_post(); 

    if ($first) {
 ?>
    <a class="foto_link" href="<?php the_permalink(); ?>">
      <div class="carousel-item active" style="background-image: url('<?php the_post_thumbnail_url('slider');?>'); background-size: cover">

        <div class="carousel-caption d-none d-md-block">
          <a href="<?php the_permalink(); ?>">
            <h1 class="titulo-slider">
              <?php the_title(); ?>
            </h1>
            <br>
            <h4 class="subtitulo-slider">
              <?php echo the_excerpt(); ?>
            </h4>
            <br>
            <h3>Por
              <?php the_author(); ?>
            </h3>
          </a>
        </div>
      </div>
    </a>

    <?php 
  $first = false;
  } 
  else { ?>
    <a class="foto_link" href="<?php the_permalink(); ?>">
      <div class="carousel-item" style="background-image: url('<?php the_post_thumbnail_url('slider');?>'); background-size: cover">

        <div class="carousel-caption d-none d-md-block">
          <a href="<?php the_permalink(); ?>">
            <h1 class="titulo-slider">
              <?php the_title(); ?>
            </h1>
            <br>
            <h4 class="subtitulo-slider">
              <?php echo the_excerpt(); ?>
            </h4>
            <br>
            <h3>Por
              <?php the_author(); ?>
            </h3>
          </a>
        </div>
      </div>
    </a>
    <?php }
  ?>

    <?php

    endwhile; else :
            echo '<p class="no-content">No encontramos ningún contenido</p>';
    endif;
    wp_reset_postdata();
  ?>

 </div>

 <!-- Controls -->
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true">/span>
   <span class="sr-only">Anterior</span>
   </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Próximo</span>
   </a>
  </div>

For description sake i tell you that the $first variable and the if statement I use it to give the first iteration the class 'active'. For the rest the code is identical.
In general everything works, but my problem here is that in my code the tag:

<a class="foto_link" href="<?php the_permalink(); ?>">

is wrapping the tag:

<div class="carousel-item active" style="background-image: url('<?php the_post_thumbnail_url('slider');?>'); background-size: cover">

But the output unfortunately is:

That closing </a> at line 4 (in the little picture) should be at the end of div.carousel-item wrapping it and I don't know why it is not. My code in imgs:

Answer 1

You have a nested anchor tag. I have never seen that done before. You are wrote this with your code

 <a href="#"><a href="#"></a></div></div></a>   

I would think that is your problem. Why do you need this first anchor tag?

 ?php
while ($postsSlider->have_posts()) : $postsSlider->the_post(); 

if ($first) {
?>
  <a class="foto_link" href="<?php the_permalink(); ?>">//should this be here

Take out that anchor tag and see what happens