HTML, explicado: el esqueleto digital de toda página web

En una oración

HTML (HyperText Markup Language) es el lenguaje estándar para crear la estructura y el contenido de los documentos que se muestran en la World Wide Web.

El problema que resuelve

Imagina el internet antes de la web como la conocemos. Era un salvaje oeste para nerds, lleno de documentos desconectados. Los académicos en el CERN podían tener un artículo de investigación en su sistema local en un formato, mientras que una universidad en otro país tenía trabajos relacionados en un formato completamente diferente e incompatible. Compartir y, más importante aún, conectar esta información era una pesadilla digital.

Y ahí entra Tim Berners-Lee. A finales de los 80 y principios de los 90, no estaba intentando crear una plataforma para videos de gatos; estaba tratando de resolver un problema muy real para los científicos: ¿cómo compartimos y enlazamos nuestros documentos entre diferentes computadoras y redes de una manera simple y universal?

La solución fue una trifecta: HTTP (un protocolo para solicitar y enviar documentos), URLs (una dirección para cada documento) y HTML (un lenguaje para escribir los documentos).

La genialidad de HTML fue su simplicidad. Proporcionó un conjunto de "etiquetas" (tags) que cualquiera podía aprender, permitiéndoles marcar un documento de texto plano. Esta etiqueta le diría a un navegador: "Esto es un encabezado", "Esto es un párrafo" y, crucialmente, "Este texto de aquí es un hipervínculo a ese otro documento de allá". Esa capacidad de hipervínculo es el "HT" en HTML, y es lo que convirtió una colección de archivos aislados en una verdadera "telaraña" (web) de información interconectada. HTML se convirtió en la lingua franca del navegador, el plano universal para una página web.

Cómo funciona bajo el capó

A primera vista, el HTML parece texto plano con unos curiosos paréntesis angulares. Pero bajo el capó, el navegador realiza un sofisticado proceso de parseo para convertir ese texto en la página web viva y funcional con la que interactúas.

Etiquetas, Elementos y Atributos: La Santísima Trinidad

La sintaxis de HTML se basa en tres conceptos fundamentales. Una vez que los entiendes, ya dominas el 80% de HTML.

Etiqueta (Tag): Una instrucción envuelta en paréntesis angulares, como <p> o <img>. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura (<p>) y una de cierre (</p>). La etiqueta de cierre tiene una barra inclinada.
Elemento (Element): El paquete completo: la etiqueta de apertura, el contenido y la etiqueta de cierre. Es todo el conjunto.
Atributo (Attribute): Información o configuración extra para un elemento, que se coloca dentro de la etiqueta de apertura. Vienen en pares nombre="valor".

Diseccionemos un ejemplo simple:

<a href="https://flowing.dev" class="main-link">Visit FlowingDev</a>

Las etiquetas son <a> y </a>. La a viene de "anchor" (ancla) y se usa para hipervínculos.
El elemento es la línea completa, desde <a... hasta ...</a>.
El contenido es el texto "Visit FlowingDev".
Tiene dos atributos:
- href="https://flowing.dev": El atributo "hypertext reference" (referencia de hipertexto), que le dice al navegador a dónde ir cuando se hace clic en el enlace. Este es el atributo más importante para una etiqueta <a>.
- class="main-link": Un atributo "class", que es un "gancho" para que CSS le dé estilo al elemento o para que JavaScript lo encuentre.

El Document Object Model (DOM)

Cuando un navegador recibe tu archivo HTML, no solo lo lee línea por línea como un libro. Parsea el texto y construye en memoria una estructura de árbol lógico llamada Document Object Model (DOM).

Piensa en tu código fuente HTML como el plano arquitectónico de una casa. El DOM es la estructura real de la casa ya construida, una estructura tangible que puedes inspeccionar y modificar.

Considera esta página HTML básica:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>A Heading</h1>
    <p>Some text.</p>
  </body>
</html>

El navegador ve el anidamiento de las etiquetas y construye este árbol DOM:

html
- head
  - title
    - (texto) "Mi Página"
- body
  - h1
    - (texto) "Un Encabezado"
  - p
    - (texto) "Algo de texto."

Esta estructura de árbol lo es todo. CSS aplica estilos a los nodos de este árbol. JavaScript puede manipular este árbol —agregando nuevos nodos (elementos), eliminando los viejos o cambiando sus atributos— y así es como las páginas web modernas se vuelven dinámicas e interactivas sin necesidad de recargar. El DOM es el puente entre tu HTML estático y una aplicación dinámica.

