5156 sujets

Sémantique web et HTML

Bonjour
je cherche à améliorer la navigation sur un site.
J'ai utilisé <details> et <summary>,
Dans summary, j'ai un <div> avec un résumé du contenu et parfois avec un logo.
<details>			
	<summary>					
		<div>
				<img src="monlogo.png" alt="">
				Lorem ipsum dolor sit. Metus in aptent torquent egestas orci.
		</div>
	</summary>		
	Leo, gravida proin, cum nonummy inceptos vivamus magnis at fringilla at, habitasse diam, quisque in. Et donec bibendum vestibulum cubilia. 
</details>	


cela fonctionne parfaitement comme je le voulais, mais retourne une erreur w3c :
child not allowed in this context.

J'ai essayé de modifier, par exemple en utilisant span au lieu de div, même erreur...

Je suis preneur de vos idées.

Merci
Phil
Modérateur
Hello,
Pourquoi ne pas simplement supprimer ce <div> ou <span> ?
À mon sens, il n'amène rien et tu simplifieras ton code en l'enlevant. (et puis je pense que tu passeras la validation W3C Smiley smile )
Bonjour Phil,

La balise <summary> doit servir uniquement d'intitulé à <details> et être pertinente par rapport au contenu de son parent. Elle ne doit pas contenir de div ou autre (d'où l'erreur w3c).
Dans votre cas il faut donc sortir le logo de <summary> et laisser uniquement du texte sans balise supplémentaire.
Modifié par Friesstyle (09 Jan 2020 - 13:59)
Bonjour
Smiley smile J'ai fini par comprendre le problème:
summary n'accepte que
SOIT du "Heading content" (h1, h2, h3...)
SOIT du "Phrasing content" (avec balisage de contenu possible)

Mais pas les deux en même temps... Smiley decu dommage, c'était bien pratique d'offrir un petit résumé du contenu au <summary>

Merci en particulier pour le dernier lien, c'est l'info que je ne réussissais pas à trouver!
Oui c'est cela, prends ce html et regardes le il est 100% valide WC3


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fffffffffffffffffffff</title>
</head><body>
<details>		
	<summary>
				<img src="test.jpg" alt=""><br />
				Lorem ipsum dolor sit. Metus in aptent torquent egestas orci
	</summary>	
	Leo, gravida proin, cum nonummy inceptos vivamus magnis at fringilla at, habitasse diam, quisque in. Et donec bibendum vestibulum cubilia.
</details>
</body></html>