5100 sujets

Sémantique web et HTML

Modérateur
Bonjour à tous,
J'ai la structure HTML suivante :
<div id="sticky">
	<article id="une" role="article">
		<div class="une-illustration"></div>
		<div class="une-text">
			<a href="http://lien-vers-ressource.html">
				<header>
					<div class="entry-header">
						<p class="une-date">03 septembre</p>
						<p class="une-categories"><a href="cat-4">catégorie 4</a></p>
					</div>
					<h1>TITRE</h1>
					<div class="une-blog-name">Nom du blog</div>
					<div class="une-tools"><span class="read-time">lecture 4 	min.</span><span class="views">140 vues</span></div>
				</header>
			</a>
		</div>
	</article>
</div><!-- End #sticky -->

Je sais qu'à présent on peut englober des éléments blocs dans un élément <a> depuis HTML5. Or le rendu dans Firefox est le suivant :
<div id="sticky">
	<article id="une" role="article">
		<div class="une-illustration"></div>
		<div class="une-text">
			<a href="http://lien-vers-ressource.html">
				</a><header><a href="http://lien-vers-ressource.html">
					</a><div class="entry-header"><a href="http://lien-vers-ressource.html">
						<p class="une-date">03 septembre</p>
						</a><p class="une-categories"><a href="http://lien-vers-ressource.html"></a><a href="cat-4">Catégorie 4</a></p>
					</div>
					<h1><a href="http://lien-vers-ressource.html">TITRE</a></h1>
					<div class="une-blog-name">Nom du blog</div>
					<div class="une-tools"><span class="read-time">lecture 4 	min.</span><span class="views">140 vues</span></div>
				</header>
		</div>
	</article>
</div>

Comportement vraiment étrange... Un coup, le lien se trouve sur un noeud texte et puis il se trouve autour de deux éléments blocs... Vraiment pas cohérent tout ça ! Le but pour moi est de rendre la div.une-text cliquable dans son intégralité (et pas uniquement sur le texte), en évitant d'utiliser JavaScript de préférence (maintenant si ce n'est pas possible autrement...). J'ai pas vérifié avec Chrome ou d'autres navigateurs...
Merci d'avance pour votre partage d'expérience. Smiley smile
Modifié par jojaba (07 Dec 2019 - 16:55)
Ton code contient un <a> dans un <a>
Quand quelqu'un clique sur "catégorie 4" le navigateur ne sait pas s'il faut afficher "cat-4" ou "http://lien-vers-ressource.html"
Modérateur
Merci pour cette remarque pertinente.
J'ai tenté sans le lien pour la catégorie et j'obtiens ça :
<div class="une-text">
   <a href="http://lien-vers-ressource.html">
   </a>
   <header>
      <a href="http://lien-vers-ressource.html">
         <div class="entry-header">
             <p class="une-date">03 septembre</p>
             <p class="une-categories">Catégorie 04</p>
         </div>
      </a>
      <h1>
      <a href="http://lien-vers-ressource.html"></a>
      <a href="http://lien-vers-ressource.html">TITRE</a>
      </h1>
      <div class="une-blog-name">Nom du blog</div>
      <div class="une-tools"><span class="read-time">lecture 4 	min.</span><span class="views">140 vues</span></div>
   </header>
</div>

C'est pas beaucoup mieux !
Pour Chrome j'obtiens exactement le même résultat...
....Edit...
Ah ben finalement, j'ai réussi à résoudre le problème... Il fallait placer le <a> à l'extérieur du div.une-text.
Voir ici pour tester : https://www.w3schools.com/code/tryit.asp?filename=G0OTKL1MBBWO

Merci Smiley smile
Modifié par jojaba (07 Dec 2019 - 21:36)
Meilleure solution