I'm working with a codebase where there is a list of articles rendered inside a section element that is wrapped by a link, like this:
<a href="link/to/article">
<section>
<h2>Article title</h2>
<img src="path/to/article/img">
<p>Short description</p>
</section>
</a>
The content inside the section tag is the title, the image and a short description. All the article previews are rendered like this in a tabular/grid-like layout. When a section is clicked, the whole contents of the article are rendered in a new page.
The reason for this is that the whole section area should be clickable. Since this markup doesn't seem too semantic for me, I was wondering if this code is correct, and if it is not, is there a better approach to make a whole section clickable?