Nice one for using WordPress, but this is a straight-up HTML question. Nontheless…
<div class="home-post-header">
<h2>
<a href="https://wordpress.stackexchange.com/questions/105657/<?php the_permalink() ?>"><?php the_title() ?></a>
</h2>
</div>
h2
‘s are considered block-level, whereas a
& span
are inline. Standards dictate that a block-level element cannot be nested inside an inline one. So use a div
instead, & place the a
inside the h2
.
N.B: With HTML5, nesting block-level elements inside a
is valid, but IMO use only when you need to wrap a link around several elements (for example, a heading with an image or snippet).