Si lleváis un tiempo desarrollando para la web, seguro que habéis oído hablar del salto que supuso HTML5 respecto a las versiones anteriores del lenguaje. No se trató simplemente de una actualización con un par de mejoras visuales, sino de un cambio profundo en la manera de estructurar, describir y enriquecer los contenidos de una página web. En este artículo vamos a repasar las etiquetas de HTML5 que todo desarrollador web debería dominar, y también aquellas que conviene evitar porque han quedado obsoletas o cuentan con mejores alternativas.

1. Un poco de contexto: por qué HTML5 cambió las reglas del juego

HTML5 nació con un objetivo claro: ofrecer un lenguaje más semántico, accesible y adaptable a los nuevos tiempos. Antes de su llegada, el HTML estaba repleto de etiquetas que servían más para “dar forma” visual que para describir la estructura del contenido. Eso provocaba que los navegadores, los motores de búsqueda y las tecnologías de asistencia tuvieran dificultades para entender qué papel cumplía cada parte de la página.

Con HTML5, el foco se trasladó a la semántica y la estructura lógica. Es decir, en lugar de tener un montón de <div>sin sentido, ahora podemos usar etiquetas como <header>, <article> o <section> para dejar claro el propósito de cada bloque de contenido.

2. Etiquetas semánticas esenciales de HTML5

La semántica es la base del nuevo HTML. Gracias a ella, el código se vuelve más legible, accesible y fácil de mantener. Veamos algunas de las etiquetas de HTML5 más importantes en este ámbito.

<header>

Define la cabecera de una página o de una sección. Puede incluir el logotipo, el menú de navegación, el título principal, etc. No tiene por qué aparecer solo una vez: cada artículo o sección puede tener su propio <header>.

<nav>

Se utiliza para contener los enlaces de navegación. Antes solíamos usar un simple <div> con clases como “menu” o “navbar”, pero con <nav> el significado semántico es mucho más claro, tanto para los motores de búsqueda como para los lectores de pantalla.

<section>

Representa una sección temática de un documento. Se recomienda usarla cuando el contenido tiene un título propio y forma parte de una estructura lógica dentro de la página. Por ejemplo, una sección de “Servicios”, otra de “Testimonios”, etc.

<article>

Esta etiqueta define un contenido independiente, que podría tener sentido incluso fuera del contexto del sitio: un post, una noticia, un comentario, un producto… En un blog, cada entrada debería ir dentro de un <article>.

<aside>

Perfecta para contenido complementario o tangencial al contenido principal: una barra lateral, un bloque de enlaces relacionados o una cita destacada.

<footer>

Marca el pie de página de un documento o de una sección. Igual que ocurre con <header>, puede haber varios <footer>en una misma página si cada artículo o bloque lo necesita.

Gracias a estas etiquetas de HTML5, el código no solo se vuelve más ordenado, sino que también mejora la accesibilidad, el posicionamiento SEO y la mantenibilidad del proyecto.

3. Etiquetas multimedia y de interacción

HTML5 no solo trajo mejoras semánticas, sino también nuevas etiquetas que permiten integrar contenido multimedia y aplicaciones interactivas sin depender de plugins externos como Flash.

<video>

Con esta etiqueta se pueden insertar vídeos directamente en la página, especificando el archivo de origen y los controles del reproductor. Es compatible con múltiples formatos y permite personalizar la interfaz mediante JavaScript y CSS.

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta la reproducción de vídeo.
</video>

<audio>

Igual que <video>, pero para archivos de sonido. Ideal para podcasts, efectos o música de fondo.

<canvas>

Una de las más potentes etiquetas de HTML5 para desarrolladores front-end. Permite dibujar gráficos, animaciones y hasta videojuegos directamente en el navegador utilizando JavaScript. Con ella se abrieron las puertas al desarrollo web interactivo sin necesidad de librerías externas.

<svg>

Aunque ya existía antes, con HTML5 se integró de forma nativa. Permite trabajar con gráficos vectoriales escalables, perfectos para iconos, logotipos y diagramas que mantengan su calidad sin importar el tamaño de pantalla.

<progress> y <meter>

Dos etiquetas pensadas para mostrar valores medibles. <progress> representa el avance de una tarea (como una barra de carga), mientras que <meter> muestra una medida dentro de un rango (por ejemplo, el nivel de batería o una puntuación).

4. Formularios más inteligentes

Los formularios también recibieron una gran mejora con HTML5. Ahora no hace falta depender de scripts complicados para validar o definir tipos de entrada. Algunas etiquetas de HTML5 y atributos muy útiles son:

• <input type="email">, <input type="tel">, <input type="url">: validan automáticamente el formato de los datos.

• <datalist>: crea listas desplegables de sugerencias para campos de texto.

• <output>: muestra el resultado de un cálculo o de una acción del usuario.

