Pourquoi la balise <img> dans <p>?

<< 1 2

Sujet résolu

2 novembre 2019 à 14:23:54

Personnellement (c'est comme ça que j'ai choisi de coder mes pages, chaque codeur fait ses propres choix), je modifierais votre code comme suit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon CV</title>
</head> (penser à fermer la balise head)
<body>
<h1>Gaëlle</h1>
<p>Déterminée et motivée pour apprendre</p>
<p><a href="images/pas_moi.png"><img src="images/pas_moi_mini.png" alt="ma photo" title="Cliquez pour agrandir"></a></p> (En théorie la balise <a> ne suffit pas car, vous l'apprendrez plus loin dans le cours, <a> est du même genre que <img /> (balises dites "inline"). Dans un code correctement rédigé, ces balises doivent être écrites à l'intérieur d'une autre balise du genre de <p> (balises dites "block"). Ici une balise <div> ferait aussi l'affaire par exemple.)
</body>
</html>
(penser à refermer les balises body et html pour terminer le code)

Si vous faites l'exercice du CV, vous pouvez d'ailleurs télécharger la solution proposée par Mathieu et c'est comme cela qu'il rédige son code. J'espère que cela vous aura aidé.

Lucie Tout Est Possible

EmmanuelBeziat

2 novembre 2019 à 17:00:33

Salut,

@Yuki - Gaelle : Dans ton exemple, tu oublies de refermer </head> avant d'ouvrir <body>. Également, l’attribut title="" doit être sur le lien, pas sur l’image).

Mais au niveau du placement de l’image dans les balises, c’est parfaitement valide et juste, oui.

Edit:

Lucie Tout Est Possible:

(En théorie la balise <a> ne suffit pas car, vous l'apprendrez plus loin dans le cours, <a> est du même genre que <img /> (balises dites "inline"). Dans un code correctement rédigé, ces balises doivent être écrites à l'intérieur d'une autre balise du genre de <p> (balises dites "block")

Mmh, non ;

<a> est une balise de type Contenu, même si son rendu est par défaut en inline. On peut lui faire contenir n'importe quoi, y compris des <p>, des <div>, des <ul>, etc. par opposition aux balises de type Phrasé, comme le sont <span>, <em>, <strong>, etc. https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Catégories_de_contenu

Quand bien même, on n'est absolument pas obligé d'intégrer une image dans une balise quelconque — autre que dans body, évidemment. Ceci est parfaitement valide et tout aussi correctement rédigé :

<body>
  <img src="monimage.jpg alt>
</body>

Ou bien :

<body>
  Du texte libre.
</body>

Et ceci également :

<a href="page.html">
  <article class="item">
    <header class="item-heading">
      <h1>Mon produit</h1>
    </header>

    <div class="item-body">
      <img src="image.jpg" alt>
      Description de mon produit
    </div>

    <footer class="item-footer">
      <div class="item-price">45,55€</div>
      <div class="item-note">18/20</div>
    </footer>
  </article>
</a>

-
Edité par EmmanuelBeziat 2 novembre 2019 à 17:33:04

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

<< 1 2