Qué es HTML: etiquetas, un ejemplo de 13 líneas y lo que Google lee de tu web

HTML es el lenguaje con el que se escriben las páginas web: un sistema de etiquetas que le dice al navegador qué parte de un documento es un título, cuál es un párrafo, cuál una foto y cuál un enlace. Sus siglas vienen del inglés HyperText Markup Language, «lenguaje de marcado de hipertexto». No dibuja nada ni hace cuentas: marca el contenido para que el navegador sepa cómo mostrar cada parte.

Para entenderlo no hace falta saber programar. Abajo tienes un ejemplo de 13 líneas para probar en tu navegador, cómo se reparte el trabajo con CSS y JavaScript, lo que hay dentro del HTML de un artículo de este blog —lo he medido— y qué partes de ese archivo mira Google.

Qué es HTML, en una frase

Un documento HTML es un archivo de texto corriente en el que el contenido va rodeado de marcas escritas entre los signos < y >. La guía de iniciación de MDN, la documentación para desarrolladores de Mozilla, lo define como un lenguaje de marcado formado por elementos que «envuelven» el contenido para definir su estructura¹. La palabra que importa es estructura: HTML dice qué es cada cosa, no cómo se ve.

Lo de «hipertexto» se refiere a los enlaces: texto que te lleva a otro documento, esté en el mismo ordenador o en la otra punta del mundo. Tim Berners-Lee, que inventó la web en 1989, escribió también la primera versión del lenguaje, y en octubre de 1990 ya tenía funcionando el primer servidor y el primer navegador².

Una duda que sale en el propio autocompletado de Google: HTML no es un lenguaje de programación. No tiene variables, ni condiciones, ni bucles; no puede decidir «si el usuario pulsa aquí, haz esto». Describe un documento, como las marcas que un corrector pone en los márgenes de un manuscrito. Eso no le quita importancia, pero explica por qué lo básico se entiende en una tarde.

Etiquetas, elementos y atributos

Una etiqueta es la marca en sí. <p> abre un párrafo y </p> lo cierra: la barra indica el cierre. Un elemento es el conjunto de etiqueta de apertura, contenido y etiqueta de cierre, de modo que <p>Abrimos a las 7:30.</p> es un elemento párrafo. Y un atributo es un dato extra que va dentro de la etiqueta de apertura, con la forma nombre="valor"¹. Este es el elemento de una foto:

<img src="hogaza.jpg" alt="Hogaza de centeno recién salida del horno">

src dice dónde está el archivo de la imagen y alt es el texto alternativo, el que la sustituye cuando no se puede ver. La etiqueta <img> no tiene cierre porque no envuelve nada: es lo que se llama un elemento vacío.

Con un puñado de etiquetas se escribe la mayor parte de una página:

Un ejemplo mínimo que puedes probar hoy

Esto es una página web completa. No le falta nada para que un navegador la abra:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Panadería Lola</title>
  </head>
  <body>
    <h1>Panadería Lola</h1>
    <p>Pan de masa madre cada mañana desde las <strong>7:30</strong>.</p>
    <img src="hogaza.jpg" alt="Hogaza de centeno recién salida del horno">
    <a href="horario.html">Ver el horario</a>
  </body>
</html>

Línea a línea, sin tecnicismos:

• <!doctype html> avisa al navegador de que el documento está escrito en HTML actual.
• <html lang="es"> abre el documento y declara que está en español, algo que usan los lectores de pantalla para pronunciar bien y los navegadores para ofrecer traducción.
• <head> es la cabecera, lo que no se ve dentro de la página. <meta charset="utf-8"> hace que las tildes y la eñe salgan bien, y <title> es el nombre que aparece en la pestaña del navegador y, muchas veces, en Google.
• <body> es lo que sí se ve: un título principal, un párrafo con una hora resaltada, una foto con su descripción y un enlace a otra página.

Para probarlo, copia el texto en el Bloc de notas de Windows —o en Editor de Texto (TextEdit) en Mac, después de pasarlo a texto sin formato desde el menú Formato—, guárdalo como panaderia.html (en el Bloc de notas, elige «Todos los archivos» en Tipo para que no le añada .txt) y ábrelo con doble clic. Verás el título en grande, el párrafo, el texto alternativo o un icono de imagen rota en el sitio de la foto —porque hogaza.jpg no existe en tu ordenador— y un enlace subrayado. Feo, pero funciona. Antes de publicarlo lo pasé por el validador oficial del W3C, el consorcio que mantiene los estándares de la web: cero errores y cero avisos³.

El camino inverso también vale. En casi cualquier web, pulsa Ctrl+U en Chrome o Firefox para Windows (Opción+Cmd+U en Chrome para Mac) y verás su HTML tal cual llega a tu ordenador.

HTML, CSS y JavaScript: quién hace qué

La página de la panadería parece de los años noventa porque solo lleva HTML. Las webs que visitas a diario le suman otros dos lenguajes:

El navegador lee primero el HTML, y es ahí donde descubre qué hojas de estilo (CSS) y qué programas (JavaScript) tiene que descargar. CSS y JavaScript se apoyan en él; HTML es lo único imprescindible.

En este blog, el reparto queda así: el HTML de un artículo pesa unos 30 KB, la hoja de estilos que comparten todas las páginas 52 KB y los cinco archivos de JavaScript que ponen en marcha el resumen desplegable, el bocadillo con mi foto, el chat y el aviso de cookies suman 35 KB⁴. El HTML es la más pequeña de las tres.

Qué hay de verdad dentro de un archivo HTML

