¿Por qué la etiqueta <p> no puede contener una etiqueta <div> en su interior?
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. Sólo quiero saber por qué.
¿Y qué pasa con la relación de contención de otras etiquetas?
Un lugar autorizado para buscar relaciones de contención permitidas es la especificación HTML. Véase, 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 consistente con http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , que dice que el elemento P "no puede contener elementos a nivel de bloque (incluido el propio P)".
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.
Según HTML5, el modelo de contenido de divlos elementos es el contenido fluido.
La mayoría de los elementos que se utilizan en el cuerpo de documentos y aplicaciones se clasifican como contenido fluido.
Eso incluye pelementos que solo se pueden usar donde se espera contenido fluido .
Por tanto, divlos elementos pueden contener pelementos.
Sin embargo, el modelo de contenido de plos elementos es el contenido de fraseo.
El contenido del fraseo es el texto del documento, así como los elementos que marcan ese texto a nivel intrapárrafo. Ejecuciones de contenido de redacción de párrafos .
Eso no incluye divelementos, que solo se pueden usar donde se espera contenido fluido .
Por tanto, plos elementos no pueden contener divelementos.
Dado que la etiqueta final de plos elementos se puede omitir 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.
Mire este ejemplo de la especificación HTML.
<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: [email protected] -->
<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>[email protected]</TR>
</TABLE>
</DIV>
¿Notaste algo? : No había ninguna etiqueta de cierre del <p>elemento. ¿Un error en las especificaciones? No .
Consejo #1: La etiqueta de cierre de <p>es OPCIONAL
Te preguntarás : ¿Pero entonces cómo sabría un <p>elemento dónde detenerse?
De w3docs :
Si se omite la etiqueta de cierre, se considera que el final del párrafo coincide con el inicio del siguiente elemento a nivel de bloque.
En palabras simples : a <div>es un elemento de bloque y su etiqueta de apertura hará que el padre <p>se cierre, por lo que <div>nunca podrá anidarse en su interior <p>.
PERO ¿qué pasa con la situación inversa? Tu puedes preguntar
Bueno ...
Consejo #2: La etiqueta de cierre del <div>elemento es OBLIGATORIA
Según O'Reilly HTML y XHTML Pocket Reference, cuarta edición (página 50)
<div> . . . </div>Etiquetas de inicio/fin Requeridas/Requeridas
Es decir, el <div>final del elemento solo estará determinado por su etiqueta de cierre </div>, por lo tanto, un <p>elemento dentro NO lo romperá.
