web-dev-qa-db-fra.com

Un élément 'ul' ne peut jamais être un enfant d'un élément «P»

Pourquoi ne pouvons-nous jamais avoir un élément ul comme l'enfant d'un p élément?

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 grands navigateurs (Chrome, Firefox et Internet Explorer - toutes les dernières versions), il est interprété comme suit

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

Je l'ai vérifié en cliquant avec le bouton droit de la souris sur l'élément ul (en chrome) et en sélectionnant l'option Élément d'inspection. Je l'ai vu en chrome, mais les deux autres navigateurs se sont également comportés de la même manière (Sélecteur CSS 'P UL' n'a pas bien fonctionné).

Pourquoi est-ce tellement? Existe-t-il un cas général dans lequel de tels changements par le navigateur ont lieu?

htmlhtml-lists
29
RK Poddar

Veuillez vérifier le Spécification HTML , qui indique clairement que la mise en place des listes d'un élément de paragraphe est interdite et donnez également des exemples sur ce qui pourrait être fait:

Les éléments de liste (en particulier, les éléments OL et UL) ne peuvent pas être des enfants de P. Lorsqu'une phrase contient une liste à bulleted, on peut se demander comment il devrait être marqué.

Par exemple, cette phrase fantastique a des balles relatives à

  • magiciens,
  • voyage plus rapide que la lumière, et
  • la télépathie,

et est en outre discuté ci-dessous.

La solution consiste à se rendre compte qu'un paragraphe, en termes HTML, n'est pas un concept logique, mais une structure. Dans l'exemple fantastique ci-dessus, il existe cinq paragraphes tels que définis par cette spécification: une avant la liste, une pour chaque balle, et une après 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>

Les auteurs souhaitant styles de manière pratique, les paragraphes "logiques" consistant en plusieurs paragraphes "structurels" peuvent utiliser l'élément div au lieu de l'élément P.

Ainsi, par exemple, l'exemple ci-dessus pourrait devenir ce qui suit:

   <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 contient encore cinq paragraphes structurels, mais l'auteur peut maintenant styler que la div au lieu de prendre en compte chaque partie de l'exemple séparément.

45
kapa

Il a toujours été une règle dans HTML qu'un élément p peut contenir uniquement un balisage de texte et de niveau de texte, et non une liste par exemple. Par conséquent, les navigateurs impliquent une fermeture </p> tag quand un élément p est ouvert et une étiquette de démarrage pour un élément de niveau de bloc, comme <ul>, est rencontré. Dans votre exemple, le </p> tag après </ul> est sans abri et normalement ignoré.

5
Jukka K. Korpela

<p> ne peut avoir que des éléments en ligne comme des enfants et aucun élément de bloc (voir, E.G, AT MDN ). <ul> D'autre part est un élément de niveau de bloc ( MDN )!

La raison pour laquelle le navigateur interpréter votre code comme vous l'avez vu réside dans la spécification d'analyse HTML5. La spécification répertorie un exemple beaucoup comme la vôtre: whawg link .

Une autre question associée intéressante pourrait être celle-ci: HTML: Inclure ou exclure, des balises de fermeture optionnelles?

4
Sirko