Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
Cuando ninguna etiqueta describe exactamente lo que necesitas agrupar, existen dos contenedores genéricos: <div> y <span>. Aprende cuándo usar cada uno.
Explicación
<div> y <span> son contenedores genéricos: no significan nada por sí mismos, solo agrupan contenido para poder darle estilo o estructura con una clase.
<div>Contenedor de bloque: ocupa todo el ancho disponible y agrupa varios elementos.
<span>Contenedor en línea: envuelve una parte de texto sin romper el flujo del párrafo.
class="..."Identifica el grupo para poder aplicarle estilos con CSS o seleccionarlo con JavaScript.
Reto rápido
Agrupa el título y el párrafo de abajo dentro de un <div class="perfil"> y envuelve la palabra "backend" en un <span class="destacado">.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Usa <span> cuando necesites estilizar solo una parte de una línea de texto, y <div> cuando necesites agrupar varios elementos de bloque completos.
Dato extra
<div> y <span> no traen ningún estilo visual por defecto: son invisibles hasta que tú les aplicas CSS.
Error común
Usar <div> para todo, incluso donde ya existe una etiqueta más adecuada (como <p> o <button>). A este abuso se le conoce como "divitis" y hace el HTML menos legible y accesible.
Siguiente paso
Ya sabes agrupar contenido de forma genérica. Ahora conoce las etiquetas que sí describen su significado: las semánticas.
Ir a la siguiente lección