¿Cuál es la diferencia entre <p> y <div>?

¿Cuál es la diferencia entre <p> y <div>?

¿Se pueden usar indistintamente? ¿Cuáles son las aplicaciones?

El código anterior era

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

Entonces tengo que cambiarlo a

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

Fue la solución fácil. Y el CSS para el código anterior es

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

Entonces, la etiqueta div puede contener otros elementos. P no debería ser forzado a hacer eso.

Tienen una diferencia semántica : un <div>elemento está diseñado para describir un contenedor de datos, mientras que un <p>elemento está diseñado para describir un párrafo de contenido.

La semántica hace toda la diferencia. HTML es un lenguaje de marcado que significa que está diseñado para "marcar" el contenido de una manera que sea significativa para el consumidor del marcado. La mayoría de los desarrolladores creen que la semántica del documento son los estilos predeterminados y la representación que los navegadores aplican a estos elementos, pero ese no es el caso.

Los elementos que elija para marcar su contenido deben describir el contenido. No marque su documento en función de cómo debería verse, márquelo en función de lo que es.

Si necesitas un contenedor genérico puramente para propósitos de diseñoluego use a <div>. Si necesita un elemento para describir un párrafo de contenido, utilice a <p>.

Nota: Es importante entender que tanto <div>y <p>son elementos de bloque de nivel lo que significa que la mayoría de los navegadores tratarlos de una forma similar.

Todas son buenas respuestas, pero hay una diferencia que no he visto mencionada todavía, y así es como los navegadores las muestran por defecto. Los principales navegadores web mostrarán una <p>etiqueta con margen arriba y debajo del párrafo. Se <div>generará una etiqueta sin margen alguno.

<p> indica un párrafo y tiene un significado semántico.

<div> es simplemente un contenedor de bloques para otro contenido.

Todo lo que puede ir en un <p>puede ir en un <div>pero lo contrario no es cierto. <div>Las etiquetas pueden tener elementos de nivel de bloque como elementos secundarios. <p>los elementos no pueden

Echa un vistazo a la DTD HTML .

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

La única diferencia entre los dos elementos es la semántica. Ambos elementos, por defecto, tienen la visualización de la regla CSS: bloque (por lo tanto, nivel de bloque) aplicado a ellos; nada más (excepto un margen algo extra en algunos casos). Sin embargo, como se mencionó anteriormente, ambos difieren mucho en términos de semántica.

El <p>elemento, como su nombre lo indica, es para párrafos. Por lo tanto, <p>debe usarse cuando desee crear bloques de texto de párrafo.

El <div>elemento, sin embargo, tiene poco o ningún significado semántico y por lo tanto puede ser utilizado como un elemento genérico a nivel de bloque - con mayor frecuencia, las personas lo utilizan dentro de los diseños, ya que no tiene sentido semántico y se puede utilizar para cualquier cosa que por lo general requieren un bloque- elemento de nivel para.

Enlace para más detalles

DIV es un contenedor de nivel de bloque genérico que puede contener cualquier otro bloque o elementos en línea, incluidos otros elementos DIV, mientras que P es para ajustar párrafos (texto).

Sería mejor ver el estándar diseñado por W3.org. Aquí está la dirección: http://www.w3.org/

Una etiqueta "DIV" puede envolver la etiqueta "P" mientras que una etiqueta "P" no puede envolver la etiqueta "DIV", hasta ahora sé esta diferencia. Puede haber más otras diferencias.

Piense DIVcomo un elemento de agrupación. Pones elementos en un elemento DIV para que puedas establecer sus alineaciones

Mientras que "p"es simplemente crear un nuevo párrafo.

<p> representa un párrafo y <div> representa una 'división', supongo que la diferencia principal es que los divs son semánticamente 'sin sentido', donde se supone que un <p> representa algo relacionado con el texto mismo.

No querrías tener <p> s anidados, por ejemplo, ya que eso no tendría mucho sentido semántico (excepto en el sentido de las citas) Mientras que las personas usan <div> s anidados para el diseño de página.

De acuerdo con Wikipedia

En HTML, los elementos span y div se usan cuando partes de un documento no pueden ser descritas semánticamente por otros elementos HTML.

Una petiqueta es para un párrafo, generalmente usado para texto. Una divetiqueta es para división, y generalmente se usa para crear secciones de texto.

<p> se usa semánticamente para texto, párrafos usualmente.

<div>se usa para un bloque o área en una página web. Por ejemplo, podría usarse para hacer el área de un encabezado.

Se podría probablemente ser utilizados indistintamente, pero que no debería.