Saltar al contenido principal
Logo de JSCamp
M02·HTML y CSS

Creando múltiples páginas HTML

Aprende a crear múltiples páginas HTML y cómo conectarlas entre sí reutilizando elementos comunes

midudev

Más clases y directos en YouTube

Suscribirse

Creando múltiples páginas HTML

Hasta ahora hemos trabajado con una sola página HTML, pero la mayoría de sitios web tienen múltiples páginas. En esta clase aprenderemos a crear y conectar diferentes páginas HTML.

Estructura de un sitio web con múltiples páginas

Un sitio web típico puede tener la siguiente estructura de archivos:

proyecto/  ├── index.html        (página principal)  ├── empleos.html      (página de empleos)  ├── contacto.html     (página de contacto)  ├── about.html        (página acerca de)  └── styles.css

Creando una nueva página: empleos.html

Vamos a crear una nueva página empleos.html partiendo de nuestro index.html. Lo primero que debemos entender es qué partes del HTML se mantienen igual en todas las páginas y qué partes cambian.

Elementos que se repiten en todas las páginas

Los siguientes elementos normalmente son iguales en todas las páginas de un sitio web:

  1. <head>: Los metadatos, título base, enlaces a CSS, etc.
  2. <header>: La cabecera con el logo y la navegación
  3. <footer>: El pie de página con información de contacto, enlaces, etc.

Obviamente, dentro de los metadatos, vamos a cambiar el <title> y la descripción para que cada página tenga un título único.

Elemento que cambia en cada página

<main>: Esta es la etiqueta que contiene el contenido principal que cambia en cada página. Es el contenido único de cada página.

La etiqueta <main>: El contenido principal

La etiqueta <main> es fundamental porque:

  • Identifica el contenido principal de la página
  • Es el contenido que cambia de una página a otra
  • Solo debe haber una etiqueta <main> por página
  • No debe contener contenido que se repita (como navegación, logos, footer, etc.)
<!-- ❌ MAL: El footer no debe estar dentro de main --><main>  <h2>Contenido de la página</h2>  <footer>Pie de página</footer></main><!-- ✅ BIEN: Main solo contiene el contenido único de esta página --><main>  <h2>Contenido de la página</h2>  <p>Este contenido es específico de esta página.</p></main><footer>Pie de página</footer>

Enlaces relativos entre páginas

Cuando las páginas están en la misma carpeta, los enlaces son simples:

<!-- Ambos archivos están en la misma carpeta --><nav>  <a href="index.html">Inicio</a>  <a href="empleos.html">Empleos</a>  <a href="contacto.html">Contacto</a></nav>

Rutas relativas en diferentes estructuras

Páginas en la misma carpeta

proyecto/  ├── index.html  └── empleos.html

Desde index.html a empleos.html:

<a href="empleos.html">Empleos</a>

Páginas en subcarpetas

proyecto/  ├── index.html  └── pages/      └── empleos.html

Desde index.html a empleos.html:

<a href="pages/empleos.html">Empleos</a>

Desde empleos.html a index.html:

<a href="../index.html">Inicio</a>

.. significa “subir un nivel” en la estructura de carpetas.

Estructura más compleja

proyecto/  ├── index.html  ├── pages/  │   ├── empleos.html  │   └── contacto.html  └── blog/      └── articulo.html

Desde empleos.html a articulo.html:

<a href="../blog/articulo.html">Artículo</a>

Desde articulo.html a empleos.html:

<a href="../pages/empleos.html">Empleos</a>

Ruta absoluta vs relativa

Ruta relativa

<!-- Relativa a la ubicación actual del archivo --><a href="empleos.html">Empleos</a><a href="../index.html">Inicio</a><a href="pages/contacto.html">Contacto</a>

Ruta absoluta desde la raíz del sitio

<!-- Comienza con / = desde la raíz del sitio --><a href="/index.html">Inicio</a><a href="/pages/empleos.html">Empleos</a><a href="/blog/articulo.html">Artículo</a>

Ruta absoluta completa (URL externa)

<!-- URL completa con dominio --><a href="https://www.ejemplo.com/empleos.html">Empleos</a>

Buenas prácticas

1. Consistencia en la navegación

Asegúrate de que la navegación sea idéntica en todas las páginas:

<!-- Esta navegación debe ser IGUAL en todas las páginas --><nav>  <a href="index.html">Inicio</a>  <a href="empleos.html">Empleos</a>  <a href="contacto.html">Contacto</a></nav>

2. Indicar la página actual

Es buena práctica indicar visualmente en qué página está el usuario:

<!-- En index.html --><nav>  <a href="index.html" class="active">Inicio</a>  <a href="empleos.html">Empleos</a>  <a href="contacto.html">Contacto</a></nav><!-- En empleos.html --><nav>  <a href="index.html">Inicio</a>  <a href="empleos.html" class="active">Empleos</a>  <a href="contacto.html">Contacto</a></nav>

3. Títulos descriptivos

Cada página debe tener un título único y descriptivo:

<!-- index.html --><title>Mi Sitio Web - Inicio</title><!-- empleos.html --><title>Mi Sitio Web - Ofertas de Empleo</title><!-- contacto.html --><title>Mi Sitio Web - Contacto</title>

4. Reutilizar estilos

Todas las páginas deben enlazar al mismo archivo CSS:

<!-- En todas las páginas --><link rel="stylesheet" href="styles.css" />

Si las páginas están en subcarpetas, ajusta la ruta:

<!-- En pages/empleos.html --><link rel="stylesheet" href="../styles.css" />

El problema de la repetición

Como has notado, estamos copiando y pegando el <head>, <header> y <footer> en cada página. Esto tiene un problema: si queremos cambiar algo en la navegación, tenemos que editarlo en todas las páginas.

En el futuro, aprenderemos a usar:

  • Frameworks como Astro, Next.js o similares que permiten crear componentes reutilizables
  • Server Side Includes (SSI) en servidores
  • JavaScript para cargar contenido dinámicamente

Pero por ahora, trabajando con HTML puro, la repetición es necesaria.

¡Con esto ya puedes crear sitios web con múltiples páginas conectadas entre sí!