Plantillas de diseño HTML

El diseño de página es la manera en que las principales regiones de una página — el encabezado, la navegación, el contenido principal, la barra lateral y el pie de página — se organizan en la pantalla. Este capítulo muestra cómo construir un diseño de forma moderna: marcar las regiones con elementos semánticos de HTML5 y luego posicionarlos con CSS Flexbox o CSS Grid. Al finalizar, podrás ensamblar una página de múltiples columnas responsiva desde cero.

La estructura de una página típica

Casi todos los sitios web se construyen a partir de los mismos cinco bloques fundamentales:

Región	Propósito	Elemento
Encabezado	Logo, título del sitio, banner	`<header>`
Navegación	Menú principal / enlaces	`<nav>`
Contenido principal	El contenido único de la página	`<main>`
Barra lateral	Enlaces relacionados, anuncios, "contenido extra"	`<aside>`
Pie de página	Derechos de autor, contacto, enlaces secundarios	`<footer>`

Antes de HTML5, estas regiones se escribían como elementos genéricos <div> con atributos id o class como <div id="header">. Eso sigue funcionando, pero no transmite ningún significado: un navegador, un lector de pantalla o un motor de búsqueda no puede distinguir un banner de un pie de página. Los elementos semánticos anteriores describen lo que cada región es, lo que mejora la accesibilidad y el SEO sin coste adicional. Consulta la lista completa en Elementos semánticos en HTML5.

Un esqueleto semántico de página

Comienza con el marcado, antes de añadir ningún CSS de diseño. Usa cada elemento de referencia una vez donde corresponda naturalmente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>This is the primary content of the page.</p>
    </main>

    <aside>
      <h2>Related</h2>
      <p>Links, ads, or extra information go here.</p>
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  </body>
</html>

Algunas reglas que vale la pena recordar:

Solo debe haber un <main> por página, y no debe estar anidado dentro de <header>, <nav>, <aside> o <footer>.
<nav> es para bloques de navegación principales, no para cualquier grupo de enlaces.
<aside> es contenido tangencial al contenido principal — funciona tanto si lo colocas dentro de <main> como al lado.

Este esqueleto no tiene columnas todavía; todo se apila verticalmente. El diseño — convertir estos bloques en columnas — es una tarea de CSS, que añadimos a continuación.

Un diseño de dos columnas con Flexbox

