Curso HTML 16.3 Plantillas HTML reutilizables (partials, includes – concepto)

Curso HTML 16.3 – Plantillas HTML Reutilizables (Partials, Includes)

Las plantillas reutilizables (o partials/includes) son fragmentos de código HTML independientes que se pueden insertar en varias páginas o vistas. Su principal ventaja es aplicar el principio DRY (Don’t Repeat Yourself), mejorando el mantenimiento, la consistencia y la escalabilidad del proyecto.

1. ¿Por qué usar Partials?

• Reutilización: Un mismo fragmento (cabecera, pie, menú) sirve en múltiples lugares.
• Mantenibilidad: Cambias solo el partial y se actualiza en todas las páginas.
• Organización: Separar la lógica de estructura y contenido.
• Consistencia: Garantizar que encabezados, pies y estilos de navegación sean idénticos.

2. Tipos de Implementación

3. Ejemplo con EJS (Node.js + Express)

Supongamos la siguiente estructura de directorios:

• views/
• partials/
• header.ejs
• footer.ejs
• index.ejs

Contenido de partials/header.ejs:

<!-- partials/header.ejs -->
<header>
  <h2>Mi Sitio Web</h2>
  <nav>
    <ul>
      <li><a href='/'>Inicio</a></li>
      <li><a href='/about'>Acerca</a></li>
    </ul>
  </nav>
</header>
  

Contenido de partials/footer.ejs:

<!-- partials/footer.ejs -->
<footer>
  <p>© 2024 Mi Sitio. Todos los derechos reservados.</p>
</footer>
  

En index.ejs los incluimos:

<!-- index.ejs -->
<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='UTF-8'>
  <title>Página de Inicio</title>
</head>
<body>
  <!-- Incluir cabecera -->
  <%- include('partials/header') %>

  <main>
    <h3>Bienvenido</h3>
    <p>Este es el contenido de la página principal.</p>
  </main>

  <!-- Incluir pie de página -->
  <%- include('partials/footer') %>
</body>
</html>
  

4. Ejemplo con PHP

Archivos:

• header.php
• footer.php
• index.php

<!-- header.php -->
<header>
  <h2>Cabecera en PHP</h2>
</header>
  

<!-- index.php -->
<!DOCTYPE html>
<html lang='es'>
<head><meta charset='UTF-8'><title>PHP Includes</title></head>
<body>
  <?php include 'header.php'; ?>

  <main>
    <p>Contenido principal con PHP Includes.</p>
  </main>

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

5. Web Components: Template + JavaScript

Se definen en un solo archivo o separados:

<template id='my-header'>
  <style>
    header { background: #eee; padding: 1em; }
  </style>
  <header>
    <h2>Componente Header</h2>
  </header>
</template>

<script>
  class MyHeader extends HTMLElement {
    constructor() {
      super();
      const tpl = document.getElementById('my-header');
      const shadow = this.attachShadow({mode: 'open'});
      shadow.appendChild(tpl.content.cloneNode(true));
    }
  }
  customElements.define('my-header', MyHeader);
</script>

<!-- En la página -->
<my-header></my-header>
  

6. Buenas Prácticas

• Nombrar parciales de modo claro: header.html, nav.html, footer.html.
• Separar lógica de presentación: nada de scripts complejos dentro de la plantilla.
• Documentar cada partial con comentarios al inicio.
• Mantener coherencia en indentación y estilo.
• Versionar y testear cada partial por separado.

Con estos conceptos y ejemplos tienes las bases para implementar partials/includes en distintos entornos y motores de plantillas, logrando un código más limpio, modular y mantenible.