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>
?
Respuestas:
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
en 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.
La <p>
etiqueta es un p
aragraph, y como tal, es un elemento de bloque (como es, por ejemplo, h1
y div
), mientras que span
es un elemento en línea (como, por ejemplo, b
y 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 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
.
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.
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.
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.
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 .
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.
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"
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 ).