CSS Flexbox coloca los elementos a lo largo de un solo eje — una fila o una columna — y es ideal para una disposición de contenido más barra lateral. Envuelve <main> y <aside> en un contenedor flex; display: flex los pone uno al lado del otro, y flex controla cómo se reparte el espacio restante.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flexbox two-column layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      header, footer {
        background: #2c3e50;
        color: #fff;
        padding: 16px;
      }
      .container {
        display: flex;
        gap: 16px;
        padding: 16px;
      }
      main {
        flex: 3;            /* main takes 3 shares of the space */
        background: #ecf0f1;
        padding: 16px;
      }
      aside {
        flex: 1;            /* sidebar takes 1 share */
        background: #dfe6e9;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <header><h1>My Website</h1></header>
    <div class="container">
      <main>
        <h2>Main content</h2>
        <p>This column grows to fill most of the width.</p>
      </main>
      <aside>
        <h2>Sidebar</h2>
        <p>A narrower second column.</p>
      </aside>
    </div>
    <footer><p>&copy; 2024 My Website</p></footer>
  </body>
</html>

flex: 3 y flex: 1 hacen que las dos columnas dividan el ancho disponible en una proporción de 3 a 1. Como se trata de proporciones, las columnas permanecen fluidas: se encogen y crecen con el viewport en lugar de mantener un número fijo de píxeles. Para apilarlas en pantallas pequeñas, envuelve la regla en una media query:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Un diseño completo con CSS Grid

CSS Grid coloca los elementos en dos dimensiones — filas y columnas a la vez — lo que lo convierte en la mejor herramienta para un diseño de página completo. Con grid-template-areas puedes dibujar el diseño en texto plano y asignar cada elemento a una región con nombre:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Grid page layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;   /* sidebar : content */
        grid-template-areas:
          "header header"
          "nav    main"
          "footer footer";
        gap: 12px;
        padding: 12px;
      }
      header { grid-area: header; background: #2c3e50; color: #fff; }
      nav    { grid-area: nav;    background: #dfe6e9; }
      main   { grid-area: main;   background: #ecf0f1; }
      footer { grid-area: footer; background: #2c3e50; color: #fff; }
      header, nav, main, footer { padding: 16px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <header><h1>My Website</h1></header>
      <nav>Navigation</nav>
      <main>
        <h2>Main content</h2>
        <p>The header and footer span both columns.</p>
      </main>
      <footer><p>&copy; 2024 My Website</p></footer>
    </div>
  </body>
</html>

La unidad fr significa "una fracción del espacio libre", por lo que 1fr 3fr hace que la columna de contenido sea tres veces más ancha que la barra lateral — nuevamente, una proporción fluida en lugar de un ancho fijo. El mapa visual en grid-template-areas permite que el encabezado y el pie de página abarquen ambas columnas simplemente repitiendo sus nombres en una fila.

Flexbox o Grid — ¿cuál debo usar?

Ambos son modernos, con buen soporte y a menudo intercambiables, pero tienen una división natural del trabajo:

Usa Flexbox cuando estés organizando elementos en una sola dirección — una barra de navegación, una barra de herramientas, una fila de tarjetas o una disposición de contenido más barra lateral.
Usa Grid cuando necesites filas y columnas juntas, como el diseño de una página completa (encabezado / barra lateral / contenido / pie de página) o una galería de imágenes.

Un patrón habitual y robusto es usar Grid para el esqueleto general de la página y Flexbox para los componentes más pequeños dentro de cada región.

Diseños de ancho fijo vs. diseños fluidos

Los ejemplos anteriores son fluidos (también llamados líquidos): los anchos se expresan como proporciones (flex: 3, 3fr) o porcentajes, por lo que el diseño se adapta para llenar cualquier pantalla. Esta es la base del diseño responsivo.

Un diseño de ancho fijo fija las regiones en un valor exacto de píxeles, por ejemplo width: 960px o flex: 0 0 240px para una barra lateral. Los anchos fijos ofrecen un control preciso pero no se adaptan — en un teléfono estrecho causan desplazamiento horizontal, y en un monitor ancho dejan espacio vacío. En la práctica, la mayoría de los sitios combinan ambos: una barra lateral de ancho fijo junto a una columna de contenido fluida, a menudo limitada con max-width para que las pantallas muy anchas sigan siendo legibles.

Información

El enfoque más antiguo para diseños de múltiples columnas utilizaba la propiedad CSS float junto con valores negativos de margin. Esa técnica es ahora obsoleta — es frágil y difícil de mantener. Usa Flexbox o Grid para el diseño en su lugar; float hoy en día sirve principalmente para envolver texto alrededor de una imagen.

Plantillas de diseño listas para usar

Si prefieres empezar desde una estructura terminada, la galería a continuación ofrece diseños HTML descargables — fijos, fluidos e híbridos, con dos o tres columnas. Son una referencia útil, pero las técnicas modernas mostradas anteriormente son la forma recomendada de construir páginas nuevas.

Estas plantillas fueron construidas con la técnica heredada de CSS float y margin negativo. Puedes estudiarlas para obtener ideas, pero reconstruye la estructura con los enfoques de Flexbox o Grid anteriores para obtener un resultado más fácil de mantener y responsivo de serie.

Personalizar una plantilla

Una vez que tengas una estructura que te guste, estas son las formas más habituales de adaptarla:

Reemplaza el texto de marcador y añade tus propias imágenes.
Ajusta el marcado semántico para que coincida con tu contenido.
Profundiza en el marcado con nuestro tutorial de HTML.
Rediseña el diseño con nuestro tutorial de CSS.
Añade interactividad con nuestro tutorial de JavaScript.

Práctica

¿Qué elementos semánticos de HTML5 se usan habitualmente para estructurar el diseño de una página?

Práctica

¿Qué técnica de CSS es más adecuada para un diseño de página completo en dos dimensiones con filas y columnas?

CSS GridCSS float con márgenes negativosTablas HTMLLa etiqueta <center>