How to make a whole <section> element's area clickable?

Question

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?

Answer 1

What you've done is fine and correct and works well. The W3C even states:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

They include an example similar to yours.