Elementos de Bloque vs. en Línea

No todos los elementos son iguales. En términos de diseño (layout), se dividen en dos familias principales.

Elementos de Bloque (Block-level): Estos son los pesos pesados. Son estructurales. Típicamente comienzan en una nueva línea y ocupan todo el ancho disponible, como un párrafo en un libro.
- Ejemplos: <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>, <article>.
Elementos en Línea (Inline): Estos son más sutiles. No comienzan en una nueva línea y solo ocupan el ancho que su contenido necesita. Fluyen junto con el texto que los rodea.
- Ejemplos: <a>, <span>, <strong>, <em>, <img>, <input>.

Entender esta distinción es crucial para el layout con CSS. Intentar establecer un ancho (width) en un elemento en línea a menudo no funcionará como esperas, y preguntarse por qué dos elementos están uno al lado del otro cuando querías que estuvieran apilados es un clásico rompecabezas de bloque vs. en línea.

<div style="background-color: #eee;">
  This div is a block-level element. It takes the full width.
</div>
<div style="background-color: #ddd;">
  This is a second div. It starts on a new line.
</div>
<p>
  Here is a paragraph that contains an 
  <a href="#">inline link</a> and some 
  <strong>inline bold text</strong>. Notice how they all
  stay within the flow of the text.
</p>

Historias del mundo real

El botón "Comprar ahora" desalineado

A un desarrollador junior le encargaron agregar la descripción de un producto y un botón "Comprar ahora". Escribió lo que parecía lógico: <p>¡Producto increíble! ¡Solo $9.99! <button>Comprar ahora</button></p>. En su gran monitor de escritorio, se veía perfecto. El botón quedaba prolijo al final de la oración. El código se subió a producción.

Días después, las analíticas mostraron una caída en la conversión móvil. Un desarrollador senior investigó y abrió la página en un teléfono. El texto "¡Producto increíble! ¡Solo $9.99!" se cortaba y pasaba a una segunda línea, y el botón "Comprar ahora" se iba con él, terminando torpemente indentado debajo del inicio de la oración. Parecía roto. El desarrollador junior había puesto un elemento de tipo bloque (el button a menudo se comporta como uno) dentro de un párrafo, creando un comportamiento de ajuste de línea impredecible.

La solución fue simple: separar la estructura del contenido. El texto fue a su propia etiqueta <p> y el botón a su propio <div>. Ahora, el párrafo podía ajustarse todo lo que quisiera, y el botón, como un bloque distinto, siempre aparecería limpiamente debajo, sin importar el tamaño de la pantalla.

La lección: Entender el modelo de caja de HTML y la distinción entre bloque y en línea no es negociable para crear diseños (layouts) que sean predecibles y no se rompan en diferentes dispositivos.

El blog que no se podía rastrear

Una startup lanzó un nuevo y elegante blog impulsado por un framework de JavaScript de última generación. Era rápido, animado y se sentía como una aplicación nativa. El código fuente HTML de todo el sitio era, en efecto, solo un <div id="app"></div> y una etiqueta <script> masiva que construía la página en el navegador del usuario. Estaban orgullosos de su tecnología.

Seis meses después, tenían un problema: cero tráfico orgánico de Google. Eran invisibles. Cuando un crawler de un motor de búsqueda visitaba su sitio, no veía hermosos artículos y encabezados; veía un <div> vacío. Aunque el crawler de Google ha mejorado en la ejecución de JavaScript, es un paso adicional y costoso, y no es infalible. El blog no estaba comunicando su estructura o contenido en la lengua nativa del crawler: HTML plano y semántico.

El equipo tuvo que rediseñar la arquitectura de su sitio para usar Renderizado del Lado del Servidor (Server-Side Rendering o SSR), donde el servidor genera el HTML completo de cada página antes de enviarlo al navegador. En el momento en que implementaron el cambio, sus páginas comenzaron a indexarse correctamente.

La lección: El HTML semántico (<article>, <h1>, <p>) no es solo una sugerencia; es cómo comunicas el significado y la jerarquía de tu contenido a los motores de búsqueda y otras herramientas automatizadas.

La pesadilla de la accesibilidad

Una empresa lanzó un nuevo panel de control interno. Para obtener el aspecto de "pixel perfect" que querían los diseñadores, los desarrolladores usaron elementos <div> para absolutamente todo. Un <div> con un border-radius y un evento onClick de JavaScript se convirtió en un botón. Otro <div> con un evento onClick se convirtió en un enlace.

