Pourquoi doit-on utiliser la balise <img /> dans la balise ?

**Obi Juan Kenobi** · 09/11/2020, 16h02

Bonjour à vous tous,

Je reviens vers le HTML et CSS que j'avais abandonné en 2017.
Je suis des tutoriels sur Youtube et j'ai appris dans un tuto que la balise <img /> doit toujours être utilisée dans une balise .
Sauf si elle est utilisée dans la balise <figure> auquel cas on peut oublier la balise .
Pourquoi est-ce si important qu'elle soit placée dans une balise ?
En principe, la balise sert à annoncer un paragraphe et une image n'est pas du texte.

Merci à vous de m'éclairer.

**NoSmoking** · 10/11/2020, 10h28

Bonjour,

j'ai appris dans un tuto que la balise <img /> doit toujours être utilisée dans une balise

change de tuto

On peut mettre la balise <img> dans à peu près toutes les balises existantes.
Pour t'en convaincre teste avec un validateur HTML le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Test</title>
</head>
<body>
  <img src="blabla.png" alt="">
  <a href="#"><img src="blabla.png" alt=""></a>
  <h1>Titre<img src="blabla.png" alt=""></h1>
  <div><img src="blabla.png" alt=""></div>
  <span><img src="blabla.png" alt=""></span>
</body>
</html>

**Obi Juan Kenobi** · 10/11/2020, 10h57

En effet, j'ai testé ton code dans le validateur HTML et il n'y aucune erreur.
J'ai testé aussi le code suivant et il n'y a pas d'erreur non plus dans le validateur HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<link href="styles.css" type="text/css" rel="stylesheet">
	<title>Titre de la fenêtre</title>
</head>
<body>
  <img src="blabla.png" alt="">
</body>
</html>

Je crois que j'ai trouvé.
C'est une affirmation qui remonte aux versions antérieurs du HTML 5 où la balise <img /> ne pouvait pas être directement enfant de la balise <body>.
Il fallait la placer obligatoirement dans une balise parent (div, p, a, span, etc.).
Avec la version HTML 5 cette obligation n'est plus d'actualité.
Je me trompe ?

**javatwister** · 10/11/2020, 13h39

Envoyé par Obi Juan Kenobi

Avec la version HTML 5 cette obligation n'est plus d'actualité.
Je me trompe ?

Honnêtement, je n'épluche pas souvent les textes de loi, donc je ne saurais te le confirmer.

N'empêche: une balise img est de type inline et, à ce titre, doit normalement être insérée dans un élément block, quel qu'il soit;

**Obi Juan Kenobi** · 10/11/2020, 14h34

N'empêche: une balise img est de type inline et, à ce titre, doit normalement être insérée dans un élément block, quel qu'il soit;

Très intéressant ce que tu dis et cela m'oblige à poser la question pourquoi ?
Parce que j'ai placé la balise <img /> en dehors de toute autre balise de type bloc et le validateur HTML ne m'a signalé aucune erreur.
Ce que je voudrais savoir c'est pourquoi une balise de type in line doit être placée dans une balise de type bloc.

**NoSmoking** · 10/11/2020, 14h44

Envoyé par Obi Juan Kenobi

C'est une affirmation qui remonte aux versions antérieurs du HTML 5 où la balise <img /> ne pouvait pas être directement enfant de la balise <body>.
Il fallait la placer obligatoirement dans une balise parent (div, p, a, span, etc.).
Avec la version HTML 5 cette obligation n'est plus d'actualité.
Je me trompe ?

Seuls des éléments type Block-Level pouvaient être enfant direct de <body>, mais heureusement il y a prescription.

Envoyé par javatwister

Honnêtement, je n'épluche pas souvent les textes de loi, donc je ne saurais te le confirmer.

Dommage c'est parfois plein de bonnes informations

Envoyé par javatwister

N'empêche: une balise img est de type inline et, à ce titre, doit normalement être insérée dans un élément block, quel qu'il soit;

Pas fatalement, un élément inline peut recevoir un élément inline.

**javatwister** · 10/11/2020, 14h47

Envoyé par NoSmoking

Pas fatalement, un élément inline peut recevoir un élément inline.

Ah ah, bien joué

Quelle mauvaise foi, quand même...

Je voulais dire: "Il est de mauvais goût qu'un élément inline se balade dans la nature sans être englobé dans un contenu block, même si ce n'est pas son ascendant direct."

**NoSmoking** · 10/11/2020, 15h09

Je te concède une légère, mais très légère mauvaise fois attendu qu'il ne s'agit là que de rendre le document conforme, car comme on fait ce que l'on veut avec les display ... le principal étant que cela tienne la route sémantiquement sans trop se prendre la tête.

PS : Il y aurait encore à dire sachant que

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><q>c'est conforme</q></p>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<q><p>c'est non conforme et pourtant !</p></q>

Pourquoi doit-on utiliser la balise <img /> dans la balise <p> ?

HTML

Discussions similaires

Partager

Partager