¿Cuándo usar <span> en lugar de <p>?

94

Como indica la pregunta, si tengo algún texto que quiero agregar en el HTML, ¿cuándo debo usar <p>y cuándo debo usar <span>?

Lejos
fuente

Respuestas:

91

Debe tener en cuenta que HTML está destinado a DESCRIBIR el contenido que contiene.

Entonces, si desea transmitir un párrafo, hágalo.

Sin embargo, tu comparación no es exactamente correcta. La comparación más directa sería

¿Cuándo usar a en <div>lugar de a <p>?

ya que ambos son elementos de nivel de bloque.

A <span>está en línea, muy parecido a un ancla ( <a>), <strong>énfasis ( <em>), etc., así que tenga en cuenta que por su naturaleza predeterminada tanto en html como en escritura natural, un párrafo causará un salto antes y después de sí mismo, como un <div>.

A veces, cuando se le da estilo a cosas - cosas en línea - a <span>es genial para darle algo a lo que "enganchar" el CSS, pero por lo demás es una etiqueta vacía sin significado semántico o estilístico.

Sucio
fuente
7
Al comparar elementos en línea con elementos de bloque, tenga cuidado de no describir los aspectos visuales. Como dice la especificación HTML5 , a pno necesariamente se le puede aplicar un estilo con saltos de línea circundantes, por ejemplo, podría ir seguido de un símbolo de pilcrow en línea . Los términos "en línea" y "bloquear" tampoco significan nada para los usuarios ciegos. Más bien, haga la distinción entre contenido fluido y contenido de redacción (consulte este enlace ).
chharvey
3
Además, padding-left se comporta de manera diferente pen span. En el párrafo, el relleno afecta a todas las líneas (bloque de texto), mientras que en el intervalo solo afecta a la primera línea.
diynevala
95

Semánticamente, usa <p>etiquetas para indicar párrafos. <span>se utiliza para aplicar estilo CSS y / o clase (s) a una sección arbitraria de texto y elementos en línea.

cletus
fuente
13

La <p>etiqueta es un paragraph, y como tal, es un elemento de bloque (como es, por ejemplo, h1y div), mientras que spanes un elemento en línea (como, por ejemplo, by a)

Los elementos de bloque crean de forma predeterminada algunos espacios en blanco por encima y por debajo de ellos mismos, y nada se puede alinear junto a ellos, a menos que les establezca un floatatributo.

Los elementos en línea tratan con tramos de texto dentro de un párrafo. Por lo general, no tienen márgenes y, como tales, no puede, por ejemplo, establecer un valor width.

David Hedlund
fuente
sí, el intervalo no tiene márgenes y, por lo tanto, es bueno como celda de tabla (td) tener la capacidad de usar el marcado html
Igor Fomenko
6

Span es completamente no semántico. No tiene sentido y sirve simplemente como elemento de efectos cosméticos.

Los párrafos tienen un significado semántico: le dicen a una máquina (como un navegador o un lector de pantalla) que el contenido que encapsulan es un bloque de texto y tiene el mismo significado que un párrafo de texto en un libro.


fuente
5

Hablando semánticamente, ap es una etiqueta de párrafo y debe usarse para dar formato a un párrafo de texto. Un intervalo es un cambio de formato en línea que no se maneja semánticamente.

Matt Kellogg
fuente
5

Un intervalo es un elemento de formato en línea que NO tiene un avance de línea por encima o por debajo.

A p es un elemento de bloque que TIENE un salto de línea implícito arriba y abajo.

http://w3schools.com/tags/default.asp

David Glass
fuente
4

Una explicación práctica: De forma predeterminada, <p> </p>agregará saltos de línea antes y después del texto adjunto (por lo que crea un párrafo). <span>no hace esto, por eso se llama en línea .

Felix Kling
fuente
3

La etiqueta p denota un elemento de párrafo. Tiene márgenes / relleno aplicados. Un tramo es una etiqueta en línea sin estilo. Una diferencia importante es que p es un elemento de bloque cuando span está en línea, lo que significa que <p>Hi</p><p>There</p>aparecería en diferentes líneas cuando <span>Hi</span><span>There</span>termina una al lado de la otra.

statenjason
fuente
3

Cuando estamos usando texto normal en ese momento queremos <p>etiquetar. Cuando estamos usando texto normal con algunos efectos en ese momento queremos <span>etiquetar

suhasini
fuente
2

<span> es una etiqueta en línea, <p> es una etiqueta de bloque, utilizada para párrafos. Los navegadores mostrarán una línea en blanco debajo de un párrafo, mientras que <span> s se mostrarán en la misma línea.

Richard H
fuente
0

la etiqueta es un elemento a nivel de bloque pero la etiqueta es un elemento en línea. Normalmente usamos la etiqueta span para diseñar elementos dentro del bloque. pero no es necesario usar la etiqueta span para el estilo en línea. Lo que tienes que hacer es; convertir elemento de bloque en elemento en línea usando "display: inline"

Pathirage de Lakruwan
fuente
-6
p {
    float: left;
    margin: 0;
}

No habrá espacio alrededor, parece similar al intervalo.

gasyoun
fuente