Div, clases e IDs: las cajas genéricas
Todas las etiquetas que has visto hasta ahora tienen un significado propio: <p> es un párrafo, <h1> es un título. Pero a veces necesitas una caja que no signifique nada en concreto, solo un contenedor neutro para agrupar cosas y poder darles estilo o comportamiento en conjunto. Para eso existen <div> y <span> — y para identificarlas después, class e id.
Block vs. inline: las dos familias de elementos
Antes de conocer a los protagonistas de hoy, necesitas entender una distinción que lo explica casi todo en HTML: cada elemento se comporta como bloque o como en línea, y esa elección no es cosmética.
Ocupa todo el ancho disponible y siempre empieza en una línea nueva, como un ladrillo en una pared. <p>, <h1>-<h6>, <div>, <ul> son de este tipo. Apilados, forman la estructura vertical de la página.
Ocupa solo el espacio que necesita su contenido y fluye dentro de la misma línea, como una palabra más en una frase. <a>, <strong>, <em>, <span> son de este tipo. No puedes ponerles ancho o alto sin cambiar antes su comportamiento con CSS.
Piensa en los elementos block como cajas de mudanza apiladas en el suelo, una encima de otra. Y en los inline como palabras dentro de una frase: si la frase es muy larga, salta de línea sola, pero nunca empuja el resto del párrafo hacia abajo como sí hace una caja de mudanza nueva.
<div>, la caja neutra
<div> es el elemento block más genérico que
existe: no significa absolutamente nada por sí mismo. Es una caja vacía de
significado, pensada solo para agrupar otros elementos y poder tratarlos como
una unidad — aplicarles un fondo, centrarlos, ordenarlos con flexbox (lo verás
pronto en el curso de CSS).
Abusar de <div> para todo, incluso cuando
existe una etiqueta más adecuada. Si estás marcando una lista, usa
<ul>; si es un titular, usa
<h2>. A este vicio se le conoce, sin cariño
ninguno, como "divitis": una página entera hecha de cajas anónimas
donde nadie —ni Google, ni un lector de pantalla— entiende qué es cada cosa.
Usa <div> solo cuando de verdad no hay una
etiqueta con más significado que encaje.
class: la etiqueta que se repite
El atributo class es como una pegatina que le pones
a un elemento para identificar su "tipo" o "rol" dentro del diseño. Lo importante:
muchos elementos pueden compartir la misma clase, e incluso un
mismo elemento puede tener varias clases a la vez, separadas por espacios.
Fíjate en la segunda caja del ejemplo: tiene dos clases,
tarjeta y destacada,
separadas por un simple espacio. Recibe los estilos de ambas a la vez. Esto es
el corazón de cómo se organiza el CSS de cualquier proyecto real.
id: la etiqueta que no se repite
Si class es una pegatina que puedes poner en muchas
cajas, id es más parecido a un DNI: identifica a
un único elemento en toda la página, y no debería repetirse
jamás. Se usa para dos cosas muy concretas:
Saltar directamente a una sección con <a href="#seccion">, siempre que exista un elemento con id="seccion" en algún punto de la página. Es exactamente cómo funciona el índice lateral de este mismo curso.
Seleccionar un elemento concreto y único desde JavaScript, algo que verás con más detalle cuando este curso llegue a esa parte.
Regla mnemotécnica: class es para clasificar (varios elementos del mismo tipo), id es para identificar (un elemento único e irrepetible). Si dudas entre los dos, pregúntate: "¿voy a necesitar repetir este estilo en otro elemento más adelante?". Si la respuesta es sí o "no lo sé", usa class casi siempre — es la opción más flexible.
<span>: el div en línea
Si <div> es la caja neutra de tipo block,
<span> es su equivalente en línea: no significa
nada por sí mismo, pero en vez de ocupar una línea entera, vive dentro del flujo
normal del texto. Es la herramienta perfecta para darle estilo a una sola palabra
o frase dentro de un párrafo, sin romper el flujo del resto.
Nota cómo <span> no rompe el párrafo en dos
líneas separadas: el texto sigue fluyendo con normalidad, solo que ese fragmento
concreto lleva su propio estilo. Justo lo que <div>
no podría hacer sin desbaratar todo el párrafo.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Cuál de estas afirmaciones es correcta?
2. Quieres resaltar una sola palabra dentro de un párrafo sin romper el flujo del texto. ¿Qué usas?
3. ¿Qué característica define a un elemento "block"?