¿Qué es HTML?

La idea en una frase#

HTML es el lenguaje con el que se dice qué es cada cosa en una página: esto es el título, esto es un párrafo, esto es un enlace, esto es el menú. Una página con buen HTML se entiende aunque le quites todo el diseño y todo el JavaScript.

Esa última parte es la que casi nadie practica. Se suele ver el HTML como un trámite antes de lo «interesante», y se escribe a la carrera: todo dentro de cajas genéricas, con títulos que solo son letra grande. Funciona mientras el diseño lo disimula. Cuando alguien lo lee de otra forma, con un lector de pantalla, desde un buscador o mediante una IA que resume tu sitio, se nota que la página no dice nada claro.

Marcar, no programar#

HTML no es un lenguaje de programación: no hace cálculos ni toma decisiones. Es un lenguaje de marcado. Tomas un texto y le pones marcas, llamadas etiquetas, que dicen qué es cada parte:

<h1>Refaccionaria El Norte</h1>
<p>Refacciones para maquinaria industrial en Saltillo.</p>
<a href="tel:+52-844-123-4567">Llámanos al 844 123 4567</a>

• <h1> marca el título principal.
• <p> marca un párrafo.
• <a> marca un enlace. Su href dice a dónde lleva; aquí, a una llamada.

Casi todas las etiquetas se abren y se cierran, y lo que queda en medio es su contenido. Algunas llevan atributos, datos extra como ese href.

La estructura de una página que se entiende#

Una página completa tiene un esqueleto fijo. Con unas pocas etiquetas con significado, además, deja claro qué parte es cuál:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Refaccionaria El Norte · Saltillo</title>
  </head>
  <body>
    <header>
      <p>Refaccionaria El Norte</p>
      <nav>
        <a href="/productos">Productos</a>
        <a href="/contacto">Contacto</a>
      </nav>
    </header>
    <main>
      <h1>Refacciones para maquinaria industrial</h1>
      <p>Surtimos rodamientos, bandas y sellos el mismo día en Saltillo y Ramos Arizpe.</p>
      <h2>Lo que más nos piden</h2>
      <ul>
        <li>Rodamientos</li>
        <li>Bandas de transmisión</li>
        <li>Sellos y retenes</li>
      </ul>
    </main>
    <footer>
      <p>Blvd. Ejemplo 123, Saltillo, Coahuila.</p>
    </footer>
  </body>
</html>

• <head> guarda información sobre la página que no se ve en ella: el idioma, la codificación para que la ñ y las tildes salgan bien, y el <title> de la pestaña y de Google.
• <header>, <nav>, <main> y <footer> dicen qué es cada zona: el encabezado, el menú, el contenido principal y el pie. Quien no ve la pantalla puede saltar directo al contenido.
• <ul> con <li> dice «esto es una lista». No son renglones sueltos: son tres elementos de un mismo grupo.

Escribe pensando en quien lee#

Un buen HTML empieza antes de escribir etiquetas: empieza por preguntarte cómo va a leer la página tu cliente.

• Los títulos son el índice. Un solo <h1> dice de qué trata la página. Los <h2> son sus secciones y los <h3>, las partes de cada sección. Si lees solo los títulos, deberías entender la página completa. No te saltes niveles para conseguir un tamaño de letra: el tamaño lo pone CSS.
• El orden del código es el orden de lectura. Lo primero que aparece en el HTML es lo primero que lee un buscador o un lector de pantalla. Pon primero lo importante.
• Una lista es una lista y una tabla es una tabla. Si son pasos, usa <ol>. Si son opciones, <ul>. Si comparas datos en filas y columnas, <table>.
• Los enlaces dicen a dónde llevan. «Ver precios de rodamientos» se entiende fuera de contexto; «clic aquí» no.
• Las imágenes llevan una descripción. El atributo alt dice qué muestra la imagen para quien no puede verla: <img src="banda.jpg" alt="Banda de transmisión de 2 metros">.

La prueba sin estilos#

Hay una forma sencilla de saber si tu HTML es bueno: quítale el diseño y léelo.

• En Firefox: menú Ver → Estilo de página → Sin estilo. Si no ves el menú, presiona Alt.
• En casi cualquier navegador, el modo de lectura muestra solo el contenido, sin diseño.

Lo que queda es tu HTML desnudo: texto negro sobre fondo blanco, títulos en orden, listas con viñetas. Hazte tres preguntas:

1. ¿Entiendo de qué trata la página con solo leer los títulos?
2. ¿El orden tiene sentido de arriba abajo?
3. ¿Sé a dónde lleva cada enlace?

Si la respuesta es sí, tu página también se entiende para Google, para las IA que resumen sitios y para quien navega con lector de pantalla. A cuidar esto último para los buscadores se le llama SEO, y para las IA, GEO; cada uno tiene su tutorial.

Un error común: negritas no es lo mismo que importante#

Es fácil pensar en HTML como formato: esto en negritas, esto más grande. Pero hay dos etiquetas que se ven igual y significan cosas distintas:

<p>Entrega: <strong>viernes antes de las 2 p. m.</strong></p>
<p>Modelo <b>XR-200</b>, disponible en tres medidas.</p>

• <strong> dice «esto es importante». Un lector de pantalla lo enfatiza y un buscador lo toma en cuenta.
• <b> solo lo resalta a la vista, sin darle más importancia.

Las dos se ven en negritas, pero solo una lleva significado. En HTML eliges por lo que algo es; cómo se ve, lo decide CSS.