Las guías que salen arriba en Google para esta búsqueda —he leído, por ejemplo, las de concepto.de y Alura— enseñan las etiquetas una a una, pero ninguna de las que leí abre un archivo real para ver cuánto ocupa cada cosa. Lo he hecho con el artículo hermano de este, qué es una página web: he cogido su archivo del servidor y lo he desmontado con un pequeño programa que separa el texto de las etiquetas⁴.

De los 30.396 bytes del archivo, solo el 41 % es el texto que lees, y eso contando los espacios y saltos de línea con que está escrito. Una quinta parte son las propias etiquetas y sus atributos. El resto se lo llevan cosas que solo leen las máquinas —la ficha para buscadores y el resumen en formato JSON—, el gráfico, que también es código, y la cabecera con el título y la descripción. Por cada cuatro bytes de texto, el archivo lleva casi seis de código y datos.

Para saber si eso es mucho o poco, está el Web Almanac de HTTP Archive, que en su edición de 2024 analizó 16,9 millones de webs con datos de junio de ese año⁵:

Lo que más llama la atención es la última fila. El <div>, la caja genérica que no significa nada, es casi tres de cada diez elementos de la web mediana y aquí no llega a uno de cada diez; en su lugar hay párrafos, enlaces, listas y títulos, que sí le dicen algo al navegador y a Google. Usar cada etiqueta por lo que significa es lo que se llama HTML semántico. La comparación es orientativa: el Almanac mide millones de páginas con su propia metodología, y yo, un solo archivo con un script.

Lo que Google lee de tu HTML

Este es el motivo por el que a un autónomo o a una pyme le interesa saber qué es HTML aunque nunca vaya a escribir una línea: Google lee el HTML de tu web, y su propia documentación dice en qué partes del archivo se fija.

El título. Para el titular azul que aparece en los resultados, Google se fija, entre otras cosas, en el elemento <title>, en el título principal visible y en encabezados como <h1>⁶. Una web cuyo <title> dice «Inicio» desperdicia ese hueco.

Los enlaces. Por lo general, Google solo puede rastrear un enlace si es un elemento <a> con su atributo href⁷. Un botón que lleva a otra página mediante JavaScript, sin ese elemento, puede ser un callejón sin salida para el buscador. El texto del enlace también cuenta: «Ver el horario» le dice más que «pincha aquí».

Las imágenes. Google combina el texto alternativo con visión artificial y con el contenido de la página para entender qué muestra una foto, y su documentación recuerda que ese texto sirve también a quien no puede verla⁸.

Y el alt falta en más webs de las que parece. El informe WebAIM Million, que revisa cada año las páginas de inicio del millón de webs más populares, encontró en febrero de 2026 que el 53,1 % tenía imágenes sin texto alternativo, y que el 13,5 % ni siquiera declaraba en qué idioma estaba escrita⁹. En el ejemplo de la panadería, cada una de esas dos cosas ocupa media línea.

Si tu web está hecha con WordPress, Wix o cualquier otro gestor de contenidos, no vas a escribir estas etiquetas a mano: el gestor las genera a partir de lo que rellenas en el panel, como el título de cada página o la descripción de cada imagen. Pero lo que acaba en el HTML es lo que Google lee. La comprobación cabe en dos minutos: abre tu web, pulsa Ctrl+U, después Ctrl+F, y busca <title>, <h1 y alt=. Si el título es genérico, si no hay ningún <h1> o si las fotos no llevan alt, ya sabes qué pedirle a quien te lleva la web. Lo demás del posicionamiento está en qué es el SEO.

HTML5 y por qué ya no lleva número

Durante años HTML tuvo números de versión. La más conocida, HTML5, se convirtió en recomendación oficial del W3C el 28 de octubre de 2014¹⁰. Trajo etiquetas para poner vídeo y audio sin complementos externos y elementos con significado propio, como <header>, <nav>, <article> o <footer>.

En 2019 se acabó la numeración. El W3C y otro grupo de trabajo, el WHATWG, llevaban años publicando cada uno su especificación de HTML, y el 28 de mayo de 2019 firmaron un acuerdo para desarrollar el lenguaje en el WHATWG como un único estándar vivo (Living Standard)¹¹. Desde entonces se actualiza poco a poco, sin saltos de versión. Cuando hoy alguien habla de «HTML5», en la práctica se refiere a ese HTML actual.

La primera línea del ejemplo de la panadería, <!doctype html>, es justo la de ese HTML moderno. Según el Web Almanac, la lleva el 93 % de las páginas para móvil que analizó⁵.

Preguntas frecuentes

¿Para qué sirve HTML?

Para escribir el contenido de una página web y decirle al navegador qué es cada parte: títulos, párrafos, imágenes, enlaces, listas, tablas o formularios. Todo lo que ves en una web pasa por un documento HTML, aunque lo haya generado un programa como WordPress.

¿Es HTML un lenguaje de programación?

No. Es un lenguaje de marcado: describe un documento, pero no toma decisiones ni hace cálculos. Eso le toca a JavaScript.

¿Qué diferencia hay entre HTML y CSS?

HTML marca el contenido (esto es un título) y CSS decide su aspecto (ese título, en granate y a 32 píxeles). Se puede rediseñar una web entera tocando solo el CSS.

¿Qué es HTML5?

La versión de HTML que el W3C aprobó como estándar el 28 de octubre de 2014, con vídeo y audio integrados y etiquetas con significado propio. Desde 2019 HTML ya no lleva número: es un estándar vivo que se va actualizando, y en el habla corriente «HTML5» se usa para referirse a él.

¿Qué es el HTML semántico?

Usar cada etiqueta por lo que significa: nav para el menú, article para un artículo, h1 para el título principal, button para un botón, en lugar de cajas genéricas div para todo. En pantalla puede verse igual, pero los buscadores y los lectores de pantalla entienden mejor la página.