¿Qué es HTML?
HTML significa HyperText Markup Language. Es el lenguaje estándar utilizado para crear y estructurar contenido en la web. Cada página que has visitado —desde un blog personal sencillo hasta una aplicación web compleja— está construida sobre HTML.
El nombre lo dice todo. HyperText se refiere al texto que enlaza a otro texto, la idea que hizo posible la web: documentos conectados mediante enlaces. Markup significa que envuelves el contenido en etiquetas que describen qué es. Language significa que existen reglas y un vocabulario compartido —aunque HTML no es un lenguaje de programación.
Cuando escribes HTML, estás describiendo la estructura y el significado de un documento: qué parte es un encabezado, cuál es un párrafo, cuál es un menú de navegación, dónde va una imagen y cómo se organiza un formulario. El navegador lee tu HTML y lo convierte en la página que la gente ve. Nada en la web existe sin él.
La mejor manera de pensar en HTML es como el esqueleto de una página. Decide que aquí hay un encabezado, allí un párrafo, una imagen, un enlace y un formulario —pero no dice nada sobre el color, el tamaño o la posición. Esa separación es deliberada: la estructura pertenece a HTML, la apariencia pertenece a CSS y el comportamiento pertenece a JavaScript. Debido a que cada capa tiene una única función, las páginas son más fáciles de construir, probar y mantener, y un cambio en el diseño nunca te obliga a reescribir tu contenido.
Cómo funciona HTML
HTML está compuesto por elementos. Un elemento es una pieza de contenido envuelta en etiquetas. Una etiqueta se escribe entre paréntesis angulares, y la mayoría de los elementos tienen una etiqueta de apertura y una de cierre:
// index.html
<p class="intro">Hello, world!</p>Desglosándolo:
<p>es la etiqueta de apertura y</p>es la etiqueta de cierre.pes el nombre del elemento: un párrafo.class="intro"es un atributo: información adicional sobre el elemento.Hello, world!es el contenido.
Algunos elementos son void elements (elementos vacíos), que no tienen contenido ni etiqueta de cierre, como <img>, <br>, <input> y <meta>. Otros se anidan entre sí para formar un árbol, que es exactamente lo que el navegador construye al analizar tu archivo.
Cuando un navegador carga un archivo HTML, analiza el marcado de arriba hacia abajo y construye el DOM (Document Object Model), un árbol de objetos que representa tu página. Luego, CSS le da estilo a ese árbol y JavaScript puede leerlo y modificarlo. Esa es toda la plataforma web resumida en una frase.
Debido a que el DOM es un árbol, cada elemento tiene un padre y puede tener hijos. El elemento <body> contiene tus encabezados y párrafos, y cada uno de ellos puede contener enlaces, imágenes y texto. Cuando JavaScript añade o elimina un elemento más adelante, está editando este mismo árbol; por eso, entender el DOM hace que el resto del desarrollo frontend sea mucho más sencillo.
La anatomía de un documento HTML
Cada página HTML sigue el mismo esqueleto básico:
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My first page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>I am learning <strong>HTML</strong>.</p>
</body>
</html>Cada parte tiene una función:
<!doctype html>le indica al navegador que utilice el modo de estándares.<html lang="en">es el elemento raíz; el atributolangdeclara el idioma de la página para los lectores de pantalla y los motores de búsqueda.<head>contiene metadatos que no se muestran: el juego de caracteres, el viewport, el título y los enlaces a CSS.<title>es el nombre que se muestra en la pestaña del navegador y en los resultados de búsqueda.<body>contiene todo lo que el usuario ve realmente.
Escribiendo tu primera página HTML
La forma más rápida de entender HTML es escribiéndolo. Crea un archivo llamado index.html, pega el esqueleto anterior y ábrelo en tu navegador. Acabas de construir una página web.
A partir de ahí, ve añadiendo un elemento a la vez:
- Añade un
<h1>para el título de tu página y un<p>para una introducción. - Añade un enlace con
<a href="https://example.com">Example</a>. - Añade una imagen con
<img src="photo.jpg" alt="A description" />. - Agrupa el contenido con
<header>,<main>y<footer>. - Abre el archivo de nuevo; el navegador se actualiza instantáneamente con cada guardado.
No necesitas herramientas, frameworks ni pasos de compilación para empezar. Un editor de texto y un navegador son suficientes. Esa baja barrera de entrada es precisamente por lo que HTML es el mejor primer lenguaje para cualquiera que se inicie en el desarrollo web.
HTML semántico: la diferencia entre un div y un article
Puedes construir una página entera utilizando elementos <div>, pero no deberías hacerlo. El HTML semántico consiste en elegir elementos que describan su significado:
<header>,<nav>,<main>,<aside>,<footer>— puntos de referencia de la página.<article>— una pieza de contenido autónoma.<section>— una agrupación temática de contenido.<figure>y<figcaption>— contenido multimedia con un pie de foto.<time>,<mark>,<address>— contenido con un significado específico.
Compara una estructura vaga:
<!-- bad.html -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="post">...</div>
</div>con una semántica:
<!-- good.html -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>Pueden verse idénticas, pero la versión semántica les indica a los lectores de pantalla, a los motores de búsqueda y a otros desarrolladores exactamente qué es cada parte. Es uno de los hábitos con mayor impacto en el desarrollo frontend y no cuesta nada adoptarlo desde el primer día.
Formularios HTML y entrada de usuario
Los formularios son la manera en que los usuarios envían datos a un servidor: inicios de sesión, búsquedas, procesos de pago y registros. El elemento <form> envuelve las entradas, y <label> conecta una descripción con cada control:
<!-- subscribe.html -->
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" required />
<button type="submit">Subscribe</button>
</form>HTML5 añadió muchos tipos de entrada — email, url, number, date, range, color, search — además de atributos de validación integrados como required, minlength, pattern y min/max. Empareja siempre las entradas con etiquetas: es un requisito de accesibilidad y hace que los formularios sean utilizables con un teclado y un lector de pantalla.
HTML vs HTML5
| Característica | HTML (4.01) | HTML5 |
|---|---|---|
| Etiquetas semánticas | Limitadas | header, nav, article, section, aside, footer, main |
| Multimedia | Requiere plugins | <audio> y <video> nativos |
| Gráficos | Ninguno | <canvas> y <svg> |
| Tipos de input | Básicos | email, date, range, color y más |
| APIs | Mínimas | Storage, geolocalización, drag & drop, offline |
| Doctype | Largo y complejo | <!doctype html> simple |
La accesibilidad y el SEO comienzan con el HTML
Dos de los objetivos más importantes en el desarrollo web dependen en gran medida de tu HTML.
La accesibilidad depende de un marcado significativo: un orden lógico de encabezados, texto alt en las imágenes, etiquetas en los controles de formulario, elementos de referencia (landmark elements) y un contraste suficiente. La tecnología asistiva navega por tu página de la misma manera que lo hace un motor de búsqueda: a través de la estructura. Un usuario de lector de pantalla puede saltar entre puntos de referencia y encabezados precisamente porque el HTML indica qué es cada región.
El SEO también comienza con el HTML. Un único <h1> descriptivo, un <title> y una meta descripción bien redactados, texto de enlace descriptivo, datos estructurados y un marcado rápido y rastreable ayudan a los motores de búsqueda a entender y posicionar tu contenido. Ninguna cantidad de JavaScript puede arreglar una página con semántica HTML rota.
Mejores prácticas
Escribir un buen HTML no consiste en memorizar etiquetas, sino en elegir el elemento adecuado para cada tarea y mantener el documento limpio. Estos hábitos llevan segundos aplicar y dan frutos durante toda la vida de un proyecto:
- Usa elementos semánticos en lugar de una sopa de
<div>. - Mantén un solo
<h1>por página y nunca te saltes los niveles de encabezado. - Define siempre el
langen los<html>. - Añade texto
altsignificativo a las imágenes y usaalt=""para aquellas que sean puramente decorativas. - Conecta cada control de formulario a un
<label>. - Usa texto de enlace descriptivo; nunca pongas “haz clic aquí”.
- Valida tu marcado con el validador de la W3C.
- Prioriza la mejora progresiva: la página debe funcionar antes de que se ejecute JavaScript.
- Mantén la estructura del documento plana y legible.
Errores comunes
- Construirlo todo con
<div>y<span>. - Múltiples
<h1>o saltos en los niveles de los encabezados. - Texto de
altausente o poco detallado. - Texto de enlaces ambiguo, como “leer más”.
- Uso de etiquetas obsoletas como
<center>y<font>. - Olvidar el atributo
lang. - Uso excesivo de estilos inline en lugar de CSS.
- Inputs de formulario sin etiquetas.
¿Sigue valiendo la pena aprender HTML en 2026?
Absolutamente. HTML no va a desaparecer. Cada framework —React, Vue, Svelte, Astro y Next.js— termina renderizando HTML que el navegador muestra, por lo que, al escribir un componente, sigues describiendo la estructura. Los desarrolladores que entienden HTML crean interfaces más accesibles, rápidas y optimizadas para buscadores, ya que saben qué elemento utilizar en lugar de reconstruirlo todo usando contenedores genéricos. Como primer lenguaje, también es imbatible: puedes ver resultados en cuestión de minutos, sin necesidad de herramientas ni pasos de compilación, y cada habilidad posterior en el desarrollo web se apoya en la base que te proporciona. Apréndelo bien una vez y lo utilizarás durante el resto de tu carrera profesional.
Cómo aprender HTML
HTML es la tecnología web más sencilla para empezar y una de las más fáciles de subestimar. Un camino práctico sería:
- Aprende el esqueleto del documento y los elementos más comunes.
- Construye una página sencilla con encabezados, párrafos, enlaces, listas e imágenes.
- Aprende los elementos semánticos y utilízalos en maquetaciones reales.
- Practica con formularios, etiquetas y validaciones.
- Estudia los conceptos básicos de accesibilidad y audita tus páginas.
- Valida tu HTML y corrige las advertencias.
- Construye proyectos pequeños —una página de perfil, el diseño de un blog, una landing page— hasta que el uso de las etiquetas te resulte automático.
A partir de ahí, pasa a CSS, luego a JavaScript y después a un framework. Nuestro tutorial interactivo de HTML te guía en cada paso con ejercicios prácticos.