Estructura básica de una página web en HTML (con ejemplo)

La estructura básica de una página HTML es siempre la misma: una primera línea <!DOCTYPE html>, una etiqueta <html lang="es"> que lo envuelve todo, un <head> con la información para el navegador y los buscadores (codificación, móvil, título y descripción) y un <body> con lo que ve el visitante. Dentro del body, el contenido se reparte en etiquetas con significado como <header>, <nav>, <main> y <footer>.

Esta guía está pensada para quien empieza: estudiantes, gente que se está formando o el dueño de un negocio que quiere entender qué hay debajo de su web. Tienes una plantilla completa para copiar y, después, cada línea explicada. Como ejemplo usamos la página de una panadería inventada de Logroño, para que veas cada etiqueta con contenido de verdad.

Plantilla HTML básica para copiar

Copia este código en un archivo llamado index.html, ábrelo con el navegador y verás la página funcionando. Es HTML actual: desde el acuerdo entre el W3C y el WHATWG de mayo de 2019 hay una sola especificación, el HTML Living Standard, que mantiene el WHATWG. Por eso ya no tiene sentido hablar de versiones; si te interesa la historia, la contamos en las diferencias entre HTML4 y HTML5.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Panadería La Espiga | Pan artesano en Logroño</title>
  <meta name="description" content="Pan de masa madre hecho cada mañana en Logroño. Consulta nuestros panes, el horario y cómo hacer un encargo.">
</head>
<body>
  <header>
    <a href="/">Panadería La Espiga</a>
    <nav>
      <ul>
        <li><a href="/">Inicio</a></li>
        <li><a href="#panes">Panes</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Pan artesano hecho cada mañana en Logroño</h1>
      <p>Horneamos con masa madre y harina de la zona.</p>
      <img src="/img/hogaza.webp" alt="Hogaza de masa madre recién horneada sobre una tabla de madera" width="800" height="600">

      <section id="panes">
        <h2>Nuestros panes</h2>
        <p>Hogazas, barras, pan de centeno y pan de semillas.</p>
      </section>

      <section>
        <h2>Horario</h2>
        <p>De lunes a sábado, de 8:00 a 14:00.</p>
      </section>
    </article>

    <aside>
      <h2>Encargos</h2>
      <p>Si quieres pan para un evento, llámanos con un día de antelación.</p>
    </aside>
  </main>

  <footer id="contacto">
    <p>Panadería La Espiga · Logroño</p>
  </footer>
</body>
</html>

La página se verá sin diseño: letra por defecto, todo en una columna y en blanco y negro. Es lo esperado. El HTML da la estructura y el significado de cada parte; los colores, las tipografías y la colocación se ponen con CSS, que explicamos en qué es CSS y para qué sirve.

La plantilla explicada línea a línea

Antes de entrar en detalle, este es el resumen de lo que hace cada pieza:

El doctype

La especificación del WHATWG lo define como un preámbulo obligatorio. Sin él, los navegadores tienden a usar un modo de dibujar la página incompatible con algunas especificaciones (el llamado modo quirks); con él, usan el modo estándar. MDN lo describe como un vestigio histórico que hay que incluir: <!doctype html> es la cadena más corta que cuenta como doctype válido y va al principio de todas las páginas. Da igual escribirlo en mayúsculas o en minúsculas.

La etiqueta html y el atributo lang

<html> envuelve todo el documento. El atributo lang="es" indica el idioma y sirve sobre todo para que los lectores de pantalla pronuncien bien el texto. Las pautas de accesibilidad WCAG (criterio 3.1.1) exigen que el idioma de la página se pueda determinar por programa, y MDN recomienda indicarlo siempre.

Un detalle que confunde a muchos: la especificación permite omitir las etiquetas <html>, <head> y <body> en ciertos casos, pero una etiqueta de apertura nunca se puede omitir si lleva atributos. Como <html> lleva lang, siempre se escribe. Y aunque head y body se puedan omitir, escríbelos: el código se lee mucho mejor.

La codificación: meta charset

El valor debe ser utf-8, solo puede haber una por documento y tiene que quedar entera dentro de los primeros 1024 bytes del archivo. Por eso web.dev aconseja que sea lo primero dentro del <head>, como en la plantilla.

La adaptación al móvil: meta viewport

El valor recomendado es width=device-width, que le dice al navegador que use el ancho real de la pantalla. Sin esta línea, muchos móviles pintan la página en un lienzo virtual más ancho (MDN pone el ejemplo de 980 píxeles en una pantalla de 640) y luego la encogen, así que todo se ve diminuto y las reglas de CSS pensadas para pantallas pequeñas no se aplican. Google también la tiene en cuenta: su presencia le indica que la página está adaptada a móviles. Si quieres ir más allá, te explicamos cómo trabajar el diseño mobile first.

Lo que no debes añadir es user-scalable=no: bloquea el zoom e impide leer a las personas con baja visión. WCAG exige permitir al menos un zoom del 200 % y MDN aconseja permitir hasta cinco veces.

El title y la meta description

En un documento normal, el <head> contiene exactamente un <title>, que es el nombre de la página. Se ve en la pestaña del navegador, en el historial, en los resultados de búsqueda y en las tarjetas que se crean al compartir el enlace en redes, si no se define otro aparte. Cada página de tu web necesita uno distinto.

La <meta name="description"> es un resumen de la página. No se ve en ella, pero Google puede mostrarla en sus resultados. Más abajo te contamos cuándo lo hace.

