Las etiquetas HTML5 son las marcas escritas entre ángulos, como <p> o <header>, con las que se crean los elementos de una página web: indican al navegador qué es cada contenido (un párrafo, un título, un enlace, una imagen). Las cinco que más vas a usar al empezar son <html>, <head>, <body>, <h1> y <p>.
Si estás empezando en el mundo del desarrollo web, aprender a usar las etiquetas HTML5 será uno de tus primeros grandes logros. Son la base de cualquier página que ves en internet: indican al navegador qué mostrar y cómo hacerlo, desde un título o una imagen hasta un botón o un enlace.
En otras palabras, las etiquetas HTML5 son el lenguaje que estructura la web.
Y aunque suenen técnicas, dominarlas es más fácil de lo que crees: solo necesitas entender su lógica y practicar con ejemplos reales.
En este artículo aprenderás qué son las etiquetas HTML5, cómo funcionan, cuáles son las más usadas y por qué dominarlas es clave si quieres dedicarte al desarrollo web profesional.
Consejo Tech School: entender HTML es el primer paso para convertirte en desarrollador Full Stack. Es la base de todo lo que viene después: CSS, JavaScript, frameworks y programación avanzada.
¿Qué son las etiquetas HTML5?
HTML (HyperText Markup Language) es el lenguaje de marcado que permite dar estructura y contenido a una página web.
Las etiquetas HTML5 son los bloques de construcción que indican al navegador cómo debe interpretar cada parte del contenido.
Cada etiqueta se compone, por lo general, de una versión de apertura y otra de cierre, que delimitan el inicio y el fin del elemento.
Por ejemplo:
Sin estas etiquetas, los navegadores no podrían entender ni mostrar correctamente el contenido de una web.
¿Qué es una etiqueta en informática y en HTML?
En HTML, una etiqueta es la marca que se escribe entre ángulos (<p>) para crear un elemento. Un elemento suele constar de etiqueta de apertura, contenido y etiqueta de cierre: <p>Hola</p>. Algunos elementos, como <br> o <img>, son «vacíos»: solo llevan etiqueta de apertura y no se cierran.
Las etiquetas pueden llevar atributos, que añaden información al elemento. En <a href="https://ejemplo.com">, href es el atributo que indica a dónde apunta el enlace. En lenguaje coloquial se dice «etiqueta» para todo, pero técnicamente la etiqueta es el código y el elemento es la pieza completa.
Puedes consultar la lista completa de elementos y su estado en el catálogo de MDN y en el estándar HTML (WHATWG).
HTML5 es la versión moderna del lenguaje (hoy el estándar se mantiene como «HTML Living Standard», sin números de versión) e introdujo nuevas etiquetas semánticas (como <header>, <article> o <section>) que mejoran la accesibilidad, el SEO y la comprensión del contenido por parte de buscadores y herramientas de inteligencia artificial.
Tipos de etiquetas HTML5 y sus funciones principales
Existen decenas de etiquetas HTML5, pero no todas cumplen el mismo propósito.
Para que te resulte más fácil entenderlas, las agrupamos según la función que cumplen dentro de una página web.
A continuación verás las más utilizadas y por qué son importantes cuando empiezas a programar:
1. Elementos básicos o iniciales
Son las etiquetas que definen la estructura mínima de cualquier documento HTML.
<!DOCTYPE html>: indica al navegador que interprete la página con el estándar actual; si falta, muchos navegadores usan un modo de compatibilidad antiguo.<html>: es la etiqueta raíz; todo el contenido debe estar dentro de ella.<head>: contiene metadatos y configuraciones (título, scripts, enlaces a estilos, etc.).<body>: incluye el contenido visible de la página.
2. Elementos de metadatos
Estas etiquetas ayudan a los navegadores y buscadores a entender la información técnica del sitio.
<title>: define el título que se muestra en la pestaña del navegador y en los resultados de búsqueda.<meta>: almacena información sobre el sitio (idioma, autor, descripción…).<link>: conecta el HTML con archivos externos (por ejemplo, una hoja de estilos CSS).<style>: permite incluir CSS directamente en el documento.
3. Elementos de sección
Organizan el contenido en partes o bloques lógicos, mejorando la estructura semántica y el SEO.
<header>: cabecera de la página o sección.<nav>: navegación principal o secundaria.<main>: contenido principal de la página (solo uno visible por documento).<section>y<article>: agrupan contenido con significado propio (artículos, apartados…).<aside>: información complementaria (barras laterales, enlaces, etc.).<footer>: pie de página o sección.
4. Elementos semánticos y de texto
Dan significado y formato al contenido textual.
<h1>a<h6>: definen jerarquías de títulos.<p>: párrafos.<a>: enlaces internos o externos.<strong>y<em>: resaltan o enfatizan texto.<small>,<cite>,<blockquote>: añaden significado semántico específico.
5. Elementos de tablas
Sirven para mostrar datos organizados en filas y columnas.
<table>: crea la tabla.<tr>,<th>,<td>: filas, encabezados y celdas.<caption>: título descriptivo de la tabla.<colgroup>y<col>: permiten aplicar estilos a columnas específicas.
💡 Consejo Tech School: al usar etiquetas semánticas, facilitas el trabajo de los motores de búsqueda y mejoras la accesibilidad.
Por eso, dominar HTML5 no solo es aprender código, sino entender cómo se comunica la web.
5 etiquetas de HTML que debes conocer primero
Si solo vas a aprender cinco etiquetas HTML al principio, que sean estas: son las que forman el esqueleto de cualquier página y las que más repetirás.
<html>: elemento raíz; envuelve todo el documento.<head>: información técnica de la página (título, codificación, estilos).<body>: todo lo que el usuario ve.<h1>: el título principal de la página.<p>: un párrafo de texto.
Con ellas ya puedes escribir una página completa. Después añade <a> para enlazar, <img> para imágenes y las etiquetas semánticas (<header>, <main>, <footer>) para ordenar la estructura.
Etiquetas básicas de HTML5: las más usadas y para qué sirven
Si estás empezando a programar, hay algunas etiquetas que vas a usar una y otra vez.
Conocerlas te permitirá crear estructuras limpias, bien organizadas y fáciles de leer tanto para los usuarios como para los buscadores.
A continuación tienes una guía rápida con las etiquetas más importantes y su función principal 👇
Etiqueta | Función principal | Ejemplo práctico |
|---|---|---|
| Contiene todo el contenido visible de la página. |
|
| Guarda información técnica (metadatos, título, estilos). |
|
| Agrupa elementos relacionados dentro del diseño. |
|
| Crea enlaces a otras páginas o secciones. |
|
| Destaca texto importante con énfasis semántico. |
|
| Realiza un salto de línea. |
|
| Define títulos y subtítulos jerárquicos. |
|
| Inserta imágenes en la web. |
|
| Define párrafos de texto. |
|
Cómo usar correctamente las etiquetas básicas
Usa un solo
<h1>por página.
El estándar admite varios, pero MDN recomienda uno solo que describa el contenido de la página y no saltarse niveles (h1, h2, h3…).Asegúrate de incluir atributos “alt” en las imágenes.
Esto mejora la accesibilidad y el SEO.Evita abusar de
<div>sin clases o sin propósito.
Conviene priorizar etiquetas semánticas como<section>o<article>.Organiza el contenido jerárquicamente.
Así tu web será más legible tanto para los usuarios como para los crawlers de Google.
Dominar las etiquetas básicas es el primer paso para aprender a maquetar correctamente.
En nuestro máster Rock The Code Full Stack Developer, profundizas en HTML, CSS, JavaScript y frameworks modernos, creando proyectos reales desde cero.
Etiquetas HTML obsoletas que ya no debes usar
Algunas etiquetas que verás en tutoriales antiguos están obsoletas: el estándar HTML dice que los autores no deben usarlas y que se sustituyen por otros elementos o por CSS. Estas son las más habituales:
<font>: color y tamaño de letra se controlan con CSS.<center>: el centrado se hace con CSS.<big> y <tt>: se sustituyen por CSS (tamaño y fuente).<strike>: usa<del>para texto eliminado o<s>en otros casos.<acronym>: usa<abbr>.<marquee>: las animaciones se hacen con CSS.<frame>, <frameset> y <noframes>: para incrustar otra página usa<iframe>.
Que un navegador siga mostrándolas no significa que sean correctas: úsalas solo si mantienes código muy antiguo. Fuente: apartado «Non-conforming features» del estándar HTML. Si quieres ver cómo se combina HTML con CSS y JavaScript, te servirá la guía de qué es la programación web y la de Foundation CSS.
Ventajas de HTML5
Ideal para principiantes
Es un lenguaje sencillo, visual y fácil de entender. No necesitas compilar ni instalar nada: basta con un editor de texto y un navegador.Gratuito y de código abierto
Cualquiera puede usarlo, modificarlo y aprender de otros desarrolladores.
Esta apertura hace que la comunidad sea enorme y que encuentres soluciones para casi cualquier duda.Compatible con todos los navegadores y dispositivos
HTML5 está diseñado para funcionar en cualquier entorno: escritorio, tablet o móvil.
Además, incorpora etiquetas pensadas para mejorar la accesibilidad y el SEO.Base de todos los lenguajes web modernos
Todo lo que vendrá después (CSS, JavaScript, React, Node.js…) se construye sobre HTML.
Por eso, dominarlo te abre la puerta a convertirte en desarrollador web profesional.Fácil integración con otras tecnologías
Puedes combinarlo con CSS para el diseño visual, con JavaScript para la interacción o con APIs para añadir funcionalidades dinámicas.
Desventajas o limitaciones
HTML por sí solo no crea sitios interactivos
Si quieres añadir animaciones, formularios dinámicos o bases de datos, necesitarás aprender JavaScript o lenguajes back-end como Python o PHP.Estructura repetitiva
En proyectos grandes, escribir HTML manualmente puede volverse tedioso. Por eso se suelen usar frameworks o componentes reutilizables.Depende de otros lenguajes para la personalización completa
Aunque HTML5 define la estructura, la parte visual y funcional depende de CSS y JS.
Por qué aprender HTML5 hoy
Aprender HTML5 es mucho más que conocer un lenguaje:
es entender cómo funciona Internet desde dentro y abrir la puerta a una carrera en desarrollo web.
Con HTML5 puedes crear páginas web, aplicaciones, portfolios, tiendas online o incluso desarrollar proyectos personales que te permitan mostrar tu talento.
Además, es el punto de partida para dominar tecnologías clave como CSS, JavaScript o React, y avanzar hacia perfiles profesionales como:
Desarrollador/a Front-End
Desarrollador/a Full Stack
Diseñador/a web
Maquetador/a digital
Especialista en SEO técnico
Y lo mejor: no necesitas experiencia previa.
Solo curiosidad, constancia y una buena guía de aprendizaje.
1. Podrás crear páginas de todo tipo sin ser un experto en programación
Para usar HTML, no tienes que ser un experto en programación con años de experiencia. No importa si no sabes diseñar, o si apenas estás comenzando, pues con solo conocer los básicos de HTML podrás crear páginas web sencillas y empezar a practicar con proyectos propios.
2. Aumentas tus posibilidades profesionales
Aprender HTML es la llave que te abrirá la puerta a un nuevo campo laboral.
En sí mismo, este lenguaje te permite trabajar creando páginas webs. Pero también se relaciona con otros lenguajes más avanzados como JavaScript o PHP, lo que te ayudará a avanzar en tu perfil profesional.
Al saber más, podrás ofrecer servicios de mejor calidad a tus clientes.
3. Crear contenido
Crear contenido para la web es una salida habitual para quien sabe HTML. No importa el nicho que te guste, un blog es una gran oportunidad de negocio.
Al saber HTML, podrás crear un sinfín de páginas web, y cada una de ellas podría ser una fuente de ingresos que te ayudará a ser tu propio jefe.
4. Solo necesitas un editor de texto
Otra razón a considerar es que solo necesitarás un editor de texto. Otros lenguajes de programación como C++ requieren de compiladores para transformar el lenguaje humano en código máquina.
En la mayoría de los casos, esas herramientas añaden pasos de instalación y configuración que HTML no necesita.
Y en el caso de HTML, solo con el bloc de notas de Microsoft podrás dar inicio a tu próximo proyecto web.
5. Te apoyas en otras páginas
El HTML llega al navegador como texto, así que puedes inspeccionar la estructura de cualquier página web (clic derecho y «Inspeccionar»), cómo organizan la información y cuáles errores cometen.
Así, viendo las páginas de otros, aprenderás qué hacer, qué no hacer y te convertirás en un profesional calificado.
¡Comienza hoy mismo con tu formación!
HTML5 sigue siendo el corazón de la web moderna.
Si quieres iniciar tu carrera en tecnología, dominarlo te permitirá entender la lógica de cualquier sitio o aplicación y te abrirá las puertas a nuevas oportunidades profesionales.
Empieza hoy a construir tu futuro digital con ThePower Tech School y da tu primer paso hacia una carrera en desarrollo web.
👉 Descubre el máster Rock The Code
Preguntas frecuentes sobre HTML5 y sus etiquetas
¿Qué es HTML5 y para qué sirve?
HTML5 es la versión más moderna del lenguaje HTML. Sirve para estructurar y mostrar contenido web: texto, imágenes, enlaces, vídeos o formularios.
¿Por qué es importante aprender HTML5?
Porque es la base de toda página web. Aprenderlo te permitirá crear proyectos reales y avanzar hacia otros lenguajes más complejos como CSS o JavaScript.
¿Qué diferencia hay entre HTML y HTML5?
HTML5 es una versión mejorada: incluye nuevas etiquetas semánticas, soporte multimedia nativo y mejor compatibilidad con navegadores modernos.
¿Cuáles son las etiquetas más usadas en HTML5?
Algunas de las más comunes son: <html>, <head>, <body>, <a>, <img>, <p>, <h1>–<h6>, <section>, <article> y <footer>.
¿Dónde puedo aprender HTML5 desde cero?
En ThePower Tech School, dentro del programa Rock The Code Full Stack Developer, aprenderás HTML5 paso a paso con ejercicios prácticos y proyectos reales.
¿Qué son las etiquetas en HTML?
Son las marcas escritas entre ángulos, como <p> o <img>, con las que se crean los elementos de una página. Indican al navegador qué es cada contenido (párrafo, título, enlace, imagen) para que lo muestre y lo interprete bien, y también lo hagan los buscadores y los lectores de pantalla.
¿Cuáles son 5 etiquetas de HTML?
Cinco etiquetas básicas son <html> (raíz del documento), <head> (información técnica), <body> (contenido visible), <h1> (título principal) y <p> (párrafo). Con ellas ya se puede construir una página sencilla; después se añaden <a> para enlaces, <img> para imágenes y las etiquetas semánticas para ordenar el contenido.
¿Qué es una etiqueta en informática?
En informática, una etiqueta (tag) es una marca que añade significado o estructura a un dato. En HTML, es el código entre ángulos que crea un elemento, por ejemplo <h1>. El elemento es la pieza completa: apertura, contenido y cierre.
¿Cuál es la diferencia entre etiqueta y elemento en HTML?
La etiqueta es el código que se escribe (<p> y </p>); el elemento es el conjunto formado por las etiquetas y su contenido. Algunos elementos, como <br> o <img>, solo tienen etiqueta de apertura y no se cierran. Los atributos, como href en un enlace, se escriben dentro de la etiqueta de apertura y dan información extra sobre el elemento.
¿Qué etiquetas HTML están obsoletas?
Entre las más conocidas están <font>, <center>, <big>, <strike>, <tt>, <acronym>, <marquee> y <frame>. El estándar HTML indica que no deben usarse: el estilo se hace con CSS y el resto tiene un elemento sustituto, por ejemplo <abbr> en lugar de <acronym>. Aunque un navegador las siga mostrando, conviene retirarlas de tu código.
