HTML desde cero: las etiquetas que sostienen tu web

HTML significa HyperText Markup Language: lenguaje de marcado de hipertexto. La palabra importante es marcado. El HTML no programa nada ni decide colores: se limita a poner etiquetas alrededor del contenido para decir qué es cada cosa.

Es literalmente el esqueleto. Sin él no hay página; con él mal puesto, la página existe pero cojea: Google no la entiende bien, un lector de pantalla la lee desordenada y el móvil la rompe.

Cómo es una etiqueta

Casi todas van en pareja: una de apertura y otra de cierre, con el contenido en medio.

<p>Esto es un párrafo.</p>

Algunas van solas, porque no envuelven nada: la imagen o el salto de línea, por ejemplo. Y muchas llevan atributos, que son datos extra: la dirección de un enlace, el texto alternativo de una imagen.

Las etiquetas que de verdad hay que conocer

Los encabezados: de h1 a h6

Son la jerarquía del documento, como el índice de un libro. El h1 es el título de la página y debería haber uno solo. Los h2 son los grandes apartados, los h3 los subapartados dentro de cada uno.

El error clásico es usarlos por tamaño en vez de por jerarquía: poner un h4 porque «queda más pequeño». El tamaño se cambia con CSS; la etiqueta indica importancia, no tipografía.

El párrafo: p

El bloque de texto normal. Parece obvio, pero muchísimas webs hechas con editores visuales meten cada línea dentro de un div genérico, y eso a un buscador no le dice nada.

El enlace: a

<a href="/contacto">Pide presupuesto</a>

El texto del enlace importa mucho: es lo que le dice a Google —y a quien navega con teclado— hacia dónde lleva. «Pide presupuesto» comunica; «haz clic aquí» no comunica nada.

La imagen: img

<img src="/taller.webp" alt="Interior del taller con dos elevadores">

El atributo alt no es opcional en la práctica. Es lo que se lee si la imagen no carga, lo que oye una persona ciega y lo único que entiende el buscador de esa foto. Describe la imagen; no metas ahí palabras clave a la fuerza.

Las listas: ul, ol y li

Una ul es una lista sin orden (viñetas) y una ol una lista ordenada (numerada). Cada punto va en un li. Escribir una lista a base de guiones dentro de un párrafo funciona visualmente y falla en todo lo demás.

Las etiquetas de estructura

Este grupo es el que separa una web moderna de una de hace quince años. En vez de rellenarlo todo de div, se usa la etiqueta que describe la función:

Usar la etiqueta correcta no es purismo. Es la diferencia entre que Google entienda dónde está tu contenido y que tenga que adivinarlo entre cuarenta divs iguales.

Lo que sí cambia el resultado

Si de todo esto solo te quedas con tres cosas, que sean estas:

1. Un h1 por página, y que diga de qué va esa página.
2. Todas las imágenes con alt descriptivo.
3. Enlaces con texto que se entienda fuera de contexto.

Son tres detalles pequeños que aparecen en casi todas las auditorías de webs pequeñas, y arreglarlos no cuesta dinero: cuesta un rato.