Wordpress tag auto close - wordpress

Question

Wordpress corrects the html markup in posts and also in template specific files.
I'm working on a template and what I'm trying to achieve is wrap a div in <a href"#"></a> tag.
Before the foreach loop there is placed, then some more php and html markup and right before the foreach loop ends I paste in the ending tag .
What wordpress doeas it automatically adds the ending tag right after a href string tag, removes the correctly placed ending tag making the link empty.
He're is what I type:
<li <?php if (get_option('square_portfolio_filter') != "true") { ?> data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>" <?php ; } ?>>
<a href="#">
<div class="thumbs-animate">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(array(255,191), array('title' => ''.get_the_title().''));
}
?>
<div class="details">
<h5><?php the_title(); ?></h5>
<p><?php content('15'); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if(get_option('square_view_project_link')!="") {
echo get_option('square_view_project_link');
}else {
_e( 'View Project', 'square_lang' );
}
?>
</div>
</div>
</a>
</li>
And here is what Wordpress ends up saving:
<li <?php if (get_option('square_portfolio_filter') != "true") { ?> data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>" <?php ; } ?>>
<div class="thumbs-animate">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(array(255,191), array('title' => ''.get_the_title().''));
}
?>
<div class="details">
<h5><?php the_title(); ?></h5>
<p><?php content('15'); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if(get_option('square_view_project_link')!="") {
echo get_option('square_view_project_link');
}else {
_e( 'View Project', 'square_lang' );
}
?>
</div>
</div>
</li>
I temporarily fixed the issue using some javascript code but its neither good practice nor what I want to have:
onclick="location.href='<?php the_permalink();?>';" style="cursor:pointer;"

Answer 1

Just wanted to comment that wrapping a block-level element is inside an inline element is perfectly fine in HTML 5.
<div>...</div> is valid html 5.

Answer 2

<div>...</div> is invalid HTML. You're not supposed to have a block-level element (div) inside of an inline element (a). WordPress is likely trying to protect you from that.
I can't tell if using # as your href is part of the actual code or just something you did for simplification, but if that is the actual code and you're attaching an onclick or something to the a, you could instead attach that to the div and it would work just as well.