L'ol / ul doit-il être à l'intérieur de <p> ou à l'extérieur?

292

Quelle est la norme conforme entre ces deux?

<p>Text text text ...
    <ol>
        <li>First element</li>
    </ol>
</p>
<p>
    Other text text ...
</p>

OU

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>
html dynamique
la source
40
@oded: le contexte est-il important?
dynamique

Réponses:

422

La réponse courte est que les oléléments ne sont pas légalement autorisés à l'intérieur des péléments.

Pour voir pourquoi, passons à la spécification ! Si vous pouvez vous familiariser avec la spécification HTML, elle répondra à plusieurs de vos questions et curiosités. Vous voulez savoir si un olpeut vivre à l'intérieur d'un p. Alors…

4.5.1 L' pélément :

Catégories: contenu de flux , contenu Palpable .
Modèle de contenu: contenu de phrasé .

4.5.5 L' olélément :

Catégories: Contenu de flux .
Modèle de contenu : zéro ou plusieurs éléments li et supportant les scripts .

La première partie dit que les péléments ne peuvent contenir que du contenu de phrasé (qui sont des éléments «en ligne» comme spanet strong).

La deuxième partie dit que les ols sont du contenu de flux (des éléments de «bloc» comme pet div). Ils ne peuvent donc pas être utilisés à l'intérieur d'un p.

ols et autres flow contentpeuvent être utilisés dans certains autres éléments comme div:

4.5.13 L' divélément :

Catégories: contenu de flux , contenu Palpable .
Modèle de contenu: contenu de flux .

s4y
la source
9
@link: Oui, w3.org est un peu technique. Pourtant, il n'y a aucun doute sur ce qui est correct quand et si vous les avez compris.
nyson
5
Je pense que @Sid expliquant la spécification et certains de ses termes est certainement utile. S'il allait un peu plus loin, ce serait une excellente réponse. Il pourrait également répondre explicitement à la question :). J'ai ajouté une modification pour cela.
studgeek
1
horrible à lire? ne pense pas, allez à 4.4.1 The p element, l'auteur parle même de fantastic sentencesquelque chose comme ça
Jaime Hablutzel
1
@dynamic Je vais toujours à la référence HTML de MDN pour une documentation plus facile à lire.
Bonk
1
@AaronLS En quelque sorte! Lorsqu'un navigateur vous renvoie du HTML (par exemple dans les outils de développement ou à partir de .innerHTML), il est régénéré à partir de l'arborescence des éléments. Donc, Chrome n'ajuste pas le HTML autant que la création d'une arborescence valide à partir du HTML d'origine, puis la génération d'un nouveau HTML à partir de cette arborescence.
s4y
40

La deuxième. Le premier n'est pas valide.

  • Un paragraphe ne peut pas contenir de liste.
  • Une liste ne peut contenir un paragraphe que si ce paragraphe est entièrement contenu dans un seul élément de liste.

Un navigateur le traitera comme ceci:

<p>tetxtextextete 
<!-- Start of paragraph -->
<ol>
<!-- Start of ordered list. Paragraphs cannot contain lists. Insert </p> -->
<li>first element</li></ol>
<!-- A list item element. End of list -->
</p>
<!-- End of paragraph, but not inside paragraph, discard this tag to recover from the error -->
<p>other textetxet</p>
<!-- Another paragraph -->
Quentin
la source
7

en fait, vous ne devriez mettre que des éléments en ligne à l'intérieur du p, donc dans votre cas, olc'est mieux à l'extérieur

Kris Ivanov
la source
2
C'est la même réponse que la réponse de @David Dorward, que vous n'avez pas aimée.
ceejayoz
5 
<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Parce que les deux <p>et <ol>sont des éléments rendus en bloc.

David
la source