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

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.

Answer 2

You can use JQuery as such to achieve that.....No need using the link tag
<section id="clickable_section">
<h2>article title</h2>
<img src="article/img">
<p>Short description</p>
</section>
<script>
$(document).ready(function() {
$("#clickable_section").click(function() {
//Do something....
//Continue doing something,like redirecting the user to the new page
});
});
</script>

Answer 3

Having an anchor work like that is pretty kludgey. Might be better to do something like this:
html:
<section data-link="https://www.google.com">
<h2>article title</h2>
<img src="path/to/article/img">
<p>Short description</p>
</section>
css:
section {
cursor: pointer;
}
javascript (jQuery):
$('section').on('click', function(e){
e.preventDefault();
window.location.href=$(this).data('link');
})