Curso HTML 16.2 Estructuración de archivos HTML en sitios multipágina

16.2 Estructuración de archivos HTML en sitios multipágina

Cuando trabajamos con proyectos HTML que abarcan varias páginas, una organización clara de ficheros y carpetas es esencial para:

• Mantener la coherencia visual y funcional.
• Facilitar el mantenimiento y la escalabilidad.
• Evitar errores en rutas relativas y referencias.

1. Estructura de carpetas recomendada

Una estructura típica para un sitio multipágina podría ser:

/mi-sitio/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── estilo.css
├── js/
│   └── main.js
├── img/
│   ├── logo.png
│   └── banner.jpg
└── components/
    ├── header.html
    ├── nav.html
    └── footer.html

Cada carpeta agrupa un tipo de recurso:

• css/: hojas de estilo.
• js/: scripts de JavaScript.
• img/: imágenes y gráficos.
• components/: fragmentos HTML reutilizables (cabecera, pie, menú).

2. Enlaces relativos y absolutos

Para navegar entre páginas, usamos rutas relativas o absolutas:

• Ruta relativa: sigue la jerarquía de carpetas desde el fichero actual.
• Ruta absoluta: parte siempre de la raíz del dominio (/css/estilo.css).

Ejemplo de enlace relativo en about.html (misma carpeta):

<a href='contact.html'>Contáctanos</a>

Ejemplo de ruta absoluta (independiente de la profundidad):

<link rel='stylesheet' href='/css/estilo.css'>

3. Uso de para simplificar rutas

Si todas las páginas comparten una carpeta de recursos, podemos definir:

<head>
  <base href='/'>
  <link rel='stylesheet' href='css/estilo.css'>
</head>

Con esto, todas las rutas relativas partirán de la raíz, evitando errores en subcarpetas más profundas.

4. Componentes reutilizables (header, nav, footer)

Para no duplicar código, separamos cabeceras y pies en fragmentos HTML. Existen varias maneras de incluirlos:

1. Server Side Includes (SSI) o templates en un servidor dinámico.
2. JavaScript: cargar y embeber el componente.
3. Web Components o frameworks (más avanzado).

4.1 Ejemplo con JavaScript

<!-- fragments.nav.html -->
<nav>
  <ul>
    <li><a href='index.html'>Inicio</a></li>
    <li><a href='about.html'>Acerca de</a></li>
    <li><a href='contact.html'>Contacto</a></li>
  </ul>
</nav>
<!-- end fragments.nav.html -->

<!-- index.html -->
<!— Este fichero carga nav dinámicamente —>
<head>
  <script>
    // Al cargar la página, insertamos el menú
    document.addEventListener('DOMContentLoaded', () => {
      fetch('components/nav.html')
        .then(response => response.text())
        .then(html => {
          document.querySelector('#nav-placeholder').innerHTML = html;
        });
    });
  </script>
</head>
<body>
  <div id='nav-placeholder'></div>
  <h2>Bienvenido a la página principal</h2>
  <p>Contenido de la home page.</p>
</body>

5. Enlaces profundos y rutas en subdirectorios

Si tienes un subdirectorio, por ejemplo blog/, la ruta relativa cambia:

/mi-sitio/
├── blog/
│   ├── index.html
│   └── post1.html
└── css/
    └── estilo.css

Desde blog/post1.html para referenciar la hoja de estilo:

<link rel='stylesheet' href='../css/estilo.css'>

6. Automatización con generadores de sitios estáticos

Para proyectos grandes, conviene usar herramientas como Jekyll, Hugo o Eleventy. Funcionan con plantillas y generan automáticamente las páginas con includes y rutas correctas, manteniendo la misma estructura de carpetas.

Resumen de buenas prácticas