Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
"Semántica" significa significado. Una etiqueta semántica no solo agrupa contenido, sino que describe qué es. Eso mejora la accesibilidad, el SEO y la legibilidad de tu código.
Explicación
Compara estas etiquetas semánticas con su equivalente genérico:
<h1>Comunica "este es el título principal", a diferencia de un <div> con solo apariencia de título.
<button>Es enfocable con teclado y accesible para lectores de pantalla; un <div onclick> no lo es por defecto.
<strong>Comunica "esto es importante", no solo "esto se ve en negrita" como haría un <span> con estilo.
<main>Identifica el contenido principal de la página para navegación rápida y lectores de pantalla.
Reto rápido
Reemplaza el <div class="boton"> por un <button> real, manteniendo el mismo texto.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Antes de usar un <div> genérico, pregúntate si existe una etiqueta HTML que describa exactamente lo que estás construyendo.
Dato extra
Los lectores de pantalla permiten a las personas saltar directamente entre secciones semánticas (como <nav> o <main>) de una página, algo que no pueden hacer con <div>s genéricos.
Error común
Elegir una etiqueta semántica solo por su apariencia visual por defecto, y no por su significado. Por ejemplo, usar <strong> únicamente porque quieres texto en negrita, cuando el texto no es realmente "importante".
Siguiente paso
Ya entiendes por qué la semántica importa. Ahora conoce las etiquetas semánticas que forman el esqueleto de una página completa.
Ir a la siguiente lección