Pourquoi la balise <p> ne peut-elle pas contenir une balise <div>?

169

Pour autant que je sache, c'est vrai:

<div>
  <p>some words</p>
</div>

Mais c'est faux:

<p>
  <div>some words</div>
</p>

Le premier peut passer le validateur W3C (XHTML 1.0), mais le second non. Je sais que personne n'écrira de code comme le second. Je veux juste savoir pourquoi.

Et qu'en est-il de la relation de confinement des autres balises?

html xhtml

— Henry H Miao
source

9

Étant donné qu'il <p>s'agit d'un élément de niveau bloc et qu'il est (censé être) utilisé pour afficher du texte, il n'autorisera pas d'autres éléments de niveau bloc à l'intérieur, mais uniquement ceux en ligne comme <span>et <strong>.

— Bojangles

22

JamWaffles: C'est pun élément de niveau bloc qui n'a rien à voir avec cela. divest également un et permet d'autres blocs.

— Joey

duplicata possible de: stackoverflow.com/questions/4967976/… (sans drapeau): toute réponse décente à cela répondra à la manière de lire les spécifications HTML et répondra donc également à cette question.

— Ciro Santilli 郝海东冠状病六四事件法轮功

Déclarer le style de la div comme inline ne fonctionne pas non plus.

— Triynko

198

La spécification HTML est un endroit faisant autorité pour rechercher les relations de confinement autorisées. Voir, par exemple, http://www.w3.org/TR/html4/sgml/dtd.html . Il spécifie quels éléments sont des éléments de bloc et lesquels sont en ligne. Pour ces listes, recherchez la section intitulée "Modèles de contenu HTML".

Pour l'élément P, il spécifie ce qui suit, ce qui indique que les éléments P ne peuvent contenir que des éléments en ligne.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Ceci est cohérent avec http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , qui dit que l'élément P "ne peut pas contenir d'éléments de niveau bloc (y compris P lui-même)".

— Colin Campbell
source

74

J'ai l'habitude d'éviter les spécifications, les documents les plus fiables que nous ayons pour des choses comme celle-ci, car ils ne sont pas amusants à lire. +1 pour les lire, les comprendre et les utiliser pour répondre aux questions.

— Stoutie

3

Est-ce toujours valable pour HTML 5? La spécification liée fait spécifiquement référence à HTML 4 et HTML 5 n'a pas de définition de type de document .

— Ajedi32

2

@ Ajedi32 Oui, ici . HTML5 a renommé beaucoup de terminologie, mais "Contenu autorisé: phrasé contenu" signifie la même chose que le %inlinebit ci-dessus. Voir aussi la réponse d'Oriol.

— Mr Lister

@Stoutie Avec toi, c'est pourquoi Stack Overflow existe.

— Captain Hypertext

69

Bref, il est impossible de placer un <div>élément à l'intérieur d'un <p>dans le DOM car la <div>balise d' ouverture fermera automatiquement l' <p>élément.

— defau1t
source

2

Ah, cela explique pourquoi il y a un espace énorme avant un div à l'intérieur de ap, parce que le p se termine en fait juste avant le div.

— AaronLS

2

Vous pouvez placer un divélément à l'intérieur d'un p dans le DOM , par exemple myP.appendChild(myDiv). Mais un analyseur HTML ne le fera pas.

— Oriol

1

Ne fais pas ça. Vous n'avez aucune idée de comment cela va réagir dans les futurs navigateurs. La technologie évolue constamment. Il peut y avoir un analyseur html dynamique qui rendra cela invalide un jour. Le but du développement Web est de créer des éléments qui ont la capacité d'être à la fois désirables et compatibles. Si vous pouvez contourner ce que le navigateur permet, il est prudent de dire que vous ne pouvez pas garantir qu'il fonctionnera pour toujours. Utilisez simplement un span les gars ... Si vous avez besoin d'un div, arrêtez d'utiliser la balise p.

39

Selon HTML5, le modèle de contenu des divéléments est un contenu de flux

La plupart des éléments utilisés dans le corps des documents et des applications sont classés en tant que contenu de flux.

Cela inclut des péléments, qui ne peuvent être utilisés que là où le contenu du flux est attendu.

Par conséquent, les divéléments peuvent contenir des péléments.

Cependant, le modèle de contenu des péléments est le Phrasing content

Le contenu du phrasé est le texte du document, ainsi que les éléments qui marquent ce texte au niveau intra-paragraphe. Des séries de phrases de contenu forment des paragraphes .

Cela n'inclut pas les divéléments, qui ne peuvent être utilisés que là où le contenu du flux est attendu.

Par conséquent, les péléments ne peuvent pas contenir d' divéléments.

Étant donné que la balise de fin des péléments peut être omise lorsque l' pélément est immédiatement suivi d'un divélément (entre autres), ce qui suit

<p>
  <div>some words</div>
</p>

est analysé comme

<p></p>
<div>some words</div>
</p>

et le dernier </p>est une erreur.

— Oriol
source

Mais si en CSS, si je définis div pour être en ligne, pourquoi ne respecte-t-il pas cela?

— Sanjay

Puisque les valeurs CSS sont appliquées après l'analyse dom ... même si nous faisons cela div as inline in CSSne sert à rien, comme la nouvelle structure analysée est <p>Text</p> <div>some words</div> <p></p> -elle correcte?

— Sanjay

@Sanjay Oui, on dirait que vous avez raison. Et de plus, au cours de mes observations, si vous mettez <span> à l'intérieur de <p> puis réglez l'affichage de span sur "block", il sera rendu comme un élément de bloc typique sans un tel effet.

— Andrii Naumovych

-1

Après le X HTML, les conventions ont été modifiées, et maintenant c'est un mélange de conventions de XML et de HTML, c'est pourquoi la deuxième approche est fausse et le validateur W3C accepte les choses correctes qui sont conformes aux normes et conventions.

— geekdev786
source

XHTML n'a pas beaucoup changé. L'élément p n'a jamais été autorisé à contenir un élément div.

— Quentin

-7

Parce que la divbalise a une priorité plus élevée que la pbalise. La pbalise représente une balise de paragraphe tandis que la divbalise représente une balise de document.

Vous pouvez écrire de nombreux paragraphes dans une balise de document, mais vous ne pouvez pas écrire un document dans un paragraphe. Identique à un fichier DOC.

— Gaurav Agrawal
source

2

En fait, c'est la division. Sinon, ce serait <doc>: D

— Kyle

6

La priorité n'est pas un concept qui s'applique aux éléments html, et div représente une division, comme le dit @KyleSevenoaks :)

— SimplGy

Qu'est-ce qu'un fichier DOC? Un fichier Microsoft Word ?

— Peter Mortensen