Qué va en el head y qué va en el body

La regla es sencilla: si es información sobre la página, va en el <head>; si el visitante lo tiene que ver, va en el <body>.

Un error habitual al empezar es meter texto visible en el head o etiquetas como <title> dentro del body. Si dudas, vuelve a la plantilla: cada cosa ya está en su sitio.

Etiquetas semánticas: cómo repartir la página

Las etiquetas semánticas dicen qué es cada bloque, no cómo se ve. Así lo entienden mejor los lectores de pantalla, los buscadores y la persona que toque el código después de ti. Según MDN, estas son las principales:

• <header>: la introducción o cabecera; en la plantilla, el nombre del negocio y el menú.
• <nav>: la navegación principal.
• <main>: el contenido exclusivo de esa página. Solo uno por página: la especificación no permite más de un <main> visible.
• <article>: un bloque con sentido propio, que se entendería solo, como una entrada de blog.
• <section>: una parte o un tema dentro de la página, mejor si lleva su propio encabezado.
• <aside>: contenido relacionado de forma indirecta, como el aviso de encargos de la panadería.
• <footer>: el contenido final, el pie.

¿Y el <div>? Sigue existiendo y es útil, pero MDN aconseja usarlo solo cuando no haya un elemento semántico mejor. Compara estas dos cabeceras: se ven igual, pero la segunda dice qué es.

<!-- Sin semántica -->
<div class="cabecera">
  <div class="menu">...</div>
</div>

<!-- Con semántica -->
<header>
  <nav>...</nav>
</header>

Encabezados: de h1 a h6 sin saltos

Los encabezados (<h1> a <h6>) forman el índice de la página. Las pautas de MDN son tres:

1. Por lo general, un solo <h1>, que describa de qué va la página.
2. No saltar niveles: después de un <h2> viene un <h3>, no un <h5>.
3. No usarlos para cambiar el tamaño del texto: eso se hace con la propiedad font-size de CSS.

Esto importa más de lo que parece: quienes usan lectores de pantalla navegan saltando de encabezado en encabezado, así que una jerarquía ordenada es su mapa de la página. En la plantilla, el índice queda así:

h1  Pan artesano hecho cada mañana en Logroño
  h2  Nuestros panes
  h2  Horario
  h2  Encargos

Imágenes y texto alternativo (alt)

El atributo alt es el texto que sustituye a la imagen: lo leen los lectores de pantalla y aparece si la imagen no carga. Si una imagen es solo decorativa, se deja vacío (alt=""). Si falta del todo, algunos lectores de pantalla leen el nombre del archivo, y oír «IMG guion bajo 4532 punto webp» no ayuda a nadie.

<!-- Bien: describe lo que se ve -->
<img src="hogaza.webp" alt="Hogaza de masa madre recién horneada">

<!-- Mal: relleno de palabras clave -->
<img src="hogaza.webp" alt="pan logroño panadería logroño mejor pan">

<!-- Decorativa: alt vacío -->
<img src="adorno.svg" alt="">

Google también lee el alt: lo combina con visión artificial y con el contenido de la página para entender la imagen, y pide no rellenarlo de palabras clave. Si la imagen es un enlace, su alt funciona como el texto del enlace.

Qué mira Google de esta estructura y qué no

No todo lo que va en el head sirve para salir en Google. Esto es lo que dice la propia documentación de Google Search Central:

En la práctica: cuida el title y la description de cada página, olvídate de la meta keywords y no quites el lang, porque lo usan quienes navegan con lector de pantalla.

Errores típicos al empezar

• Olvidar el doctype. La página puede verse rara porque el navegador entra en modo quirks.
• Poner la meta charset tarde o repetida. Tiene que ser una sola y estar al principio del head.
• Copiar el mismo title en todas las páginas. Cada una necesita el suyo.
• Bloquear el zoom con user-scalable=no.
• Elegir encabezados por su tamaño o saltar de <h1> a <h4>.
• Poner dos <main> visibles en la misma página.
• Construirlo todo con <div> cuando hay una etiqueta semántica que encaja.
• Dejar imágenes sin alt o llenarlo de palabras clave.
• Usar etiquetas HTML para dar color o tipografía. El aspecto va en CSS.
• Añadir la meta keywords pensando que ayuda en Google.

Muchos de estos fallos aparecen también en webs de negocios hechas con prisa. Si quieres ver los más habituales desde el punto de vista del cliente, repasa los errores comunes de diseño web.

Cómo comprobar que tu HTML está bien

El validador oficial del W3C, en validator.w3.org, revisa tu código de tres formas:

1. Por dirección: escribes la URL de una página publicada.
2. Subiendo el archivo: eliges tu index.html desde el ordenador.
3. Pegando el código: copias y pegas el HTML directamente.

El resultado separa errores y avisos, y señala la línea de cada uno. Corrige primero los errores, de arriba abajo: a menudo uno solo (una etiqueta sin cerrar, por ejemplo) provoca varios mensajes más abajo. Pega la plantilla de este artículo y haz la prueba; luego cambia algo a propósito, como borrar el </main>, y mira qué te dice. Es la forma más rápida de aprender.

¿Tienes un negocio y necesitas una web profesional?

Aprender la estructura de una página es la mejor manera de entender cómo funciona una web. Si lo que necesitas es una para tu negocio en La Rioja, bien construida por dentro y preparada para Google, en Rioja Creativa hacemos diseño web en Logroño a medida.