El panel era inutilizable para un empleado que dependía de un lector de pantalla. El lector de pantalla anunciaba "grupo" para cada elemento interactivo, sin dar pistas sobre si era un botón, un enlace u otra cosa. Además, como los <div> no son "enfocables" (focusable) por defecto, navegar con la tecla Tab era imposible.

Trajeron a un consultor de accesibilidad y quedó horrorizado. La solución implicó una refactorización tediosa pero esencial: reemplazar <div onClick="..."> con <button>, <a> y otros elementos semánticos apropiados. Estas etiquetas nativas vienen con una gran cantidad de funcionalidades de accesibilidad incorporadas de forma gratuita: foco con el teclado, anuncios de rol adecuados y más.

La lección: Usa la etiqueta HTML correcta para cada trabajo. No solo le estás diciendo al navegador cómo dibujar algo; le estás diciendo a las tecnologías de asistencia qué es.

Errores y trampas comunes

"Divitis". El uso excesivo y descontrolado de <div> y <span> cuando etiquetas más específicas y semánticas como <nav>, <main>, <article>, <aside> o <button> describirían mejor el propósito del contenido.
Olvidar los conceptos básicos de accesibilidad. La falta de atributos alt en las etiquetas <img> es un clásico. Esto deja a los usuarios con discapacidad visual sin información sobre la imagen. Del mismo modo, usar <b> para poner negrita en lugar de <strong> (que indica importancia) puede ser una oportunidad semántica perdida.
Anidamiento incorrecto de etiquetas. No puedes simplemente poner cualquier etiqueta dentro de otra. Un error común es envolver un elemento de nivel de bloque (como un <div>) dentro de un elemento en línea (como un <a>). Aunque los navegadores harán lo posible por renderizarlo, el DOM resultante puede ser un desastre y llevar a un comportamiento extraño.
Ignorar el <head>. La sección <head> es vital. Olvidar establecer la codificación de caracteres (<meta charset="UTF-8">) puede provocar que el texto se vea corrupto. Olvidar la metaetiqueta del viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0">) es la razón número uno por la que los sitios móviles se ven con zoom hacia afuera y diminutos.
Asumir un vocabulario cerrado. HTML es un lenguaje vivo. Se agregan nuevas etiquetas y atributos con el tiempo (p. ej., <main>, <picture>). Depender de patrones de 2010 significa que te estás perdiendo formas más robustas y semánticas de estructurar tus documentos.

Por qué deberías tenerlo en tu radar

Si trabajas con la web en cualquier capacidad profesional, HTML no es opcional.

Para los desarrolladores front-end, es la base de todo. Frameworks como React, Vue y Svelte son potentes, pero al final todos escupen HTML. Entender el resultado final te convierte en un desarrollador mucho más eficaz.
Para los desarrolladores back-end, a menudo estás generando fragmentos de HTML, construyendo APIs que serán consumidas por front-ends de HTML, o trabajando con motores de plantillas que producen HTML. Conocer sus reglas evita que entregues un marcado roto o no semántico.
Para los diseñadores UI/UX, entender los bloques de construcción básicos de HTML (div, span, p, h1) te ayuda a crear diseños que son prácticos de construir y que se mapean limpiamente a los componentes nativos de la web.
Para los especialistas en SEO y gestores de contenido, un conocimiento sólido de HTML (especialmente encabezados, etiquetas de título y metadescripciones) es fundamental para tu trabajo.

HTML es el lenguaje más duradero, retrocompatible y universal de la era digital. Una página web escrita en 1995 todavía se renderiza hoy. Es la única habilidad que ha seguido siendo esencial a través de cada ciclo de "hype" y guerra de frameworks, y no va a desaparecer.

Para profundizar

MDN Web Docs: HTML — La referencia definitiva para el día a día. Completa y con excelentes ejemplos.
WHATWG HTML Living Standard — La especificación oficial y continuamente actualizada para HTML. Esta es la fuente de la verdad.
Historia del HTML en Wikipedia — Para entender el contexto de cómo y por qué surgió el HTML.
Guía de inicio de SEO de Google — Muestra el impacto práctico de un buen HTML en la visibilidad en los motores de búsqueda.
The A11Y Project — Un esfuerzo impulsado por la comunidad para facilitar la accesibilidad web, con innumerables consejos basados en escribir HTML correctamente.