Definición
HTML (HyperText Markup Language) es el lenguaje que da estructura a una página web. No es un lenguaje de programación: no tiene condiciones ni bucles ni cálculos. Es un lenguaje de marcado, y lo que hace es etiquetar el contenido para que el navegador sepa qué es cada cosa.
El reparto de papeles en la web es este: HTML es la estructura, CSS es el aspecto y JavaScript es el comportamiento. Puedes tener una web solo con HTML —fea, pero funcional—. Sin HTML no hay nada.
Cuando escribes una dirección en el navegador, lo que el servidor devuelve por HTTP es, en el fondo, un documento HTML. Todo lo demás cuelga de ahí.
Cómo funciona
Un documento HTML es un árbol de etiquetas anidadas. Cada etiqueta abre, contiene algo y cierra:
<article>
<h1>Recepción de mercancía</h1>
<p>Procedimiento <strong>P-04</strong> del manual.</p>
</article>
Las etiquetas pueden llevar atributos que las configuran: la dirección de un enlace, el texto alternativo de una imagen, el identificador de un elemento.
El navegador lee ese documento y construye con él el DOM, que es la representación en memoria con la que trabajan CSS y JavaScript.
HTML semántico
Aquí está lo que separa a alguien que sabe HTML de alguien que solo lo escribe. Casi todo se puede maquetar con <div> y <span>, que son etiquetas sin significado. Y funciona: se ve igual.
Pero el navegador, Google y un lector de pantalla no ven lo mismo. Compara:
<!-- funciona, pero no dice nada -->
<div class="titulo-grande">Nuestros servicios</div>
<!-- dice lo que es -->
<h2>Nuestros servicios</h2>
Usar la etiqueta correcta —<nav> para la navegación, <main> para el contenido principal, <button> para algo que se pulsa, <table> para datos tabulares— te da gratis tres cosas: accesibilidad (quien navega con teclado o lector de pantalla puede orientarse), SEO (Google entiende la jerarquía) y comportamiento nativo (un <button> ya responde al Enter; un <div> no).
Ejemplo práctico
En la web de IMDICA tenemos fichas de producto. La primera versión maquetaba las características con <div> sueltos porque quedaba bien con el diseño.
Dos problemas aparecieron después. El primero: un cliente que navegaba con lector de pantalla no podía saltar entre secciones, porque no había encabezados de verdad que saltar. El segundo: Google no identificaba la estructura de la ficha y los fragmentos que sacaba en los resultados eran un revoltijo.
Rehacer la ficha con <h1> para el producto, <h2> para cada bloque, <table> para las características técnicas y <dl> para los pares dato/valor no cambió nada visualmente —el CSS hizo el mismo trabajo— y arregló las dos cosas a la vez.
La regla que uso desde entonces: elige la etiqueta por lo que el contenido es, no por cómo quieres que se vea. Lo segundo es trabajo del CSS.
Errores comunes
- Sopa de
<div>. Maquetarlo todo con divs. Funciona y te cuesta accesibilidad, SEO y comportamiento gratuito. - Saltarse niveles de encabezado. Pasar de
<h1>a<h4>porque el<h4>es del tamaño que querías. El tamaño lo pone el CSS. - Varios
<h1>sin sentido, o ninguno. Una página, una idea principal. <img>sinalt. Si la imagen es decorativa,alt="". Si aporta información, descríbela. Omitirlo no es una opción.- Un
<div>cononclicken vez de un<button>. No se puede pulsar con el teclado, no aparece en el orden de tabulación y no se anuncia como botón. - Escribir estilos en el HTML. El atributo
styleen cada elemento es el camino a un mantenimiento imposible.
Cuándo usarlo
Siempre que hagas web, que es lo mismo que decir siempre. Incluso cuando trabajas con React o Next.js, lo que escribes acaba siendo HTML: JSX es HTML con esteroides, y todas las reglas de arriba siguen aplicando.
Saber HTML bien es de las inversiones más baratas y más rentables del oficio: es pequeño, no cambia casi nunca y afecta a la accesibilidad, al SEO y al rendimiento de todo lo que construyes encima.
