Duplicated <a> tag in loop

Question

I stuck on this issues, looks simple but can't find resolution to fix it.

I have such loop:

<div class="features-items__wrapper">
                <h2><?php echo $currentTitle; ?></h2>
                <?php
                global $post;
                $post_slug = $post->post_name;
                $args = array(
                        'posts_per_page' => -1,
                        'post_type' => 'feature',
                        'order' => 'ASC',
                        'tax_query' => array(
                          array(
                           'taxonomy' => 'feature_сategory',
                           'field' => 'slug',
                           'terms' => $post_slug
                          )
                         )
                    );
                $the_query = new WP_Query( $args );
                ?>
                <?php if( $the_query->have_posts() ): ?>
                <?php
                    $counter = 0;
                    $total = $the_query->post_count;
                    while ( $the_query->have_posts() ) : $the_query->the_post();
                    if ($counter % 2 === 0) {
                ?>
                <div class="row">
                <?php } ?>
                    <a href="<?php the_permalink(); ?>" class="features-items__item col-12 col-xl-6">
                      <div class="features-items__img">
                        <img src="<?php the_field('feature_item_icon'); ?>" alt="">
                      </div>
                      <div class="features-items__description">
                        <h3><?php the_field('feature_item_title'); ?></h3>
                        <?php the_field('hero_subtitle'); ?>
                      </div>
                    </a>
                <?php $counter++; if ($counter != 0 && ($counter % 2 === 0 || $counter === $total)) { ?>
                </div>
                <?php } ?>
                <?php endwhile; ?>
                <?php endif; ?>
                <?php wp_reset_query(); ?>
              </div>

And i get such output: https://prnt.sc/100lsjh
And makrup:

As you see markup is broken and it's because second feature has link inside (field hero_subtitle has WYSIWYG editor type)

Answer 1

Seems like one of your ACF fields contain a <a> tag in them.

In HTML you cannot have and <a> tag inside another <a> tag.

Check the ACF fields the_field('feature_item_title') and the_field('hero_subtitle'), check their content, most likely you will find a <a> tag in one of them, remove it and your html will be structured correctly