Cargando...

Bloque e inline en HTML

Tras las tablas, mira el flujo de la página: cada elemento tiene un hábito display por defecto. Dos familias: block e inline.

Qué significa flujo aquí

El orden de empaquetado por defecto sin CSS de layout. El párrafo es block; el enlace sigue inline en la frase.

Respuesta directa

Block: p, div, encabezados, listas, table. Inline: a, strong, em, span, code. Memoriza los defaults primero.

📊 Common defaults

Category	Examples	Flow habit
Block	p, div, h1–h6, ul, ol, section, table	New line, full available width (typical)
Inline	a, strong, em, span, code	Continues inside the text line

Cajas block con piezas inline

Un p es el contenedor block; a/strong siguen en la línea. Un div siguiente abre otro bloque.

Block paragraph with inline pieces

html

HTML Code

<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

Lectura del ejemplo de párrafo

p posee la caja
a y strong en la línea
div debajo es otro block

`div` frente a `span`

div es block por defecto; span es inline. Frases cortas en la oración → span.

div versus span contrast

html

HTML Code

<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

Lectura div/span

span dentro de la línea
div en su propia fila block

CSS puede cambiar display después

Aprende defaults para reconocer overrides.

Práctica

Dos p apilados
Dos a en un párrafo
Compara span y div
strong sin forzar línea nueva
Anota tres de cada categoría

Errores fáciles

div para cada frase pequeña
esperar línea nueva de strong
olvidar el override CSS

Resumen

Block ≈ línea nueva
Inline ≈ dentro de la línea
span para ganchos cortos
CSS después

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma