¿Por qué el párrafo HTML se comporta de manera tan extraña en mi Chrome?

Obtenga un HTML vacío, escriba esto y vea su código fuente en Google Chrome:

 
WHY?

Si lo hiciste como lo hice, verás esto en la fuente:

  

 

 
WHY?

Por las dudas , aquí hay una demostración usando jsbin . En ese enlace, ves esto:

 [repeating P] WHY? [repeating P] 

He añadido este jQuery en él:

 $("p").html("[repeating P]"); 

Elimina todo el

de él, y todo vuelve a la normalidad. Este pequeño y extraño comportamiento inesperado es consistente cuando se agregan más cosas en el

, y podría ser un o supongo que lo que haya allí. Y no importa si el HTML está bien formateado o no.

Alguien sabe por qué ?

Como explicación básica, div debe ser una ‘caja’ para el diseño. Una caja para guardar otras cosas. El elemento p , sin embargo, está destinado a ser (sorpresa) un párrafo de texto.

Debido a que un div (contenedor) se puso dentro de un p (elemento en línea), es (técnicamente) incorrecto. Google Chrome (siendo el obsesionado con los estándares), es el que trata de corregir este anidamiento incorrecto agregando los elementos adicionales como se muestra.

El W3C tiene un artículo (muy extenso) sobre estas especificaciones de idioma en su sitio, sin embargo, posiblemente lo mejor que se puede hacer para verificar inconsistencias y posibles problemas como este es Validar su código fuente escrito. La forma más fácil de hacerlo es con el Validador W3C .

La etiqueta de párrafo está destinada a contener texto, o más precisamente, elementos en línea. Chrome interpreta un div dentro de una API como una malformación html e intenta corregirlo tan bien como puede.

No puedo encontrar una buena fuente sobre esto, así que puedo estar equivocado, pero recientemente estuve leyendo acerca de cómo las tags p no cerradas son técnicamente válidas html (obviamente no es válido xhtml). Básicamente en las circunstancias correctas se cerrarán ellas mismas, al igual que br or hr se cierra sin una etiqueta de cierre. Incluso si no son técnicamente válidos, al parecer se acostumbran de tal manera que se considera aceptable para algunas de las multitudes menos civilizadas. Gross, lo sé.

Imagino que lo que está sucediendo es que Chrome ve su elemento de bloque (el div) después de la p, por lo que asume que tenía la intención de cerrar el p. Supongo que ver la terminación p desencadena la misma acción porque para Chrome actualmente no hay una etiqueta p abierta para cuando encuentra la etiqueta de cierre.

Como nota al margen: si no te molestaba poner un div en una ap, te sugiero que leas por qué la semántica es tan importante cuando se trata de html. Acabo de revisar algunos artículos. ¿Puedo sugerir uno para una lectura rápida? http://brainstormsandraves.com/articles/semantics/structure/

Anidar un div en una p es HTML no válido. Supongo que Chrome solo intenta corregirlo por ti.