Wordpress the_permalink() closes tag? - php

Question

Hellow,
im trying to code a custom theme for my wordpress site. im trying to output 5 of my posts and i want to wrap them into a link. however when i foreach() through the posts and want to wrap my html in an tag with the permalink it wont work.
The code i wrote:
<?php
global $post;
$myposts = get_posts( array(
'posts_per_page' => 5,
) );
if ( $myposts ) {
foreach ( $myposts as $post ) :
setup_postdata( $post ); ?>
<div class="container-fluid">
<a class="post-link" href="<?php echo the_permalink();?>">
<div class="post-post p-5">
<div class="row">
<div class="col-md-12">
<?php the_category('<p></p>'); ?>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3><?php the_title(); ?></h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small><?php the_author(); ?></small>
</div>
</div>
</div>
</a>
</div>
<?php
endforeach;
wp_reset_postdata();
}
?>
But the code which ends up on the site is complete junk and it closes the a tag before the next div. what did i do wrong?
The code which lands on the site:
<div class="container-fluid">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="post-post p-5">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="row">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
<div class="col-md-12">
<a class="post-link" href="http://localhost/wptheme/index.php/2021/01/11/oeoeoeoeoeoe/">
</a>
Allgemein </div>
</div>
<div class="row">
<div class="col-md-12">
<h3>öööööö</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small>root</small>
</div>
</div>
</div>
</div>

Answer 1

WordPress' the_permalink() function prints the link with the tags.
Use get_the_permalink() function instead of the_permalink() for "echo"ing the link wherever needed.

Answer 2

It looks like you are trying to place an anker inside an anker this is not allowed, the output of your html is likely parsed / interpreted by your browser try looking at the sourcecode instead of the html after parsing by your browser. in chrome you can do so by visiting view-source:http://yourdomain.com
Not sure for other browsers, you can try right clicking in the page and select view source