Bonjour,

Je commence à apprendre le HTML et lorsque je souhaite afficher une image miniature cliquable pour ouvrir l'image originale dans un nouvel onglet, rien ne se passe.

Voici le snippet en question :

<a href="contenu/elephant_originale.jpg" target="_blank"> </a> <img src="contenu/elephant_mini.jpg" title="Cliquez pour afficher l'originale" alt="texte alternatif" /> <br/>

Lorsque je supprime le chevron fermant de la balise "a href" ça fonctionne parfaitement. Mais ce n'est pas normal de ne pas pouvoir fermer cette balise selon moi. D'ailleurs Visual Studio m'indique bien qu'il y a un problème et que cette balise devrait être fermée.

En résumé le snippet qui fonctionne est le suivant :

<a href="contenu/elephant_originale.jpg" target="_blank" </a> <img src="contenu/elephant_mini.jpg" title="Cliquez pour afficher l'originale" alt="texte alternatif" /> <br/>

Alors que je m'attends à ce qu'il fonctionne ainsi (avec le chevron fermant) : 

<a href="contenu/elephant_originale.jpg" target="_blank"> </a> <img src="contenu/elephant_mini.jpg" title="Cliquez pour afficher l'originale" alt="texte alternatif" /> <br/>

Si l'un de vous connait pourquoi du comment je suis intéressé.

Merci

Edit : J'ai finalement une solution logique qui fonctionne. C'est certainement la manière de faire d'ailleurs.

<a href="contenu/elephant_originale.jpg" target="_blank"> <img src="contenu/elephant_mini.jpg" title="Cliquez pour afficher l'originale" alt="texte alternatif" /> </a> <br/>

Apparement il faut inclure la balise "img" dans la balise "a href".

-
Edité par Mad_Life 20 décembre 2023 à 14:24:37

Bonjour,

ravie que tu aies trouvé par toi-même, bravo !

Et oui, en effet, HTML est essentiellement formé par l'imbrication d'éléments entre eux : si tu veux mettre quelque chose dans un lien, il faut que ça soit *dedans*

Les moteurs de rendu HTML présents dans les navigateurs sont intelligents. Au point que si tu ne refermes pas une balises, ils sont capable de le faire pour toi.

Ainsi, une faute telle que 

<a href="contenu/elephant_originale.jpg" target="_blank" </a> <img ... />

... sera en réalité traduite par le moteur pour donner ceci :

<a href="contenu/elephant_originale.jpg" target="_blank" </a> <img ... />
</a>

Le moteur de rendu HTML considère la portion suivante comme inutile : </a et va donc l'ignorer. Ensuite, afin de conserver l'ordre de fermeture des éléments manquants, il va ajouter automatiquement un tag fermant à la fin du document, ce qui explique ton résultat.

Cependant il va de soi que le code correctement formaté doit être :

<a href="contenu/elephant_originale.jpg" target="_blank">
    <img ... />
</a>