Partage
  • Partager sur Facebook
  • Partager sur Twitter

Pourquoi la balise <img> dans <p>?

Sujet résolu
    27 avril 2012 à 3:33:54

    Bonjour à tous,

    La question est dans le titre :)

    Dans le tutoriel css et html, il est écrit qu'une balise <img> se met toujours dans une balise <p>. La question est : pourquoi ?

    De plus, cela transforme l'affichage des images qui devient en bloc alors que c'est un élément de type en ligne..
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      27 avril 2012 à 3:46:45

      pour mieux organiser ses paragraphes avec les float et tout je pense, enfin bon personnellement je m'en fou un peu je les met hors des <p> sauf quand vraiment je dois tout bien caser.
      • Partager sur Facebook
      • Partager sur Twitter
        27 avril 2012 à 5:45:58

        Ce doit être une erreur! Parce que regarde sur le site du zéro toute les images ne sont pas dans des paragraphes. ^^
        • Partager sur Facebook
        • Partager sur Twitter
          27 avril 2012 à 7:06:26

          Oui, tu n'es vraiment pas obliger de faire comme ça! :p
          Perso, des fois, je fait comme ça, et d'autres fois, je ne fait pas comme ça.
          • Partager sur Facebook
          • Partager sur Twitter
          Haha                                                                                                                        « I am something, a quote that means nothing. »
            27 avril 2012 à 7:31:03

            Je ne crois pas qu'il s'agisse d'une erreur de Mathieu Nebra ; c'est indiqué à la fois sur le livre, et sur le site. C'était le cas dans l'ancienne version du cours XHTML, c'est toujours le cas dans la version mise à jour HTML5.

            Maintenant si ce n'est pas une règle appliqué sur ce présent, je ne comprends pas trop... "Fais ce que je dis, fais pas ce que je fais" ? :p

            Car dans le cours, il dit pas que c'est recommandé ou que ça peut aider, il dit que c'est obligatoire :

            "Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>)."

            Le passage de ce cours est ici
            , au titre "insertion d'une image.
            • Partager sur Facebook
            • Partager sur Twitter
              27 avril 2012 à 8:59:29

              C'est une erreur. Il faudrait vraiment changer le tuto, parce que cette phrase est fausse.

              (rhah, zut, je voulais donner un lien vers la page concernant les images sur le site du W3C, mais il est down, juste ce matin)
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

                27 avril 2012 à 9:02:24

                Bonjour,
                Il se trouve que Mathieu précise ceci pour les débutants et surtout, pour éviter qu'il n'y ai de quelconque bug dans leurs codes. La plus part du temps, tu ne l'utiliseras pas mais le faire est une bonne habitude à prendre ! Surtout si tu as beaucoup de texte sur ta page. Sachant que dans son exemples il y a du texte, il utilise les balises paragraphes. Personnellement, je les utilises rarement. Mais au début c'est toujours bien de s'en servir pour n'importe qu'elle contenue !
                • Partager sur Facebook
                • Partager sur Twitter
                  27 avril 2012 à 9:13:16

                  Je ne vois en quoi ça aide les débutants de donner des informations fausses. C'est comme d'enseigner la mise en page en tableau avant de passer aux div, "parce que c'est plus simple". Non. C'est juste faux.
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Pas d'aide concernant le code par MP, le forum est là pour ça :)

                    27 avril 2012 à 9:30:25

                    <p> représente un paragraphe.

                    Citation : http://abardel.free.fr/glossaire_stylistique/paragraphe.htm

                    portion de texte, de volume varié, signalée en son début par un renfoncement (ou indentation), c'est-à-dire par un retrait de la ligne par rapport à la justification du texte manuscrit ou imprimé. Ce début en retrait de la première ligne d’un paragraphe est appelé aussi « alinéa », terme qui, par extension, peut désigner le paragraphe lui-même.


                    Donc si l'image a pour vocation d'être présente dans un texte on pourra la mettre dans un paragraphe.

                    Sinon alors on la placera dans l'élément le plus adapté.
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                      27 avril 2012 à 9:38:24

                      Donc on est d'accord pour dire que c'est une erreur de dire que c'est obligatoire? Je retire ça de ma tête?
                      • Partager sur Facebook
                      • Partager sur Twitter
                        27 avril 2012 à 9:49:47

                        Salut,

                        Non, ce n'est pas une erreur !

                        Pour que le code soit valide suivant les spécifications du W3C, en XHTML, les images (de type "inline") doivent être obligatoirement contenues entre des balises de type "Bloc" comme c'est le cas des balises de paragraphe. :)
                        • Partager sur Facebook
                        • Partager sur Twitter
                          27 avril 2012 à 9:57:24

                          Citation : sebmag

                          Salut,

                          Non, ce n'est pas une erreur !

                          Pour que le code soit valide suivant les spécifications du W3C, en XHTML, les images (de type "inline") doivent être obligatoirement contenues entre des balises de type "Bloc" comme c'est le cas des balises de paragraphe. :)


                          Si, c'est une erreur puisque la paragraphe n'est pas la seule balise de type bloc existante.
                          • Partager sur Facebook
                          • Partager sur Twitter
                          Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                            27 avril 2012 à 10:33:30

                            Ah !
                            Donc non il n'est pas obligatoire que <img> soit dans <p>, mais il est obligatoire que <img> soit dans un bloc ? De même que tous les éléments en ligne doivent l'être ?
                            • Partager sur Facebook
                            • Partager sur Twitter
                              27 avril 2012 à 11:59:27

                              Même pas, c'est les éléments blocs qui ne doivent pas se trouver dans des éléments en ligne, exception faite de <body> en XHTML Strict.
                              • Partager sur Facebook
                              • Partager sur Twitter
                              Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                                27 avril 2012 à 12:07:11

                                Je sais qu'on en a déjà parlé, mais je ne retrouve plus : <body> est bien considéré comme balise de type block ?
                                • Partager sur Facebook
                                • Partager sur Twitter

                                Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                  27 avril 2012 à 12:20:05

                                  Oui body est de type block mais il ne peut y avoir d'élément inline comme enfant direct de body.

                                  Donc on ne peut pas faire :
                                  <body><img/></body>
                                  


                                  On doit faire :
                                  <body><p><img/></p></body>
                                  


                                  ou bien sur avec div ou une autre balise block.
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    27 avril 2012 à 12:20:59

                                    Du point de vue de la spéc <body> n'est ni bloc ni en-ligne on dirait. Par contre il se comporte comme un bloc ça c'est certain ^^

                                    @KorangaR ça dépend du doctype spécifié
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                                      27 avril 2012 à 23:10:03

                                      Citation : nightmat

                                      Du point de vue de la spéc <body> n'est ni bloc ni en-ligne on dirait


                                      C'est logique, l'élément body n'appartient à aucun modèle de contenu.

                                      Citation : nightmat

                                      il se comporte comme un bloc ça c'est certain ^^


                                      On parle alors d'un élément de rendu block ;)



                                      Cette catégorisation %block et %inline disparait de HTML5, celui-ci classe les éléments selon leurs sémantiques (body est par exemple considéré comme un sectioning root). Ces éléments se trouvent également dans des groupes d'appartenances qui servent à définir des modèles de contenus et donc déterminer les imbrications autorisées.

                                      Au final, inline et block => rendu => CSS ;)
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        28 avril 2012 à 0:30:31

                                        Bonjour,

                                        Juste pour souligner que la balise <img> peut être enfant direct de <body> dans...

                                        ... du HTML transitional (le fameux Doctype loose)
                                        cf http://http://fr.selfhtml.org/html/ref [...] ments.htm#img

                                        On peut même faire ce qui suit avec ce Doctype tout en restant valide !
                                        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                                           "http://www.w3.org/TR/html4/loose.dtd">
                                        <title</title<p>
                                        

                                        Faites un copié/collé dans le validateur du w3c pour vérifier


                                        David
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          20 octobre 2017 à 15:14:42

                                          Hola,

                                          je déterre le sujet car 5 ans après, le tuto (la phrase en question tout du moins) n'a pas changé d'un poil et fait que j'atterris ici...sans d'ailleurs réellement comprendre la "solution" apportée.

                                          Idéalement et en tant qu'apprenant, j'aimerais voir dans le tuto une raison apparaître derrière le fameux "Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>)."

                                          Ou alors voir cette phrase supprimée et ainsi ne pas m'embrouiller la tête avec des questions potentiellement inutiles.

                                          ---

                                          Edit avec la suite de la leçon plus bas:

                                          Je ne vois pas vraiment de changement. Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans une figure ?

                                          Bonne question ! Tout dépend de ce que votre image apporte au texte :

                                          • Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image dans un paragraphe.

                                          • Si elle apporte une information : placez l'image dans une figure.

                                          La balise  <figure>a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple.

                                          -
                                          Edité par aio 20 octobre 2017 à 15:31:28

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            20 octobre 2017 à 16:00:13

                                            En effet, toujours pas de modification du tuto, et c'est nul… Je vais faire remonter, mais les devs sont assez occupé⋅e⋅s j'imagine.

                                            • Partager sur Facebook
                                            • Partager sur Twitter

                                            Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                              27 octobre 2019 à 12:13:20

                                              J'arrive ici des années après car je me suis posée la même question et je comprends pourquoi le cours reste inchangé.

                                              Donc au cas où quelqu'un d'autre arriverait jusqu'ici :

                                              A ce moment du cours (Partie 1, Chapitre 6, "Insérez des images"), Mathieu n'a pas encore introduit les notions "inline" et "block". Ces notions ne sont introduites que dans la Partie 2, Chapitre 1, "Mettez en place le CSS". Il est donc logique que par soucis de simplification Matthieu indique à ce moment là la balise block <p> qu'on vient juste d'apprendre.

                                              La notion est ensuite entièrement expliquée dans la Partie 3, Chapitre 2, "Découvrez le modèle des boîtes" avec l'explication finale : "une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block." Et quelques chapitres plus loin, dans le "TP : Créez un site pas à pas", Mathieu place des <img /> dans diverses balises block, entre autre <div/>, <h1> et <p>.

                                              Le cours n'est donc pas faux, il est simplement très bien construit dans son approche progressive pour des débutants.

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                              Lucie Tout Est Possible
                                                27 octobre 2019 à 12:35:36

                                                Moui…

                                                Sachant que depuis HTML5 il n'y a plus de notion de "balise block" ou "balise inline" (c'est même dit dans le cours https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606168-decouvrez-le-modele-des-boites#/id/r-4053758 ), je trouve ça moyen. Oui, c'est une simplification. Mais c'est faux.

                                                Je suis pour enseigner des choses pas vraiment exactes pour qu'elles soient compréhensibles (exemple : le modèle des "couches" des électrons de l'atome en physique, parce que la physique quantique en collège, oué, c'est compliqué), mais là… franchement rien d'inconcevable, d'inexplicable facilement. Le cours *est* faux depuis HTML5, depuis le 22 juin 2012.

                                                La phrase précise du cours est :

                                                Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>).

                                                Si c'était pour enseigner la différence entre block et inline, dans ce cas, il aurait fallu dire quelque chose comme :

                                                Pour l'instant, nous allons placer nos images à l'intérieur d'un paragraphe (<p></p>), afin de les séparer du reste du texte.

                                                Ici, ce n'est pas le cas. À aucun moment.

                                                Non, c'est juste 1) faux (et ça l'a toujours été, cette contrainte précise n'a jamais existé dans le HTML), 2) obsolète, puisque la notion de block et inline n'est que dans le CSS depuis des années. C'est juste… pas mis à jour, depuis des années.

                                                • Partager sur Facebook
                                                • Partager sur Twitter

                                                Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                                  27 octobre 2019 à 14:50:35

                                                  Je me permets de répondre pour éviter que des personnes soient induites en erreur par votre commentaire. Votre phrase de remplacement est fausse, le but n'est pas de séparer l'image du reste du texte, une image peut tout à fait être en plein milieu d'un paragraphe de texte.

                                                  Ceci n'est pas un débat, c'est une page d'aide. Je n'irai pas plus loin dans la conversation, j'ai exprimé ma compréhension du sujet, qui est différente des messages postés précédemment, et qui me semble utile pour aider d'autres personnes. Je ne vois pas l'utilité, contrairement à vous, de faire un post supplémentaire qui n'apporte rien à ce qui a été dit précédemment. Si vous pensez pouvoir faire mieux que Matthieu je vous suggère de créer votre propre site de cours.

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Lucie Tout Est Possible
                                                    27 octobre 2019 à 18:41:53

                                                    Salut,

                                                    Si vous pensez pouvoir faire mieux que Matthieu je vous suggère de créer votre propre site de cours.

                                                    Alors c'est marrant, parce que c'est justement ce qu'elles et ils ont fait. Et en tant que professionnels du milieu, nous sommes nombreux à en plébisciter la qualité des cours et à louer la démarche bien plus communautaire et ouverte du site, en plus d'y participer nous-mêmes pour les améliorer régulièrement. Et quand bien même si ça n'avait pas été fait, ce n'est pas un argument recevable.

                                                    Du reste, Lamecarlate n'a pas voulu dire qu'une image devait être séparée d'un texte ; sa phrase de remplacement sert à indiquer que dans le cas où on aurait ça :

                                                    <p><img src="" alt></p>

                                                    Alors dire qu'on le fait pour séparer l'image du reste du texte serait bien plus pertinent. Et je suis d'accord également avec elle pour dire que non, ce cours est loin d'être bien construit ; pour preuve, on est très régulièrement obligé d'expliquer aux gens qui l'ont suivi que non, on n'est pas obligé de mettre une image dans un paragraphe, parce qu'à aucun moment le cours ne déconstruit cette affirmation. Il ne s'agit donc pas d'un "processus" d'apprentissage, mais simplement d'une erreur, qui a été signalée plusieurs centaines de fois.

                                                    C'est d'autant plus évident qu'il suffirait de ne PAS dire ça pour que ce soit plus simple pour un débutant. Et ayant moi-même été formateur en web pendant près de 5 ans, aucun de mes élèves n'a jamais cru qu'il était nécessaire de mettre une image dans un paragraphe. Parce que ça n'a juste aucun sens.

                                                    Alors on peut discuter deux heures sur la meilleure tournure de phrase à adopter, mais une chose est certaine : il est absolument faut de dire qu'une image doit être insérée dans une balise paragraphe.

                                                    -
                                                    Edité par EmmanuelBeziat 27 octobre 2019 à 18:46:11

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter

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

                                                      28 octobre 2019 à 12:59:34

                                                      Bonjour,

                                                      L'apprentissage doit-il se faire dans les détails ou survoler globalement les choses puis affiner parla suite ?

                                                      Faut-il enseigner à un enfant du primaire qu'un nombre ne peut être négatif durant sa scolarité pour qu'il apprenne à son entrée au collège que ce n'est pas le cas.

                                                      Faut-il enseigner à un collégien qu'un nombre multiplié par lui-même ne peut être négatif, partir sur cette base un certain nombre d'année pour lui apprendre au bout du compte que cette affirmation est fausse.

                                                      En réalité,je pense qu'un élève au bout du compte doit pouvoir extrapoler ce qu'on lui enseigne et ne pas rester sur ses acquis : si un sage vous montre la lune, tout enseignant espère que vous n'allez pas rester à observer son doigt.

                                                      Donc je suis POUR dire que "une image doit être insérée dans une balise paragraphe" pour pouvoir nuancer par la suite : c'est UN cours de html, ce n'est pas LE cours de html

                                                      David

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        28 octobre 2019 à 18:29:26

                                                        Mais encore une fois, le cours ne nuance pas par la suite.

                                                        Et il n'est pas plus compliqué pour quelqu'un de comprendre qu'une image peut s'insérer dans n'importe quelle balise que seulement dans un paragraphe. Oui, mettre de côtés certains aspects trop complexes pour un débutant est une méthode pédagogique. Mais il n'y a rien de complexe à éluder ici.

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

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

                                                          2 novembre 2019 à 11:02:01

                                                          Bonjour,

                                                          je suis perdue du coup avec tout ça...

                                                          Si je fais ça, est ce que c'est bon ou pas ?

                                                          <!DOCTYPE html>

                                                          <html>

                                                            <head>

                                                           <meta charset="utf-8">

                                                           <title>Mon CV</title>

                                                            <body>

                                                           <h1>Gaëlle </h1>

                                                           <p>Déterminée et motivée pour apprendre</p>

                                                              <a href="images/pas_moi.png"><img src="images/pas_moi_mini.png" alt="ma photo" title="Cliquez pour agrandir"></a>

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          Pourquoi la balise <img> dans <p>?

                                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                          • Editeur
                                                          • Markdown