Why my wordpress loop modifies my html code? - php

Question

for the first time I'm facing a problem that I can't explain. I'm creating a simple wordpress loop for a gallery but, I don't know why, the loop change my html code inside the loop.
At first, this is what I wrote :
<?php query_posts('posts_per_page=9');
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<?php
$post_image_id = get_post_thumbnail_id($post_to_use->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'large', false);
if ($thumbnail)
(string)$thumbnail = $thumbnail[0];
} else {
$thumbnail = './assets/no-picture.jpg';
}
?>
<article class="col-lg-4 col-sm-6">
<a href="#Modal1" data-toggle="modal" class="gallery-box">
<img src="<?php echo $thumbnail; ?>" class="img-responsive" alt="Image">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
<h2><?php the_title(); ?></h2>
<h6 class='wide-space'><?php the_category(); ?></h6>
<i class="icon-lg ion-ios-play-outline"></i>
</div>
</div>
</div>
</a>
</article>
<?php endwhile; ?>
<?php endif; ?>
But when it's launched online, the code inside the loop become this :
<article class="col-lg-4 col-sm-6">
<a href="#Modal1" data-toggle="modal" class="gallery-box">
<img src="https://labelleequipeproductions.com/wp-content/uploads/2020/08/lessines-terre-de-developpement.jpg" class="img-responsive" alt="Image">
</a>
<div class="gallery-box-caption">
<div class="gallery-box-content">
<a href="#Modal1" data-toggle="modal" class="gallery-box">
</a>
<div>
<a href="#Modal1" data-toggle="modal" class="gallery-box">
<h2>Lessines, Terre de développement</h2>
</a>
<h6 class="wide-space">
<ul class="post-categories">
<li>
Corporate
</li>
</ul>
</h6>
<i class="icon-lg ion-ios-play-outline"></i>
</div>
</div>
</div>
</article>
Are there someone who could help me on this ? I never seen this before and I often use this kind of loop.