élément ul ne peut jamais être un enfant de l'élément p

Pourquoi nous n'avons jamais ul élément comme l'enfant d'un élément p?
J'ai fait une page web avec le code suivant

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

ici, l'élément ul est un enfant de l'élément p. Cependant, dans tous les principaux navigateurs(Chrome, Firefox, Internet Explorer)(toutes versions récentes), elle est interprétée comme suit

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

J'ai vérifié par un clic-droit sur l'élément ul(chromé) et en sélectionnant l'inspecter l'élément option. Je l'ai vu dans chrome, mais les 2 autres navigateurs se sont comportés de la même manière(css selecter "p ul" ne fonctionne pas bien).

Pourquoi est-il si? Peut-on dire d'un cas général dans lequel ces changements par le navigateur prend place?

Double Possible de Dois-ol/ul être à l'intérieur <p> ou à l'extérieur?

InformationsquelleAutor RK Poddar | 2012-05-15

html html-lists

45

Veuillez vérifier les La spécification HTML, qui stipule clairement que le fait de mettre des listes dans un paragraphe élément est interdit, et aussi de vous donner quelques exemples sur ce qui pourrait être fait:
Liste des éléments (en particulier, les éléments ol et ul) ne peuvent pas être des enfants de p éléments. Lorsqu'une phrase contient une liste à puces, par conséquent, on peut se demander comment il devrait être marquée.

Par exemple, ce fantastique phrase a balles relatives à
- assistants,
- plus rapide que la lumière voyage, et
- la télépathie,
et est discuté plus loin.

La solution est de se rendre compte que le paragraphe en HTML termes, n'est pas un
concept logique, mais structurel. Dans le fantastique exemple ci-dessus,
il y a en fait cinq paragraphes tel que défini par cette speciication:
avant la liste, un pour chaque balle, et une fois la liste.

Le balisage de l'exemple ci-dessus pourrait donc être:
```
  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>
```
Auteurs désireux de
idéalement style comme "logique" des paragraphes composé de plusieurs
"structurelle" des paragraphes pouvez utiliser l'élément div au lieu de la p
élément.

Ainsi, par exemple, l'exemple ci-dessus pourrait devenir le suivant:
```
   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div> 
```
Cet exemple a encore
cinq structurels paragraphes, mais maintenant, l'auteur peut style que la div
au lieu de considérer chaque partie de l'exemple séparément.
- Je suis en utilisant trumbowyg et à l'intérieur de l'éditeur de chrome permet ol à l'intérieur de p: i.imgur.com/1uyqtNO.png . En dehors de l'éditeur de code HTML, il a le même problème que l'OP. L'éditeur me donne le code HTML et j'ai à présent à l'extérieur, donc il se casse (car il a ol à l'intérieur de p). Comment fonctionne l'éditeur de permettre-il lui-même?
- L'éditeur manipule le DOM à la volée (par le biais de JS). Chrome lecture de HTML et de renforcer les DOM à partir de ce scénario est différent.
- La valeur html (le code) de l'éditeur est donnée dans le code html du fichier lui-même (imaginez <textarea> <HTML CODE HERE> </textarea>) et puis l'éditeur de code js est appelé le textarea élément. Cela signifie que le navigateur a la 1ère à dire sur le code html dans le textarea et puis de l'éditeur. Donc, si chrome a converti <p><ol>...</ol></p> à <p></p><ol>...</ol> puis l'éditeur va voir la dernière valeur et n'ont aucune connaissance de l'ancien. Je pense que quelque chose se passe sous le capot mais je ne le trouve pas.
- Tout ce qui est à l'intérieur de la balise textarea, il ne sera pas validé en tant que code HTML par le navigateur, il est traité comme une chaîne ordinaire.
- Selon whatwg.org, c'est en effet la bonne réponse. Malheureusement MDN est l'envoi d'un message de confusion avec leurs propres ul/ol description indiquant que Permitted parents: Any element that accepts flow content. (developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) La liste des flux d'éléments de contenu contient p ainsi. Très déroutant.
InformationsquelleAutor kapa
5

Il a toujours été une règle dans le code HTML qu'un p élément peut contenir que du texte et texte-niveau de balisage, pas une liste par exemple. Par conséquent, les navigateurs implique une fermeture </p> étiquette p élément est ouverte et une balise de début d'un élément de niveau bloc, comme <ul>, est rencontré. Dans votre exemple, le </p> tag après </ul> est sans-abri et normalement ignorés.

InformationsquelleAutor Jukka K. Korpela
4

<p> peut avoir que des éléments inline comme childs et aucun des éléments de bloc (voir e.g, à MDN). <ul> sur l'autre main est un élément de niveau bloc (MDN)!

La raison pour laquelle le navigateur d'interpréter votre code comme vous l'avez vu, réside dans le HTML5 analyse spec. La spécification des listes un exemple très semblable à la vôtre: whatwg lien.

Un autre intéressants liés à la question pourrait être: HTML: Inclure ou exclure, en option balises de fermeture?

InformationsquelleAutor Sirko

Vous devez vous connecter pour publier un commentaire.