Imagina que organizas una fiesta. Algunos invitados son extrovertidos — entran a la sala y se apoderan de todo el espacio, nadie puede estar a su lado. Otros son más discretos — se sientan junto a quien sea, ocupando solo el espacio justo.
En HTML, los elementos funcionan exactamente así. Unos son elementos de bloque, otros son elementos en línea. Entender esta diferencia es como descubrir las reglas invisibles que gobiernan cómo se organiza todo en la web.
Los elementos de bloque son territoriales. No importa cuánto contenido tengan — siempre reclaman toda la línea para ellos solos.
Prueba este código:
¿Ves cómo cada párrafo vive en su propia línea? Aunque "Hola." y "Adiós."
cabrían perfectamente uno al lado del otro, los <p> no lo permiten.
Son como dos personas que necesitan su propio sofá, aunque haya espacio de sobra.
Otros elementos de bloque que ya conoces: <h1> a <h6>, <blockquote>, y pronto conocerás más.
Todos comparten esa personalidad: "Esta línea es mía".
Los elementos en línea son lo opuesto. Se acomodan junto a otros, ocupando solo el espacio que su contenido necesita.
Prueba esto:
¡Sorpresa! Aunque escribiste cada <strong> en una línea diferente en tu código,
el navegador los muestra juntos. Los elementos en línea ignoran tus saltos de línea
y se acomodan como agua llenando un vaso.
Esto es precisamente lo que los hace útiles dentro de los párrafos:
Los <strong> y <em> viven dentro del flujo del texto, sin romperlo.
Imagina si cada palabra en negrita forzara una nueva línea — sería un caos.
Aquí viene algo que confunde a muchos principiantes. Mira estos dos códigos:
Pruébalos. El resultado es exactamente el mismo.
Los saltos de línea que escribes en tu código son solo para ti, para que puedas leer lo que escribes sin volverte loco. Al navegador le dan absolutamente igual.
Lo que determina si dos elementos aparecen en la misma línea o no es su naturaleza (bloque o línea) y sus estilos. Nada más.
Podrías escribir una página web entera en una sola línea interminable y funcionaría perfectamente. Sería imposible de mantener, pero funcionaría. Los saltos de línea y la indentación son regalos que te haces a ti mismo — el navegador ni se entera.
<span>: el camaleón invisibleAhora conocerás a uno de los elementos más misteriosos de HTML: el <span>.
Si pruebas este código, verás... absolutamente nada especial.
El <span> no tiene estilo propio. No pone negrita, no pone cursiva, no hace nada visible.
¿Entonces para qué sirve?
El <span> es como una etiqueta invisible que pones en parte del texto para poder
encontrarla después. Cuando aprendas CSS, podrás decirle al navegador:
"¿Ves ese span? Quiero que sea rojo". O azul. O con sombra. O animado.
Es un contenedor vacío esperando a que le des propósito. Por ahora, solo necesitas saber que existe y que pronto se convertirá en una de tus herramientas favoritas.
<div>Si <span> es el contenedor invisible en línea, <div> es su hermano de bloque.
También es invisible por defecto, pero ocupa toda la línea.
Los <div> son los ladrillos con los que se construyen las estructuras de las páginas web.
Casi todo lo que ves en internet — columnas, tarjetas, secciones —
son <div> vestidos con estilos.
Experimenta con lo que has aprendido. Crea un párrafo que contenga
al menos un <strong>, un <em> y un <span>. Observa cómo todos conviven
en la misma línea, cada uno esperando su momento de brillar.
Lo invisible de hoy será lo visible de mañana...