#07 La estructura de una página#07 La estructura de una página

Las páginas tienen partes

Fíjate en casi cualquier web: arriba hay una cabecera con el logo y un menú; en el centro, el contenido principal; a veces una barra lateral; y abajo, un pie con datos de contacto. Es tan habitual que HTML tiene una etiqueta para cada parte:

┌──────────────────────────────────┐
│ <header>  logo + <nav> menú      │
├────────────────────────┬─────────┤
│ <main>                 │ <aside> │
│   <section> / <article>│ lateral │
│   <section> / <article>│         │
├────────────────────────┴─────────┤
│ <footer>  contacto, créditos     │
└──────────────────────────────────┘

Una página con estructura

Así se combinan. Lee el código con calma: es la forma de casi todas las páginas que harás.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

¿Para qué sirve, si no cambia nada?

Escribir HTML que dice qué es cada cosa se llama HTML semántico (semántica = significado). Tiene ventajas muy reales:

• Accesibilidad. Los lectores de pantalla permiten saltar directamente al <main> o al <nav>. Sin estas etiquetas, una persona ciega tendría que escuchar toda la página desde el principio.
• Buscadores. Google entiende mejor qué es lo importante de tu página.
• Tu yo del futuro. Un código lleno de <header>, <nav> y <footer> se entiende de un vistazo. Uno lleno de cajas sin nombre, no.

<section> o <article>

Es la duda más habitual. Hazte esta pregunta: ¿tendría sentido este bloque por sí solo, si lo copiara en otra web?

• Sí → <article>: un post de un blog, una noticia, una receta, la ficha de un producto, un comentario.
• No, es una parte de esta página → <section>: «Quiénes somos», «Servicios», «Preguntas frecuentes».

Y una <section> puede contener varios <article> (como la carta del ejemplo), o al revés: un artículo largo puede dividirse en secciones.

Cajas sin significado: <div> y <span>

A veces necesitas agrupar cosas solo para darles estilo con CSS, y ninguna etiqueta semántica encaja. Para eso están las dos «cajas genéricas»:

• <div>: una caja de bloque. Ocupa todo el ancho y empieza en una línea nueva, como un párrafo.
• <span>: una caja en línea. Marca un trozo de texto sin cortar la línea.

1
2
3
4
5

No verás ninguna diferencia todavía. Cobrarán sentido en cuanto empieces con CSS: podrás decir «pon este <div> con fondo gris» o «este <span> en verde».

Errores típicos

• Hacerlo todo con <div>, incluso la cabecera, el menú y el pie.
• Poner varios <main>. Solo hay un contenido principal.
• Usar <section> como si fuera un <div>, solo para agrupar estilos. Una sección es una parte temática y suele llevar encabezado.
• Meter en <nav> todos los enlaces de la página. Es para la navegación importante, como el menú principal.
• Esperar que estas etiquetas cambien el aspecto. Eso lo hace CSS.

Ejercicios

Ejercicio 1: ponle nombre a cada caja (fácil)

Esta página está hecha solo con <div>. Cambia cada <div> por la etiqueta semántica que le corresponde.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<header>
  <h1>Ana López, fotógrafa</h1>
  <nav>
    <a href="#trabajos">Trabajos</a>
    <a href="#contacto">Contacto</a>
  </nav>
</header>
<main>
  <section id="trabajos">
    <h2>Trabajos</h2>
    <p>Bodas, retratos y viajes.</p>
  </section>
  <section id="contacto">
    <h2>Contacto</h2>
    <p>ana@ejemplo.com</p>
  </section>
</main>
<footer>
  <p>© 2026 Ana López</p>
</footer>

Ejercicio 2: ¿section o article? (fácil)

Decide qué etiqueta usarías para cada caso: a) la lista de preguntas frecuentes de una tienda; b) cada reseña de un cliente; c) una noticia en la portada de un periódico; d) el bloque «Nuestro equipo».

Ejercicio 3: el blog (medio)

Escribe la estructura de un blog de viajes: cabecera con el nombre del blog y un menú de tres enlaces, un contenido principal con dos posts (cada uno con su título, fecha y un párrafo), una barra lateral con «Sobre mí» y un pie con tu nombre.

1

<header>
  <h1>Mochila al hombro</h1>
  <nav>
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Destinos</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Una semana en Lisboa</h2>
    <p>12 de marzo de 2026</p>
    <p>Tranvías, pasteles de nata y miradores…</p>
  </article>
  <article>
    <h2>Ruta por los Picos de Europa</h2>
    <p>2 de mayo de 2026</p>
    <p>Cinco días caminando entre montañas…</p>
  </article>
  <aside>
    <h2>Sobre mí</h2>
    <p>Soy Marta y viajo siempre que puedo.</p>
  </aside>
</main>
<footer>
  <p>Blog de Marta Ruiz</p>
</footer>

Ficha resumen

• HTML semántico: cada etiqueta dice qué es su contenido. Mejora la accesibilidad, el posicionamiento en buscadores y la claridad del código.
• <header> cabecera · <nav> menú · <main> contenido principal (uno) · <section> parte temática · <article> contenido independiente · <aside> secundario · <footer> pie.
• <div> (bloque) y <span> (en línea) son cajas sin significado, para cuando nada más encaja.
• Estas etiquetas no cambian el aspecto: eso es trabajo de CSS.

Glosario