• Atributos como required, placeholder o pattern simplifican enormemente la validación de formularios sin escribir una sola línea de JavaScript.

5. Otras etiquetas útiles que deberíais conocer

HTML5 también introdujo elementos orientados a mejorar la accesibilidad, la organización y la interacción con las APIs del navegador:

• <main>: indica el contenido principal del documento, útil para lectores de pantalla.

• <figure> y <figcaption>: sirven para agrupar imágenes, gráficos o vídeos con su pie de descripción.

• <mark>: resalta texto importante o relevante, como los resultados de búsqueda.

• <time>: especifica fechas y horas en un formato legible por máquinas.

Estas pequeñas adiciones hacen que las etiquetas de HTML5 sean no solo más expresivas, sino también más poderosas a la hora de crear experiencias accesibles y coherentes.

6. Etiquetas que deberíais dejar de usar

Con cada nueva versión del estándar, algunas etiquetas pierden su utilidad o se reemplazan por alternativas más semánticas. Si todavía usáis algunas de las siguientes, es hora de decirles adiós:

• <center> → Reemplazada por CSS (text-align: center;).

• <font> → Obsoleta; usad reglas de estilo en hojas CSS.

• <big>, <small>, <strike>, <u> → Evitadlas; el formato visual debe manejarse desde el CSS.

• <frame>, <frameset>, <noframes> → Sustituidas por el uso de <iframe> o, mejor aún, por componentes modernos y layouts dinámicos.

El objetivo de eliminar estas etiquetas no es complicar el trabajo, sino separar claramente el contenido (HTML) de la presentación (CSS) y del comportamiento (JavaScript). Es un principio básico que mantiene el código limpio y fácil de mantener.

7. Buenas prácticas al usar las etiquetas de HTML5

Dominar las etiquetas de HTML5 no consiste solo en conocer su sintaxis, sino en aplicarlas con criterio. Aquí van algunos consejos prácticos:

1. No abuséis de la semántica. No todo tiene que ser un <section> o un <article>. Usadlas solo cuando aporten significado.

2. Estructurad con coherencia: un <header> general para la página, pero también cabeceras internas cuando sea necesario.

3. Aprovechad la accesibilidad. Las etiquetas semánticas ayudan a los lectores de pantalla, pero también debéis combinarlas con atributos ARIA cuando sea necesario.

4. Usad HTML válido. Podéis comprobar vuestro código con la herramienta oficial del W3C para evitar errores de marcado.

5. Pensad en SEO. Las etiquetas semánticas ayudan a Google a entender mejor la jerarquía y el contexto del contenido.

8. Conclusión: el poder de escribir HTML con sentido

Dominar las etiquetas de HTML5 es algo más que memorizar una lista de nombres. Se trata de entender cómo cada una contribuye a crear un documento más claro, accesible y mantenible. Gracias a ellas, podemos escribir código que no solo funciona, sino que comunica —a los navegadores, a los buscadores y a las personas— la intención detrás de cada elemento.

Dejar atrás las etiquetas obsoletas y adoptar un HTML semántico es un paso fundamental para todo desarrollador que aspire a construir proyectos modernos y sostenibles. Porque al final, el buen código no solo se ve bien: se entiende bien.

Aprende sobre Desarrollo Web con la Ruta de Frogames Formación

Si te ha interesado lo que has leído en este post, te encantará saber que puedes profundizar en este tema y en todas las competencias esenciales del Desarrollo Web a través de la Ruta de Aprendizaje de Frogames Formación.

Esta ruta ha sido creada para quienes desean iniciarse desde cero y avanzar paso a paso hasta dominar las herramientas, lenguajes y frameworks que utilizan los profesionales del desarrollo web actual. Aprenderás de forma práctica y progresiva a crear sitios y aplicaciones modernas, rápidas y seguras que funcionen en cualquier dispositivo y navegador.

A lo largo del recorrido, descubrirás tecnologías fundamentales como HTML5, CSS3, JavaScript, React o bases de datos. También te adentrarás en conceptos clave como el consumo de APIs, la accesibilidad y las buenas prácticas de mantenimiento y despliegue. Todo ello con un enfoque práctico y orientado a resultados reales.

Cada módulo está diseñado para que pongas en práctica lo aprendido a través de proyectos reales, construyendo poco a poco un porfolio profesional que refleje tu capacidad para desarrollar aplicaciones web completas, bien estructuradas y listas para producción.

Si quieres transformar tu pasión por la tecnología en una carrera sólida y aprender a diseñar, programar y publicar sitios y aplicaciones web desde cero, la Ruta de Desarrollo Web de Frogames Formación es exactamente lo que necesitas.

¡Da el primer paso hacia una profesión creativa, en constante evolución y llena de oportunidades!

¡Nos vemos en clase!