Bonjour,

Je débute en HTML/CSS en ayant décidé de suivre la formation consacrée à l'appentissage de ces deux langages web. Seulement, j'ai atteint la section TP du cours et me heurte à plusieurs problèmes, dont un qui m'ennuie profondément.

Dans la section "Images" du cours, on nous dit que "Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>)." Or, je remarque à plusieurs reprises dans le code HTML fourni au début de cette page (https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/tp-creation-d-un-site-pas-a-pas)que tantôt des <img> se retrouvent à l'intérieur de <div>, tantôt à l'intérieur de <p>, tantôt directement à l'intérieur d'autres blocks comme <aside>...

Donc, voilà, je ne sais plus trop quoi penser. Pas faute d'avoir recherché longtemps sur le web et même sur les forums d'OpenClassrooms, mais les réponses ne sont toujours que partielles.

Très clairement : quelle(s) est (sont) la (les) différence(s) sémantique(s) et d'usage entre une balise <p> et une balise <div> ET quel parent est plus adapté à quelle situation pour intégrer une image ?

Merci à l'avance

-
Edité par Urpsis 29 août 2016 à 21:38:29

Tout a fait il est dit dans les cours de mettre les images dans des balises <p></p>  pour une raison qui est a savoir : Le tag <img/> est une balise de type inline , c'est a dire quelle se positionne sans mettre de retour a la ligne.

Pratiquement tu peux mettre ta balise <img/> la ou tu veux mais une question de positionnement le cours de conseils de la mettre dans une balise <p> </p>

Le point commun entre la balise <p> </p> , <div> </div> , ce qu'ils sont de type block donc ils mettent une ligne en haut et un retour a la ligne.

• <p> </p> Pour principalement du texte
• <div></div> Pour du contenu , tout ce que tu veux

Choisi la balise <p> </p> pour tes images

-
Edité par Malnux Starck 29 août 2016 à 21:50:25

Salut,

C'est simple, la différence entre <div> et <p> c'est que <div> est une balise universelle; elle n'a pas vraiment de sens on l'utilise que quand aucune autre balise ne convient, généralement pour construire les designs. Alors que la balise <p> sert a définir un paragraphe.

Et pour <img> c'est une balise de type inline, donc par définition il faut qu'elle soit à l'intérieur d'un block (comme <div> ou bien <p>...), mais des fois pour raccourcir un peut le code on a tendance à l'utiliser tout seule.

Donc, si j'ai bien compris, cela intégrer une <img> au sein d'un <p> tiendrait plus du conventionnel qu'autre chose ?

Voici un extrait du code dont je vous parlais :

<header>
                <div id="titre_principal">
                    <div id="logo">
                        <img src="images/zozor_logo.png" alt="Logo de Zozor" />
                        <h1>Zozor</h1>    
                    </div>
                    <h2>Carnets de voyage</h2>
                </div>
</header>

La parenté directe <div> <img> est-elle perturbante ?

-
Edité par Urpsis 29 août 2016 à 22:03:18

<header>
                <div id="titre_principal">
                    <div id="logo">
                         <p>
                        <img src="images/zozor_logo.png" alt="Logo de Zozor" />
</p>
                        <h1>Zozor</h1>   
                    </div>
                    <h2>Carnets de voyage</h2>
                </div>
</header>

h1 est de type block, ton image va rester en haut et ton h1 en bas, mais comme il vont se positionner l'un sur l'autre et tu pourra agir sur leurs positionement

img n'a pas de parent prédéfini.

Mis à part le head, qui ne doit pas recevoir de contenu, html, qui ne peut contenir que les balises head et body, et certaines balises qui ne peuvent avoir qu'un seul type d'enfant (ul, ol dl, table, tr, etc.) parce que ce sont des éléments qui ne définissent que partiellement une structure (ul a besoin de li, tr a besoin de td, etc.), tu as le droit de mettre une image n'importe où, même directement comme enfant de body, sans aucune sémantique. Une image c'est une image. C'est suffisant.

Maintenant, avec HTML5 on met souvent les images dans une balise figure quand on veut écrire une légende (en utilisant figcaption) mais c'est un cas très spécifique et il ne faut surtout pas s'amuser à mettre des balises figure partout sous prétexte qu'on utilise des images. D'ailleurs, entre nous, si ton image est décorative, ne la met pas dans le HTML. Tu peux l'utiliser en background, utiliser un pseudo-élément.. il y a plein de façon d'intégrer une image à une page. La balise img ne sert que quand il s'agit d'un contenu (ta page parle de l'alimentation des chats et on voit une photo d'un chat qui mange avec écrit en dessous "il est trop mignon mon chat quand il mange désolé je voulais mettre la photo de mon chat bon j'arrête avec les digressions on reprend, allez c'est parti, on se motive, revenons à nos moutons, ne prenons pas racine, en avant Guinguanp, pierre qui roule n'amasse pas mousse").

