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

  1. Dos p apilados
  2. Dos a en un párrafo
  3. Compara span y div
  4. strong sin forzar línea nueva
  5. 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

❓
5
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