¿Por qué la etiqueta <p> no puede contener una etiqueta <div> dentro de ella?

169

Hasta donde yo sé, esto es correcto:

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

Pero esto está mal:

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

El primero puede pasar el validador W3C (XHTML 1.0), pero el segundo no. Sé que nadie escribirá código como el segundo. Solo quiero saber por qué.

¿Y qué hay de la relación de contención de otras etiquetas?

html xhtml Henry H Miao
fuente
9
Debido a que <p>es un elemento de nivel de bloque, y (se supone que debe usarse) para mostrar texto, no permitirá otros elementos de nivel de bloque dentro de él, sino solo elementos en línea como <span>y <strong>.
Bojangles
22
JamWaffles: ese pes un elemento de nivel de bloque que no tiene nada que ver con eso. divTambién es uno y permite otros bloques.
Joey
posible duplicado de: stackoverflow.com/questions/4967976/… (sin marcar): cualquier respuesta decente a eso responderá cómo leer las especificaciones HTML y, por lo tanto, también responderá esto.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Declarar el estilo del div como en línea tampoco funciona.
Triynko

Respuestas:

198

Un lugar autorizado para buscar relaciones de contención permitidas es la especificación HTML. Ver, por ejemplo, http://www.w3.org/TR/html4/sgml/dtd.html . Especifica qué elementos son elementos de bloque y cuáles están en línea. Para esas listas, busque la sección marcada "Modelos de contenido HTML".

Para el elemento P, especifica lo siguiente, lo que indica que los elementos P solo pueden contener elementos en línea.

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

Esto es coherente con http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , que dice que el elemento P "no puede contener elementos de nivel de bloque (incluido el propio P)".

Colin Campbell
fuente
74
Tengo la costumbre de evitar las especificaciones, los documentos más autorizados que tenemos para cosas como esta, porque no son divertidos de leer. +1 para leerlos, comprenderlos y usarlos para responder preguntas.
Stoutie
3
¿Sigue siendo válido para HTML 5? La especificación vinculada hace referencia específicamente a HTML 4, y HTML 5 no tiene una definición de tipo de documento .
Ajedi32
2
@ Ajedi32 Sí, aquí . HTML5 ha cambiado el nombre de mucha terminología, pero "Contenido permitido: contenido de fraseo" significa lo mismo que el %inlinebit anterior. Ver también la respuesta de Oriol.
Sr. Lister el
@Stoutie Justo contigo, por eso existe Stack Overflow.
Capitán Hipertexto
69

En resumen, es imposible colocar un <div>elemento dentro de a <p>en el DOM porque la <div>etiqueta de apertura cerrará automáticamente el <p>elemento.

defau1t
fuente
2
Ah, esto explica por qué hay un gran espacio antes de un div dentro de ap, porque el p realmente termina justo antes del div.
AaronLS
2
Usted puede colocar un divelemento dentro de una p en el DOM , por ejemplo myP.appendChild(myDiv). Pero un analizador HTML no lo hará.
Oriol
1
No hagas eso. No tienes idea de cómo responderá eso en futuros navegadores. La tecnología está cambiando constantemente. Puede haber un analizador html dinámico que lo invalidará algún día. El objetivo en el desarrollo web es crear cosas que tengan la capacidad de ser deseables y algo compatibles. Si puede evitar lo que permite el navegador, es seguro decir que no puede asegurarse de que funcionará para siempre. Solo usa un span chicos ... Si necesitas un div, deja de usar la etiqueta p.
39

Según HTML5, el modelo de contenido de divelementos es contenido de flujo

La mayoría de los elementos que se utilizan en el cuerpo de documentos y aplicaciones se clasifican como contenido de flujo.

Eso incluye pelementos, que solo pueden usarse donde se espera contenido de flujo .

Por lo tanto, los divelementos pueden contener pelementos.

Sin embargo, el modelo de contenido de pelementos es contenido de fraseo

El contenido de la fraseología es el texto del documento, así como los elementos que marcan ese texto en el nivel intrapárrafo. Se ejecuta de fraseo contenido de formulario párrafos .

Eso no incluye divelementos, que solo se pueden usar donde se espera contenido de flujo .

Por lo tanto, los pelementos no pueden contener divelementos.

Dado que la etiqueta final de pelementos puede omitirse cuando el pelemento es seguido inmediatamente por un divelemento (entre otros), lo siguiente

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

se analiza como

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

Y el último </p>es un error.

Oriol
fuente
Pero si en CSS si configuro div para que esté en línea, ¿por qué no respeta eso?
Sanjay
Dado que los valores CSS se aplican después de dom Parsing ... incluso si lo hacemos, div as inline in CSSno sirve de nada, ya que la nueva estructura analizada es <p>Text</p> <div>some words</div> <p></p> correcta.
Sanjay
@Sanjay Sí, parece que tienes razón. Y además, durante mis observaciones, si pones <span> dentro de <p> y luego configuras la visualización de span en "bloque", se representará como un elemento de bloque típico sin tal efecto.
Andrii Naumovych
-1

Después del X HTML, las convenciones han cambiado, y ahora es una mezcla de convenciones de XML y HTML, por eso el segundo enfoque es incorrecto y el validador W3C acepta las cosas correctas que están de acuerdo con los estándares y convenciones.

geekdev786
fuente
XHTML no cambió mucho. Al elemento p nunca se le ha permitido contener un elemento div.
Quentin
-7

Porque la divetiqueta tiene mayor prioridad que la petiqueta. La petiqueta representa una etiqueta de párrafo, mientras que la divetiqueta representa una etiqueta de documento.

Puede escribir muchos párrafos en una etiqueta de documento, pero no puede escribir un documento en un párrafo. Lo mismo que un archivo DOC.

Gaurav Agrawal
fuente
2
En realidad, es división. De lo contrario, sería <doc>: D
Kyle
66
La precedencia no es un concepto que se aplica a los elementos html, y div representa una división, como dice @KyleSevenoaks :)
SimplGy
¿Qué es un archivo DOC? ¿Un archivo de Microsoft Word ?
Peter Mortensen