Je n'ai pas lu le tuto en question mais ça m'étonnerait qu'on t'encourage à utiliser un élément p juste pour que ton image passe à la ligne, parce que ça doit se faire en CSS (avec display: block;), à moins que le tuto "simplifie" un peu.

p n'est en aucun cas plus indiqué pour une image qu'un div ou n'importe quoi d'autre. p c'est idéalement pour du contenu textuel, c'est le corps du message, et c'est tout. On peut avoir une image dedans (c'est lié au contenu du paragraphe, pourquoi pas), mais à aucun moment il n'est plus logique d'utiliser un paragraphe pour placer une image qu'autre chose. C'est de la mauvaise sémantique que de vouloir absolument utiliser une balise qui a un sens pour faire quelque chose qui n'en a pas. On voit souvent ça dans les formulaires : des gens qui mettent des p partout pour avoir des retours à la ligne parce que ça les fait stresser de voir des input dans des div ou autre... Ce n'est pas la fin du monde, parce que la balise p est quand même relativement faible sémantiquement (on peut mettre quasiment ce qu'on veut dedans tant que c'est unline, ce n'est pas exclusivement textuel) mais ce n'est pas une bonne pratique.

div, ça ne veut rien dire, ça n'affecte pas le sens de la page. C'est aussi bien d'en avoir que de ne pas en avoir, c'est juste pratique.

Wow, merci pour cette réponse étoffée !

Je peux désormais déstresser sur l'utilisation "obligatoire" du <p> pour les images. C'était sans doute pour bien faire comprendre que l'élément est avant tout inline. Mais apparemment, comme tu dis, <img> serait une balise à part qui accepte un large éventail de parents.

Merci pour ces précieuses et utiles informations !

En HTML5 la distinction entre inline et block en HTML a été abandonnée. C'est toujours valable en CSS, donc on peut dire que img est de type inline parce que c'est son tyle CSS par défaut, mais ce n'est pas une propriété intrinsèque de la balise img, plutôt une convention d'affichage, et ça peut évidemment se changer.

Un peu de lecture : https://www.w3.org/TR/html5/dom.html#content-models

On voir que la distinction est la suivante :

• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content

C'est assez éloigné de l'histoire inline/block. Il est valide de mettre un h1 dans une balise a par exemple (oui c'est bizarre mais je crois que c'est le seul truc vraiment chelou du HTML5 en terme de hiérarchie)

J'ajoute qu'il est inutile de mettre des paragraphes à tort et à travers. On utilise la balise paragraphe pour faire des paragraphes, c'est à dire scinder un bloc de texte en plusieurs parties distinctes. Si vous n'avez qu'une ligne, ça à autant d'intérêt que de faire une liste avec un seul élément : aucun.

Pas tout à fait d'accord une liste avec un seul élément, ça peut être une liste qui en avait plusieurs ou qui peut en avoir plusieurs et qui dans ce cas précis n'en a qu'un. Quand on voit un seul item de liste on sait qu'il s'agit d'un élément qui peut potentiellement se retrouver au milieu d'autres, et ça c'est plutôt intéressant comme information, même si visuellement, dans certains cas, ça peut sembler bizarre (un texte en prose est un mauvais exemple, or c'est souvent celui auquel on pense. Je ne suis pas sûr que Victor Hugo utilisait des bullet-points mais plutôt des virgules et point-virgules) .

Typiquement, si tu fais un sommaire à plusieurs niveaux de titres, ce serait étrange qu'une partie n'ayant qu'une sous-partie soit traitée différemment des autres. Ou encore, si tu as des éléments qui peuvent subir un drag and drop (imaginons un inventaire dans un jeu, avec d'un côté un coffre et de l'autre l'inventaire de ton personnage), ça a du sens que, même s'il ne reste plus qu'un objet dans l'inventaire du coffre, on considère quand même qu'il s'agit d'une liste de taille 1. On peut même avoir une liste de taille 0. Techniquement un inventaire c'est une liste, et on peut très bien dresser un inventaire et se retrouver avec zéro objets, ça n'a rien de choquant (même si c'est un peu la misère )

Pour p, j'aurais la même réflexion. Il s'agit d'un texte : il n'a qu'un seul paragraphe ? C'est pas grave, ça reste un paragraphe, on utilise p quand même.

Pour moi, c'est surtout une question de contexte. Évidemment que dans un sommaire, il est pertinent de mettre une liste, puisqu'il s'agit, stricto sensu, d'une liste. Même si une partie du sommaire n'a qu'un élément, il fait partie d'un sommaire.

Mais je persiste : je trouve la balise <p> utilisée à tort et à travers. Rien que dans l'exemple du cours de ce site, où il est dit (à tort) qu'une image doit se trouver dans ladite balise. On retrouve régulièrement sur ce forum des bouts de codes de ce style :

<h1>Bienvenue sur mon site</h1>
<p><img src="photo.jpg" alt=""></p>

<section>
...

En quoi son utilisation est-elle justifiée ? Elle est employée comme une balise structurante, ce qu'elle n'est pas. Ce n'est pas invalide, ce n'est pas interdit, mais c'est aussi pertinent que… d'utiliser la balise label ?

D'autant que, très souvent, dans ce genre de cas d'utilisation (je le vois au moins une fois dans chaque projet sur lequel je dois mettre les pattes), on va avoir tendance à vouloir supprimer la marge automatique du paragraphe, et donc rajouter une couche de CSS inutile pour corriger un problème qu'il aurait suffit de ne pas créer.

Typiquement, c'est à chaque fois ce que je trouve sur les trucs comme ça :

une div pour faire le bloc, un <p> dedans, et du CSS inutile pour lui enlever son margin.

Donc oui, j'abonde dans ton sens : quand c'est un paragraphe, on utilise une balise paragraphe. Je dis juste qu'il faut arrêter d'en mettre sur ce qui n'est pas un paragraphe.

Je comprends ce que tu veux dire mais on a un problème de définition sur ce qu'est un paragraphe et sur la valeur sémantique de p. Pour toi un paragraphe  délimite des sections dans un texte en prose, or il y a un problème : il n'existe aucune balise en HTML qui définit un texte en prose. Explique-moi comment une balise dont le rôle serait de délimiter des parties d'un élément pourrait se passer de la définition de cet élément ? Pour moi, un paragraphe définit une suite d'idées logiques, et il peut n'y avoir qu'une seule suite d'idées logiques dans un document, donc un seul paragraphe, mais ça reste un paragraphe.

Je suis d'accord que la pertinence de cette définition peut sembler un peu faible, mais changeons de perspective et considérons br, qui est un saut de ligne : un saut de ligne peut-il avoir une valeur sémantique ? Oui, dans une adresse ou un poème par exemple, où on a décidé que la mise en forme était importante et avait une signification, mais ça n'a pas la même valeur sémantique qu'un paragraphe (une idée peut courir sur plusieurs vers, et les lignes d'une adresse sont des parties d'une même adresse). Un paragraphe ne se limite donc pas à une question de mise en forme qui aurait un sens particulier par convention, puisque ce problème est adressé par br. C'est plus profond que ça.

De toute façon, on parle de langue ici, c'est forcément flou, les linguistes le savent bien. Et quand tu y réfléchis, p est peut-être la seule balise qui décrive aussi précisément le contenu d'une page : on parle d'identifier une suite d'idées (chose que l'on fait naturellement quand on écrit, en sautant des lignes). Quelque part, ce n'est pas une question à la portée d'un développeur / intégrateur, c'est au rédacteur de décider, c'est laissé à l'appréciation de chacun, et ça ne peut faire que polémique.

Maintenant, je suis d'accord sur beaucoup de choses : quand tu me montres un p avec une simple image dedans. Oui, c'est tarte, je dénonçais ça aussi avec les formulaires, mais pour ce qui concerne la connerie de mettre un p dans un div, je ne suis pas vraiment d'accord. Personnellement je serais tenté de faire l'inverse : enlever le div et laisser le p (en fonction du contexte), et si j'ai envie de regrouper certains p entre eux, pour une raison totalement arbitraire et subjective, il me faudra bien un bloc parent à un moment donné : je mettrai les p à regrouper dans un div, avec une règle CSS sur le sélecteur "parent > p, parent > div" de façon à donner aux div le même aspect que les p et à gérer les p imbriqués dans un div différemment des p qui sont au premier niveau. C'est un chouïa compliqué et je conçois qu'on ne se prenne pas la tête et qu'on utilise un conteneur même quand il n'y a qu'un seul p à l'intérieur. C'est plus facile à maintenir et à programmer si le contenu est généré par un script.