Elementos de bloque y en línea

Todos los elementos que van dentro del <body> se comportan, por defecto, de una de dos maneras: en bloque o en línea. Saber cuál es cuál explica por qué unos elementos se colocan uno debajo de otro y otros uno al lado de otro.

Elementos de bloque

• Empiezan siempre en una línea nueva.
• Ocupan todo el ancho disponible, aunque su contenido sea corto.
• Suelen tener margen por arriba y por abajo.

Ejemplos: <div>, <p>, <h1>…<h6>, <ul>, <ol>, <li>, <table>, <form>, <section>, <article>, <header>, <footer>, <nav>, <blockquote>, <pre>.

Elementos en línea

• No empiezan en una línea nueva: van uno detrás de otro, como las palabras de un texto.
• Solo ocupan lo que mide su contenido.

Ejemplos: <span>, <a>, <strong>, <em>, <code>, <img>, <label>, <abbr>, <input>, <button>.

Qué puede ir dentro de qué

• Un elemento de bloque puede contener elementos en línea y, en general, otros elementos de bloque.
• Un elemento en línea puede contener texto y otros elementos en línea, pero no elementos de bloque.
• Excepción importante: <p> es de bloque, pero solo admite contenido en línea. No metas un <div>, una lista o un título dentro de un párrafo.
• Otra excepción, a favor: en HTML5 un enlace <a> sí puede envolver bloques, por ejemplo una tarjeta entera, siempre que no contenga otros enlaces ni botones.

<!-- ✓ Bien: una tarjeta entera que es un enlace -->
<a href="/html/" class="tarjeta">
  <h3>Curso de HTML</h3>
  <p>16 lecciones desde cero.</p>
</a>

<!-- ✗ Mal: un bloque dentro de un span -->
<span><div>...</div></span>

<div>: la caja genérica de bloque

<div> (de división) es un contenedor sin significado propio. Sirve para agrupar elementos y poder darles estilo o colocarlos con CSS:

<div class="tarjeta">
  <img src="gato.jpg" alt="Gato naranja tumbado al sol">
  <h3>Gatos</h3>
  <p>Todo sobre su cuidado.</p>
</div>

Antes de usar un <div>, pregúntate si existe una etiqueta con significado que encaje mejor: <header>, <nav>, <main>, <section>, <article>, <aside> o <footer>. Lo verás en la lección de HTML semántico. El <div> es para cuando ninguna encaja.

<span>: la caja genérica en línea

<span> es lo mismo que <div> pero en línea: no crea un bloque ni un salto de línea. Se usa para dar estilo a unas pocas palabras dentro de un texto:

<p>Precio: <span class="precio-antiguo">30 €</span> <span class="precio">19 €</span></p>

Como no crea un bloque, en un <span> no tiene efecto text-align ni el ancho (width).

Cambiar el comportamiento con CSS

Ser de bloque o de línea es solo el comportamiento por defecto. Con la propiedad display de CSS puedes cambiarlo:

nav a { display: block; }          /* los enlaces del menú, uno debajo de otro */
li { display: inline; }            /* los elementos de una lista, en fila */
.boton { display: inline-block; }  /* en línea, pero respeta ancho, alto y márgenes */

Lo que no cambia con CSS son las reglas de anidado del HTML: un <div> dentro de un <p> sigue siendo incorrecto aunque le pongas display: inline. En CSS lo verás en detalle en la lección de display.

Resumen

	Bloque	En línea
Empieza en línea nueva	Sí	No
Ancho	Todo el disponible	El de su contenido
Contenedor genérico	<div>	<span>
Respeta width y height	Sí	No
Ejemplos	p, h1, ul, section	a, strong, em, img

<p>Introducción <div>Detalles</div></p>