significado - span html para que sirve
Al poner<div> dentro<p> se agrega un<p>[duplicado] adicional (4)
De la fina especificación :
p - párrafo
[...]
Contenidos permitidos
Compresión de contenido
¿Y qué es este contenido de Phrasing ? Contenido de fraseo :
Consiste en elementos de frase entremezclados con datos de caracteres normales .
Los datos de caracteres normales son solo eso: texto sin marcar. Los elementos de fraseo son:
a o em o strong ... [un montón de otros elementos, ninguno de los cuales es div ]
Entonces, <p><div></div></p> no es HTML válido. Según las reglas de omisión de etiquetas enumeradas en la especificación, la etiqueta <p> se cierra automáticamente mediante la etiqueta <div> , que deja la etiqueta </p> sin una <p> coincidente. El navegador está dentro de sus derechos para intentar corregirlo agregando una etiqueta <p> abierta después del <div> :
<p></p><div></div><p></p>
No puede poner un <div> dentro de un <p> y obtener resultados consistentes de varios navegadores. Proporcione a los navegadores HTML válido y se comportarán mejor.
Sin embargo, puede poner <div> dentro de un <div> así que si reemplaza su <p> con <div class="p"> y le da un estilo apropiado, puede obtener lo que desea.
Su referencia en about.com no está de acuerdo con la especificación en w3.org, su referencia lo está engañando.
Esta pregunta ya tiene una respuesta aquí:
De http://webdesign.about.com/od/htmltags/p/aadivtag.htm
En HTML 4, el elemento DIV no puede estar dentro de otro elemento de nivel de bloque, como un elemento P. Sin embargo, en HTML5, el elemento DIV se puede encontrar dentro y puede contener otros elementos de contenido de flujo, como P y DIV.
Tengo algo así dentro de un formulario
<p> <label...> <input...> </p>
pero cuando Rails genera automáticamente un error_explanation div envolviendo la entrada, el párrafo se convierte en dos, y veo esto en Firebug:
<p> <label...> </p> <div...> <input...> </div> <p> </p>
Además, si solo agrego un simple
<p> <div> test </div> </p>
se produce el mismo problema ( JSFiddle ) y se representa en DOM como
<p> </p> <div> test </div> <p> </p>
¿Por qué?
Actualización: le envié un correo electrónico al autor del artículo y ella hizo los cambios apropiados.
Es imposible colocar un elemento <div> dentro de un <p> en el DOM porque la etiqueta de apertura <div> cerrará automáticamente el elemento <p> .
<P> no permitirá otro elemento dentro de él. solo se permiten los elementos <span> y <strong> . En <p></p> solo podemos agregar etiquetas relacionadas con el texto. consulte este enlace para saber más
La página webdesign.about.com es simplemente incorrecta; probablemente malinterpretaron los borradores de HTML5. Permitir DIV dentro de P causaría gran confusión; No creo que se haya tenido en cuenta durante el desarrollo de HTML5.
Si intenta utilizar DIV dentro de P, la etiqueta de inicio DIV cerrará implícitamente el elemento P. Esto probablemente explica las cosas que has visto.
Para evitar el problema, no use P si el contenido contiene, o puede contener, un elemento DIV. Use DIV en su lugar.
Si bien esta es una pregunta bastante antigua, pensé en compartir mi solución al problema para ayudar a otras personas que puedan tropezar con esta página en google.
Como se ha dicho, no está permitido poner elementos de bloque dentro de una etiqueta p. Sin embargo, en la práctica, esto no es del todo cierto. El valor de visualización real es, de hecho, completamente irrelevante; lo único que se considera es cuál es el valor de visualización predeterminado para la etiqueta, por ejemplo, "bloque" para divs y "en línea" para span. Si cambia el valor de visualización, el navegador aún cerrará prematuramente la etiqueta p.
Sin embargo, esto también funciona al revés. Puede diseñar una etiqueta span para que se comporte exactamente como una etiqueta div, pero seguirá siendo aceptada dentro del entorno p.
Entonces, en lugar de hacer esto:
<p>
<div>test</div>
</p>
Puedes hacerlo:
<p>
<span style="display:block">test</span>
</p>
Solo recuerde que el navegador valida el contenido del entorno p recursivamente, por lo que incluso algo como esto:
<p>
<span style="display:block">
<div>test</div>
</span>
</p>
Dará como resultado lo siguiente:
<p>
<span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>
Espero que esto ayude a alguien por ahí :)