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>
?
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.
p
no 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 ).p
enspan
. 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.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.fuente
La
<p>
etiqueta es unp
aragraph, y como tal, es un elemento de bloque (como es, por ejemplo,h1
ydiv
), mientras quespan
es un elemento en línea (como, por ejemplo,b
ya
)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
float
atributo.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
.fuente
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
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.
fuente
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
fuente
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 .fuente
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.fuente
Cuando estamos usando texto normal en ese momento queremos
<p>
etiquetar. Cuando estamos usando texto normal con algunos efectos en ese momento queremos<span>
etiquetarfuente
<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.
fuente
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"
fuente
p { float: left; margin: 0; }
No habrá espacio alrededor, parece similar al intervalo.
fuente