HTML Course 16.2 Structuring HTML files in multi-page sites

16.2 Structuring HTML Files in Multi-Page Sites

En un proyecto con varias páginas HTML, mantener un esquema claro de archivos y enlaces coherentes es esencial para facilitar el desarrollo, la navegación y el mantenimiento. A continuación se detallan buenas prácticas, convenciones y ejemplos para organizar un sitio web de múltiples páginas.

1. Estructura de carpetas recomendada

Una estructura de carpetas modular ayuda a separar recursos por tipo y a reducir la complejidad:

/ (raíz del sitio):
- index.html – Página principal
- about.html, contact.html – Otras páginas de nivel superior
- /css/ – Hojas de estilo
- /js/ – Scripts JavaScript
- /images/ – Imágenes y gráficos
- /includes/ – Fragmentos reutilizables (cabeceras, pies).

Ejemplo de árbol de directorios:

/
├─ index.html
├─ about.html
├─ contact.html
├─ css/
│  └─ styles.css
├─ js/
│  └─ main.js
├─ images/
│  ├─ logo.png
│  └─ banner.jpg
└─ includes/
   ├─ header.html
   └─ footer.html

2. Enlaces Relativos vs. Enlaces Absolutos

Para un sitio en desarrollo o portado a distintos dominios, es preferible usar rutas relativas:

Ruta relativa: basadas en la ubicación del archivo actual. Ejemplo: ../css/styles.css.
Ruta absoluta (sitio): comienzan en la raíz del servidor. Ejemplo: /images/logo.png. Útil si siempre existe la misma estructura de carpetas.

Comparativa en about.html que está en la raíz:

<!-- Enlazar CSS desde about.html -->
<link rel='stylesheet' href='css/styles.css'>

<!-- Mostrar logo -->
<img src='images/logo.png' alt='Logotipo'>

Si estuvieras dentro de /pages/ tendrías que usar ../css/styles.css.

3. Cabecera y Pie comunes con Includes

Para no duplicar la misma barra de navegación y pie de página en cada HTML, puedes usar Server-Side Includes (SSI) o plantillas del lado del servidor:

SSI (Apache): archivos con extensión .shtml e instrucción .
PHP: <?php include 'includes/header.html'; ?>.

Ejemplo usando SSI en index.shtml:

<!-- index.shtml -->
<!--#include file='includes/header.html' -->

<main>
  <h2>Página de Inicio</h2>
  <p>Contenido principal...</p>
</main>

<!--#include file='includes/footer.html' -->

Contenido de includes/header.html:

<nav>
  <ul>
    <li><a href='/index.html'>Home</a></li>
    <li><a href='/about.html'>About</a></li>
    <li><a href='/contact.html'>Contact</a></li>
  </ul>
</nav>

4. Manejo de Rutas en Subdirectorios

Si creas un subdirectorio /blog/ con sus propias páginas, debes ajustar rutas relativas:

/blog/
├─ post1.html
├─ post2.html
└─ assets/
   └─ post-image.jpg

Dentro de /blog/post1.html:

<!-- Volver a la página principal -->
<a href='../index.html'>Inicio</a>

<!-- Enlazar CSS global -->
<link rel='stylesheet' href='../css/styles.css'>

<!-- Imagen del post -->
<img src='assets/post-image.jpg' alt='Imagen del Post'>

5. Convenciones de Nombres

Usar nombres descriptivos en minúsculas y separados por guiones (about-us.html en vez de AboutUs.html).
Evitar espacios y caracteres especiales en nombres de archivos.
Extensiones coherentes: .html, .css, .js, .jpg/.png.

6. Buenas Prácticas Adicionales

Incluir un sitemap (/sitemap.xml) y /robots.txt para SEO y rastreadores.
Versionar con control de código (Git) manteniendo la misma estructura entre entornos.
Usar comentarios HTML para documentar rutas especiales o instructivos dentro de los archivos.
Minimizar rutas largas usando variables de entorno o constantes en sistemas de plantillas.

7. Ejemplo Completo de Página

Un ejemplo de contact.html en la raíz, usando include en PHP:

<?php include 'includes/header.html'; ?>

<main>
  <h2>Contáctanos</h2>
  <form action='send.php' method='post'>
    <label>Nombre:<input type='text' name='name'></label>
    <label>Email:<input type='email' name='email'></label>
    <button type='submit'>Enviar</button>
  </form>
</main>

<?php include 'includes/footer.html'; ?>

De este modo, todas tus páginas comparten el mismo encabezado y pie, facilitando actualizaciones globales.

Conclusión

Una organización consistente de archivos y rutas en sitios multipágina mejora la escalabilidad, el rendimiento y la mantenibilidad. Siguiendo estas pautas, podrás navegar y actualizar el proyecto con mayor rapidez y menos errores.