¿Debe ol / ul estar dentro <p> o afuera?

292

¿Cuál es el estándar que cumple estos dos?

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

O

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>
html dinámica
fuente
40
@oded: ¿importa el contexto?
dinámico

Respuestas:

422

La respuesta corta es que los olelementos no están legalmente permitidos dentro de los pelementos.

Para ver por qué, ¡vamos a las especificaciones ! Si puede sentirse cómodo con la especificación HTML, responderá muchas de sus preguntas y curiosidades. Desea saber si un olpuede vivir dentro de a p. Entonces…

4.5.1 El pelemento :

Categorías: Contenido de flujo , Contenido palpable .
Modelo de contenido: contenido de fraseo .

4.5.5 El olelemento :

Categorías: Contenido de flujo .
Modelo de contenido : cero o más elementos de soporte de script y li .

La primera parte dice que los pelementos solo pueden contener contenido de fraseo (que son elementos "en línea" como spany strong).

La segunda parte dice que ols son contenido de flujo (elementos de "bloque" como py div). Por lo tanto, no se pueden usar dentro de a p.

olsy otros flow contentpueden usarse en algunos otros elementos como div:

4.5.13 El divelemento :

Categorías: Contenido de flujo , Contenido palpable .
Modelo de contenido: contenido de flujo .

s4y
fuente
99
@link: Sí, w3.org es un poco técnico. Aún así, no hay dudas sobre lo que es correcto cuando y si los has entendido.
nyson
55
Creo que @Sid explicando las especificaciones y algunos de sus términos es definitivamente útil. Si fue un poco más lejos, sería una gran respuesta. También podría responder explícitamente la pregunta :). Agregué una edición para eso.
studgeek
1
horrible de leer? no lo creas, ve 4.4.1 The p element, el autor incluso habla fantastic sentenceso algo así
Jaime Hablutzel 05 de
1
@dynamic Siempre voy a la referencia HTML de MDN para una documentación más fácil de leer.
Bonk
1
@AaronLS Tipo de! Cuando un navegador le devuelve HTML (por ejemplo, en las herramientas de desarrollador o desde .innerHTML), se vuelve a generar desde el árbol de elementos. Entonces, Chrome no está ajustando el HTML tanto como creando un árbol válido a partir del HTML original, y luego generando nuevo HTML a partir de ese árbol.
s4y
40

El segundo. El primero no es válido.

  • Un párrafo no puede contener una lista.
  • Una lista no puede contener un párrafo a menos que ese párrafo esté contenido completamente dentro de un único elemento de la lista.

Un navegador lo manejará así:

<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
fuente
7

en realidad solo debes poner elementos en línea dentro del p, así que en tu caso oles mejor afuera

Kris Ivanov
fuente
2
Esta es la misma respuesta que la respuesta de @David Dorward, que no le gustó.
ceejayoz
5 
<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Porque ambos <p>y <ol>son elementos representados como bloque.

David
fuente