Comment rendre une zone entière de l'élément <section> cliquable?

Question

Je travaille avec une base de code où il y a une liste d'articles rendus dans un élément de section qui est enveloppé par un lien, comme celui-ci:

<a href="link/to/article"> 
    <section> 
     <h2>Article title</h2> 
     <img src="path/to/article/img"> 
     <p>Short description</p> 
    </section> 
</a> 

Le contenu dans la balise de section est le titre, l'image et une courte description. Tous les aperçus d'article sont rendus comme ceci dans une disposition tabulaire/comme une grille. Lorsqu'une section est cliquée, tout le contenu de l'article est rendu dans une nouvelle page.

La raison en est que la zone de section entière doit être cliquable. Comme ce balisage ne me semble pas trop sémantique, je me demandais si ce code était correct, et si ce n'est pas le cas, y a-t-il une meilleure approche pour rendre une section entière cliquable?

Answer 1

Vous pouvez utiliser JQuery en tant que telle pour y parvenir ..... Pas besoin en utilisant la balise link

 

 
    <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 2

Avoir un travail d'ancrage comme ça est assez kludgey. Peut-être mieux de faire quelque chose comme ceci:

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'); 
}) 

Answer 3

Ce que vous avez fait est très bien et corrige et fonctionne bien. The W3C even states:

L'élément peut être enroulé autour des paragraphes entiers, listes, tableaux, et ainsi de suite, sections même entières, tant qu'il n'y a pas de contenu interactif à l'intérieur (par exemple, des boutons ou autres liens) .

Ils comprennent un exemple similaire au vôtre.