HTML es el lenguaje de marcado que describe la estructura y el significado de una página web. No es un lenguaje de programación: no calcula ni decide, describe. En una página conviven tres capas: HTML pone la estructura, CSS la presentación y JavaScript el comportamiento. La parte que más rinde aprender bien es la semántica: según MDN, que un elemento tenga semántica significa que aporta un rol —«el elemento h1 [...] le da al texto que envuelve el rol (o significado) de “encabezado de nivel superior de tu página”»—. Escribir todo con div se ve igual en pantalla y es peor en accesibilidad, en mantenimiento y en posicionamiento.
Ver índice de contenidos
Qué es y qué no es HTML
HTML —HyperText Markup Language, lenguaje de marcado de hipertexto— describe qué es cada parte de un documento: esto es un párrafo, esto un encabezado, esto una lista, esto un enlace. La palabra clave es marcado: se marca el contenido para decir qué papel cumple.
No es un lenguaje de programación, y aclararlo temprano evita frustraciones: no tiene variables, ni condicionales, ni bucles, así que no puede calcular ni tomar decisiones. Eso no lo vuelve menor. Las tres capas de una página tienen roles que conviene no mezclar:
| Capa | Qué aporta | Si falta |
|---|---|---|
| HTML | Estructura y contenido | No hay página |
| CSS | Presentación: colores, tipografía, disposición | La página se ve fea pero se lee y funciona |
| JavaScript | Comportamiento: reacciones, cálculo, pedidos al servidor | Se pierde la interactividad; el contenido sigue ahí si está bien hecho |
Ese orden tiene una consecuencia práctica que se llama mejora progresiva: si el contenido está en el HTML, la página sirve aunque el CSS tarde o el JavaScript falle. Si el contenido lo genera JavaScript, cuando algo se rompe no queda nada.
Etiqueta, elemento y atributo
Tres palabras que se usan como sinónimos y no lo son:
<a href="/contacto/" title="Ir al formulario">Escribinos</a>
└──┬──┘ └──────────┬────────────────────────┘ └───┬───┘ └─┬─┘
etiqueta atributos: nombre="valor" contenido cierre
└─────────────────── el ELEMENTO completo ─────────────────────┘La etiqueta es la marca entre ángulos. El elemento es todo el conjunto: apertura, atributos, contenido y cierre. Y los atributos son la configuración de ese elemento, siempre en la etiqueta de apertura.
Algunos elementos no tienen contenido ni cierre porque no envuelven nada: la imagen, el salto de línea, la etiqueta de metadatos. Se llaman vacíos y se escriben con una sola etiqueta.
La estructura mínima
Este es el esqueleto del que parte cualquier página. Cinco piezas y ninguna sobra:
<!DOCTYPE html> <!-- modo estándar -->
<html lang="es-AR"> <!-- idioma del contenido -->
<head>
<meta charset="utf-8"> <!-- acentos y eñes -->
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Qué hace este sitio</title> <!-- pestaña y buscadores -->
<meta name="description" content="Resumen de una o dos oraciones.">
</head>
<body>
<h1>El tema de la página</h1>
<p>El contenido visible va acá.</p>
</body>
</html>Dos de esas líneas se olvidan seguido y tienen consecuencias visibles. Sin codificación, los acentos y las eñes aparecen como símbolos raros. Sin la etiqueta de vista, el celular muestra la versión de escritorio encogida y hay que hacer zoom para leer.
Y una que casi nadie pone y conviene: el atributo de idioma. Los lectores de pantalla lo usan para elegir cómo pronunciar, y los buscadores para saber a quién mostrarle la página.
Qué es la semántica
Acá está la parte que separa a quien sabe HTML de quien conoce las etiquetas. La documentación de MDN define la semántica así: se refiere al significado y el rol de un elemento, no a su apariencia. Y da el ejemplo canónico: «el elemento h1 es un elemento semántico, que le da al texto que envuelve el rol (o significado) de “encabezado de nivel superior de tu página”».
El contraejemplo también es de MDN, y vale verlo porque es exactamente lo que se hace mal:
<!-- ✗ Se VE como un encabezado y no lo es -->
<span style="font-size: 32px; margin: 21px 0;">No es un encabezado</span>
<!-- ✓ ES un encabezado, y el CSS decide cómo se ve -->
<h1>Este es un encabezado de nivel superior</h1>MDN enumera lo que se gana escribiendo lo segundo. En buscadores: «los motores de búsqueda van a considerar sus contenidos como palabras clave importantes que influyen en el posicionamiento de la página». En accesibilidad: «los lectores de pantalla pueden usarlo como señal para ayudar a navegar la página a usuarios con discapacidad visual». Y en mantenimiento: «encontrar bloques de código con significado es mucho más fácil que buscar entre divs interminables».
La regla que resume todo
MDN la formula así: «el HTML debería escribirse para representar los datos que va a contener y no en función de su estilo de presentación por defecto». Si estás eligiendo un elemento porque se ve como querés, estás usando la herramienta equivocada: eso es trabajo del CSS.
Los elementos de estructura
Estos son los que arman el esqueleto de una página y reemplazan a la mayoría de los div:
| Elemento | Qué marca | Detalle |
|---|---|---|
header | La cabecera de la página o de una sección | Puede haber varios: uno del sitio y uno por artículo |
nav | Un bloque de navegación principal | No hace falta envolver cada grupo de enlaces |
main | El contenido principal, lo único que cambia entre páginas | Uno solo por página; es al que apunta el enlace para saltar el menú |
article | Una pieza que tiene sentido por sí sola | La prueba: ¿se podría sindicar aparte y seguiría entendiéndose? |
section | Una sección temática dentro de algo | Debería llevar su propio encabezado |
aside | Contenido relacionado pero secundario | Barra lateral, nota al margen, cajas de contexto |
footer | El pie de la página o de una sección | Autoría, fechas, enlaces legales |
figure y figcaption | Una ilustración con su epígrafe | Liga la imagen con su descripción de forma explícita |
div y span siguen siendo útiles: son los elementos sin significado, y hay que usarlos justo para eso, cuando lo único que hace falta es un contenedor para maquetar. El error no es usarlos, es usarlos para todo.
Encabezados: el índice del documento
Los seis niveles de encabezado no son seis tamaños de letra: son la estructura jerárquica del contenido. Y esa estructura se usa de verdad, porque un lector de pantalla puede listar todos los encabezados de una página y saltar entre ellos, igual que quien mira un índice.
De ahí las dos reglas:
- Un solo
h1El tema de la página. No es lo mismo que eltitle: ese va en la pestaña y en los resultados de búsqueda. - Sin saltear nivelesDe
h2se pasa ah3, no ah4. Un salto se percibe como una sección que falta.
El error clásico es elegir el nivel por el tamaño: «pongo h4 porque se ve mejor». El tamaño se decide con CSS en una línea; la jerarquía rota no se arregla con nada.
Imágenes y enlaces
Dos elementos de uso diario donde se concentran los problemas de accesibilidad.
En las imágenes, el texto alternativo describe la información que aporta la imagen en ese contexto, no la imagen. Si es un gráfico, dice qué muestra. Si es decorativa, el atributo va vacío —y eso es distinto de no ponerlo, porque sin atributo muchos lectores leen el nombre del archivo—. Conviene además declarar width y height: le permiten al navegador reservar el espacio y evitan que el texto salte mientras carga.
<!-- ✓ Informativa: qué muestra -->
<img src="ventas.png" width="800" height="400"
alt="Las ventas subieron de 200 a 850 unidades entre enero y junio">
<!-- ✓ Decorativa: se saltea -->
<img src="adorno.svg" alt="">
<!-- ✗ El texto del enlace tiene que decir adónde lleva -->
<a href="/precios/">Hacé clic acá</a>
<!-- ✓ -->
<a href="/precios/">Ver los planes y precios</a>En los enlaces, el texto tiene que tener sentido leído fuera de contexto, porque también se puede navegar saltando de enlace en enlace. Una página con quince «hacé clic acá» es una lista de quince destinos indistinguibles.
Formularios que se pueden usar
El formulario es donde más se nota si el HTML está bien escrito, porque es donde la gente tiene que hacer algo. Tres cosas resuelven la mayor parte:
<form action="/suscribir" method="post">
<!-- 1. label unido al campo por el id: al tocar el texto, enfoca -->
<label for="correo">Correo electrónico</label>
<input id="correo" name="correo"
type="email" <!-- 2. tipo correcto -->
autocomplete="email" <!-- 3. autocompletado -->
required>
<button type="submit">Suscribirme</button>
</form>El label unido por el identificador hace dos cosas: el lector de pantalla anuncia qué se está pidiendo, y al tocar el texto se enfoca el campo, lo que en un celular es la diferencia entre poder completarlo y no. El tipo correcto hace que el teléfono muestre el teclado adecuado y suma validación gratis. Y el autocompletado permite que el navegador ofrezca el dato ya guardado.
Los atributos como required mejoran la experiencia, pero se saltean con dos clics en las herramientas de desarrollo o mandando la petición directo. Todo dato que llega del formulario se valida de nuevo en el servidor, sin excepción. Lo del navegador es comodidad; lo del servidor es seguridad.
Validar y probar
Los navegadores reparan documentos mal formados, y esa amabilidad esconde errores hasta que aparecen en el peor momento. Cuatro comprobaciones baratas:
- Pasarlo por el validador del W3C. Detecta etiquetas sin cerrar, anidamientos imposibles e identificadores repetidos en segundos.
- Navegar con el tabulador. Sin tocar el mouse, ¿se llega a todo? ¿Se ve dónde está el foco? Es la prueba de accesibilidad más rápida que existe.
- Desactivar el CSS. Si sin estilos el documento sigue leyéndose en orden y se entiende la jerarquía, la estructura está bien.
- Revisar el esquema de encabezados. Que no haya saltos de nivel ni más de un
h1.
Errores frecuentes
- Armar todo con
div. Se ve igual y pierde accesibilidad, mantenimiento y señales para buscadores. - Elegir el encabezado por su tamaño. El tamaño es CSS; el nivel es jerarquía.
- Varios
h1o saltos de nivel. Rompe el índice que usan los lectores de pantalla. - Imágenes sin texto alternativo. O peor, con «imagen de» al principio, que el lector ya anuncia.
- Enlaces que dicen «hacé clic acá». Inútiles fuera de contexto.
- Campos sin
label. El texto de ejemplo dentro del campo no lo reemplaza: desaparece al escribir. - Confiar en la validación del navegador. Es comodidad, no seguridad.
- Olvidar la codificación o la etiqueta de vista. Acentos rotos y sitio ilegible en el celular.
Preguntas frecuentes
¿HTML es un lenguaje de programación?
No, y la distinción importa para no frustrarse. HTML es un lenguaje de marcado: describe la estructura y el significado de un documento, pero no tiene variables, condicionales ni bucles, así que no puede calcular ni decidir nada. Eso no lo vuelve menos importante. En una página web hay tres capas con roles distintos: HTML aporta la estructura y el contenido, CSS la presentación, y JavaScript el comportamiento. Se pueden hacer sitios enteros sin JavaScript; sin HTML no hay página.
¿Qué significa que el HTML sea semántico?
Que cada elemento se elige por el significado del contenido y no por cómo se ve. La documentación de MDN lo define como el hecho de que un elemento tenga un rol: el elemento h1 le da al texto que envuelve el papel de encabezado principal de la página. La contraparte es escribir todo con div y span, que no significan nada, y darles apariencia con CSS. El resultado se ve igual en la pantalla y es peor en todo lo demás: los lectores de pantalla pierden las referencias para navegar y los buscadores pierden las señales de qué es importante.
¿Cuál es la estructura mínima de una página HTML?
Cinco piezas y ninguna sobra. La declaración del tipo de documento, que le dice al navegador que use el modo estándar; el elemento raíz con el atributo de idioma, que los lectores de pantalla usan para elegir la pronunciación; la codificación de caracteres, sin la cual se rompen los acentos y las eñes; la etiqueta de vista, que hace que el sitio se adapte a pantallas chicas; y el título, que aparece en la pestaña y en los resultados de búsqueda. Con eso ya hay un documento válido al que agregarle contenido.
¿Por qué importa el orden de los encabezados?
Porque los encabezados forman el índice del documento, y hay gente que navega saltando de uno a otro. Un lector de pantalla puede listar todos los encabezados de una página y moverse entre ellos, así que un salto de h2 a h4 se percibe como una sección que falta. La regla práctica es simple: un solo h1 con el tema de la página, y de ahí hacia abajo sin saltear niveles. El tamaño del texto se decide con CSS: elegir un h4 porque se ve más chico es exactamente el error que la semántica evita.
¿Cómo se escribe un texto alternativo útil para una imagen?
Describiendo la información que aporta la imagen en ese contexto, no la imagen en sí. Si es un gráfico de ventas, el texto alternativo dice qué muestra el gráfico, no que es un gráfico de barras azul. Si la imagen es puramente decorativa, el atributo va vacío para que el lector de pantalla la saltee, y eso es distinto de no ponerlo, porque en ese caso muchos lectores leen el nombre del archivo. Y conviene evitar empezar con «imagen de»: el lector ya anuncia que es una imagen.
¿Hace falta cerrar todas las etiquetas?
El estándar permite omitir algunas etiquetas de cierre y los navegadores corrigen bastante desorden, pero conviene cerrarlas igual. La razón es práctica: cuando el navegador repara un documento mal formado, adivina, y su reparación puede no coincidir con lo que esperabas, sobre todo en tablas y listas anidadas. Además, un documento bien formado es el que después se puede recorrer con código sin sorpresas. Escribir HTML válido y pasarlo por el validador del W3C cuesta poco y evita errores difíciles de rastrear.
Fuentes
Documentación oficial y material de la comunidad consultados para esta guía. Fecha de consulta: 27 de julio de 2026.
Aportes de la comunidad Underc0de
- Underc0de, foro. Sección Programación web. Años de consultas y aportes de la comunidad sobre HTML, CSS y desarrollo de sitios.
- Underc0de, foro. Sección Diseño web. Maquetación, interfaces y criterios de diseño.
Documentación oficial
- MDN Web Docs. Semantics. La definición de semántica, el ejemplo del
h1, los beneficios y la regla sobre representar los datos, citados textualmente. - WHATWG. HTML Living Standard. El estándar vigente de HTML, referencia normativa de todos los elementos.
- MDN Web Docs. HTML. Documentación de referencia en español.
- W3C. Markup Validation Service. El validador mencionado en la guía.