Curso HTML – Módulo 11: Layout y diseño de página

Crear un layout en HTML consiste en organizar el contenido de una página para que resulte claro, fácil de recorrer y adaptable a distintas pantallas.

Una web puede contener buenos textos, imágenes y formularios, pero necesita una estructura que permita utilizarlos con comodidad. El visitante debe reconocer dónde está el menú, cuál es el contenido principal y cómo llegar a la información que busca.

En este módulo aprenderás a construir esa estructura con etiquetas semánticas. Después utilizarás CSS para distribuir los elementos mediante Flexbox y Grid, adaptar el diseño y mantener una presentación coherente.

También veremos símbolos, emojis y pequeñas guías de estilo que te ayudarán a cuidar los detalles de la página.

Curso de HTML de TecnoPS
Módulo anterior: 10. Cabecera del documento y metadatos.
Módulo actual: 11. Layout y diseño de página.
Próximo módulo: 12. Gráficos en HTML.

Objetivos del módulo

Al finalizar este módulo deberías ser capaz de:

• Organizar una página con etiquetas semánticas.
• Elegir entre <div>, <section> y <article>.
• Construir una jerarquía clara de encabezados.
• Comprender el flujo normal y el modelo de caja.
• Distribuir elementos con Flexbox y CSS Grid.
• Crear diseños adaptables desde pantallas pequeñas.
• Utilizar consultas de medios y de contenedor.
• Evitar desbordamientos y problemas de lectura.
• Incorporar símbolos y emojis con criterio.
• Aplicar una guía de estilo sencilla.
• Revisar la página con teclado y diferentes tamaños de pantalla.

1. Qué es un layout en HTML

El término layout describe la distribución de los elementos de una página.

Por ejemplo, un blog puede incluir:

• Una cabecera con el nombre del sitio.
• Un menú de navegación.
• Una zona principal con entradas.
• Una zona complementaria con recursos.
• Un pie de página.

HTML define el significado y la organización del contenido. CSS controla aspectos como columnas, espacios, tamaños y alineación.

Un primer esquema podría ser:

<body>
  <header>
    <!-- Presentación del sitio -->
  </header>

  <nav>
    <!-- Navegación principal -->
  </nav>

  <main>
    <!-- Contenido principal -->
  </main>

  <aside>
    <!-- Información complementaria -->
  </aside>

  <footer>
    <!-- Información final -->
  </footer>
</body>

Estas etiquetas no crean automáticamente columnas. Su primera función es describir las partes del documento.

Una estructura bien identificada ayuda a comprender y recorrer la página, también mediante tecnologías de asistencia.

2. Los elementos semánticos del layout

Cada elemento debe elegirse por la función de su contenido.

La posición visual no decide la etiqueta. Una columna situada a la derecha puede contener información principal; en ese caso, su ubicación no justifica utilizar <aside>.

Del mismo modo, una sección importante puede mostrarse como una tarjeta sin convertirse por ello en un <article>.

3. El contenido principal con main

<main> identifica el contenido central de la página:

<main id="contenido">
  <h1>Curso de desarrollo web</h1>
  <p>Aprende a crear páginas desde cero.</p>
</main>

En una página habitual debes tener un único <main> visible. La cabecera global, el menú general y el pie compartido por todo el sitio suelen quedar fuera.

Además, puedes utilizar su identificador para añadir un enlace que permita saltar directamente al contenido:

<a href="#contenido">Saltar al contenido</a>

Este recurso resulta útil para evitar recorrer repetidamente el menú con el teclado.

4. Cuándo usar section, article y div

Esta elección suele generar dudas. Veamos tres casos.

Una agrupación temática: section

<section aria-labelledby="titulo-objetivos">
  <h2 id="titulo-objetivos">Objetivos del curso</h2>
  <p>Estas son las habilidades que vas a desarrollar.</p>
</section>

El contenido gira alrededor de un tema y tiene un encabezado que lo identifica.

Una unidad independiente: article

<article>
  <h2>Introducción a CSS Grid</h2>
  <p>Una explicación de sus conceptos básicos.</p>
  <a href="/introduccion-css-grid/">Leer el artículo</a>
</article>

Podría distribuirse como una entrada independiente.

Un contenedor de presentación: div

<div class="contenedor">
  <!-- Elementos que necesitan compartir ancho o distribución -->
</div>

Si solo necesitas agrupar elementos para aplicar estilos, <div> es una opción adecuada.

No hace falta sustituir cada contenedor por una etiqueta semántica. En particular, <section> debe representar una agrupación temática y normalmente contar con un encabezado.

5. Encabezados y orden de lectura

Los encabezados deben describir la organización del contenido:

<h1>Curso de HTML</h1>

<section>
  <h2>Contenido del curso</h2>

  <section>
    <h3>Primeros pasos</h3>
    <p>...</p>
  </section>

  <section>
    <h3>Proyectos prácticos</h3>
    <p>...</p>
  </section>
</section>

Como pauta editorial, utiliza un <h1> para el título principal y organiza el resto con niveles coherentes.

No elijas un <h4> porque tenga un tamaño visual que te guste. El tamaño se modifica con CSS.

El orden del HTML importa

Procura que el documento pueda entenderse en su orden original:

1. Presentación.
2. Navegación.
3. Contenido principal.
4. Información complementaria.
5. Pie de página.

Evita que CSS cambie la posición visual de elementos hasta producir un recorrido distinto al de lectura o al del teclado. Una distribución atractiva debe conservar una secuencia comprensible.

6. El flujo normal del documento

Antes de añadir columnas, observa cómo se distribuye el contenido sin reglas especiales.

Los elementos de bloque, como párrafos y divisiones, suelen colocarse uno debajo de otro. Los elementos en línea, como enlaces dentro de un párrafo, participan en sus líneas de texto.

<p>Primer párrafo.</p>
<p>Segundo párrafo con <a href="/curso/">un enlace</a>.</p>

Este comportamiento es una buena base para empezar: el contenido ya dispone de un orden natural.

No necesitas posicionar manualmente cada elemento. En una página de contenido, resulta más sencillo partir del flujo normal y cambiar únicamente las agrupaciones que lo necesiten.

7. El modelo de caja

Cada elemento genera cajas con varias partes:

Con el modelo predeterminado, un ancho declarado puede aumentar al sumar relleno y bordes.

Una configuración práctica es:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Así, el ancho declarado incluye contenido, relleno y borde:

.tarjeta {
  width: 300px;
  padding: 20px;
  border: 1px solid;
}

La caja conserva un ancho total de 300 píxeles, sin contar los márgenes exteriores.

8. Contenedores fluidos y espacios

En lugar de fijar toda la página a un ancho rígido, puedes combinar un ancho flexible con un máximo:

.contenedor {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

Esta regla deja margen en pantallas pequeñas y limita el crecimiento en las grandes.

Propiedades lógicas

margin-inline actúa en el eje de escritura de la línea. En una página en español, corresponde normalmente a los márgenes izquierdo y derecho.

También encontrarás:

.bloque {
  padding-inline: 1rem;
  padding-block: 2rem;
  margin-block-end: 1.5rem;
}

Estas propiedades permiten expresar espacios según la dirección de escritura.

Evita alturas rígidas para contenido variable

Una tarjeta con texto puede necesitar crecer. Si le impones una altura pequeña, su contenido puede desbordarse al ampliar la página o cambiar el texto.

Prefiere el tamaño natural y añade mínimos solo cuando exista una necesidad concreta.

9. Flexbox para distribuir elementos en una dirección

Flexbox permite organizar elementos en una fila o columna.

Resulta útil para menús, grupos de botones y cabeceras:

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

Sus propiedades principales incluyen:

Los ejes dependen de flex-direction: no siempre equivalen a horizontal y vertical.

Flexbox puede formar varias líneas, pero cada línea distribuye su espacio de manera independiente.

Ejemplo de navegación

<nav aria-label="Principal">
  <ul class="menu">
    <li><a href="/">Inicio</a></li>
    <li><a href="/cursos/">Cursos</a></li>
    <li><a href="/contacto/">Contacto</a></li>
  </ul>
</nav>

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

Al reducir el ancho, los enlaces pueden pasar a otra línea.

10. CSS Grid para filas y columnas

Grid permite organizar una cuadrícula de dos dimensiones.

Este ejemplo crea una zona principal y otra complementaria:

.distribucion {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
}

La unidad fr reparte el espacio disponible entre las columnas. En este caso, la primera recibe dos partes y la segunda una.

gap establece la separación.

La expresión minmax(0, …) permite que las pistas reduzcan su tamaño por debajo de ciertos mínimos que, de otro modo, puede imponer el contenido. Aun así, debes controlar recursos o textos que puedan desbordarse.

Cuándo elegir cada técnica

Puedes combinarlas: Grid para la estructura general y Flexbox dentro de una tarjeta.

11. Cuadrículas adaptables sin muchos puntos de ruptura

Una colección de tarjetas puede ajustar sus columnas automáticamente:

.tarjetas {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}

La regla combina:

• repeat(): repite la definición.
• auto-fit: ajusta las columnas al espacio disponible.
• minmax(): define un mínimo y un máximo.
• min(100%, 16rem): evita exigir una columna de 16 rem cuando el contenedor es más estrecho.
• 1fr: permite repartir el espacio restante.

Así puedes obtener una columna en poco espacio y varias cuando el contenedor crece.

12. Diseño responsive y enfoque mobile first

Un diseño responsive se adapta al espacio disponible.

No basta con que una página reduzca todo su contenido. Debe seguir siendo legible y utilizable.

El enfoque mobile first consiste en comenzar con una distribución sencilla para espacios pequeños y ampliarla después:

.distribucion {
  display: grid;
  gap: 2rem;
}

@media (min-width: 56rem) {
  .distribucion {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

La regla inicial presenta una columna. Cuando existe suficiente ancho, aparecen dos.

El punto de cambio debe responder a las necesidades del contenido, en lugar de perseguir un modelo concreto de teléfono o tableta.

Recuerda incluir en la cabecera:

<meta name="viewport" content="width=device-width, initial-scale=1">

El diseño adaptable combina viewport, tamaños flexibles y cambios de distribución.

Para repasar esa parte del curso, consulta también el módulo 9 sobre medios en HTML, especialmente sus ejemplos de vídeo adaptable.

13. Tipografía fluida con clamp

clamp() permite limitar un valor entre un mínimo y un máximo:

h1 {
  font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}

En este ejemplo:

Combinar unidades relativas a la fuente con unidades de viewport permite un ajuste gradual.

Comprueba siempre el resultado al ampliar la página. Una fórmula matemática correcta todavía puede producir una lectura incómoda.

Para los párrafos, también puedes limitar la longitud de línea:

.texto {
  max-width: 65ch;
  line-height: 1.65;
}

ch resulta útil como referencia aproximada, aunque no representa un número exacto de caracteres en cualquier tipografía.

14. Imágenes y medios dentro del layout

Una imagen no debería desbordar su contenedor:

img,
video {
  max-width: 100%;
  height: auto;
}

Cuando conozcas sus dimensiones originales, decláralas:

<img
  src="aula.jpg"
  alt="Alumnos trabajando en un aula de informática"
  width="1200"
  height="800"
>

Para seleccionar diferentes recortes o formatos puedes utilizar <picture>:

<picture>
  <source
    media="(min-width: 50rem)"
    srcset="aula-panoramica.jpg"
  >

  <img
    src="aula-compacta.jpg"
    alt="Alumnos trabajando en un aula de informática"
    width="800"
    height="800"
  >
</picture>

El navegador evalúa las fuentes y utiliza el <img> como elemento de imagen y alternativa.

Si cada recorte tiene una proporción diferente, revisa las dimensiones reservadas y los estilos para evitar saltos de diseño. Los archivos del ejemplo deben existir en tu proyecto.

15. Consultas de contenedor: adaptar un componente a su espacio

Una media query consulta características del viewport. Una consulta de contenedor puede adaptar un componente al espacio que ocupa dentro de la página.

<div class="zona-tarjeta">
  <article class="tarjeta-destacada">
    <div>
      <h2>Curso de HTML</h2>
      <p>Aprende a construir páginas accesibles.</p>
    </div>

    <a href="/cursos/html/">Ver curso</a>
  </article>
</div>

.zona-tarjeta {
  container-type: inline-size;
}

.tarjeta-destacada {
  display: grid;
  gap: 1rem;
}

@container (min-width: 30rem) {
  .tarjeta-destacada {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

El contenedor consultado es .zona-tarjeta y la regla modifica un descendiente.

Esta técnica resulta útil cuando una tarjeta puede aparecer tanto en una zona ancha como en una columna estrecha.

16. Subgrid y alineación entre componentes

subgrid permite que una cuadrícula anidada comparta pistas con su cuadrícula superior.

Por ejemplo, puede ayudar a alinear títulos, textos y enlaces de varias tarjetas aunque cada una tenga distinta cantidad de contenido:

.listado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ficha {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Cada ficha ocuparía tres filas compartidas. Su HTML debe organizar los elementos de acuerdo con esa distribución.

Es una herramienta adicional para resolver alineaciones concretas. La base sigue siendo comprender las pistas y la colocación de Grid. Puedes ampliar el tema en la referencia de CSS Grid de MDN.

17. Símbolos y referencias de caracteres

HTML permite escribir directamente muchos símbolos si el documento utiliza UTF-8:

<p>© TecnoPS</p>
<p>Precio: 25 €</p>

Algunos caracteres necesitan especial cuidado porque intervienen en la sintaxis.

Para mostrar una etiqueta como texto:

<p>La etiqueta &lt;main&gt; contiene el contenido principal.</p>

Las referencias también pueden ser numéricas, como &#169;.

No utilices una cadena de &nbsp; para colocar columnas o separar elementos: el espaciado del layout debe controlarse con CSS.

18. Emojis e iconos con significado claro

Un emoji puede acompañar un mensaje:

<p>
  <span aria-hidden="true">✅</span>
  Ejercicio completado.
</p>

Aquí el texto transmite toda la información y el emoji es decorativo.

Si utilizas un símbolo como único contenido de un control, proporciona un nombre comprensible:

<button type="button" aria-label="Cerrar aviso">
  <span aria-hidden="true">×</span>
</button>

Aun así, cuando exista espacio, un texto visible como «Cerrar» puede resultar más claro.

Ten presente que los emojis cambian de aspecto entre sistemas. No bases una instrucción importante únicamente en su color, forma o interpretación.

19. Una guía de estilo sencilla

Una guía de estilo establece decisiones que se repiten por todo el sitio.

Puedes comenzar por:

Las propiedades personalizadas de CSS ayudan a centralizar valores:

:root {
  --color-fondo: #f4f7fb;
  --color-superficie: #ffffff;
  --color-texto: #182235;
  --color-enlace: #155397;
  --color-borde: #cbd5e1;

  --espacio-1: 0.5rem;
  --espacio-2: 1rem;
  --espacio-3: 1.5rem;
  --espacio-4: 2rem;

  --radio: 0.75rem;
}

Después puedes reutilizarlos:

.tarjeta {
  padding: var(--espacio-3);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

Esta organización facilita cambiar el diseño sin buscar valores repetidos en muchos lugares.

20. Ejemplo completo: un layout en HTML adaptable

Vamos a construir una página de cursos con:

• Cabecera y navegación.
• Enlace para saltar al contenido.
• Presentación principal.
• Cuadrícula de tarjetas.
• Recursos complementarios.
• Pie de página.
• Diseño de una o dos columnas según el espacio.

Crea dos archivos en la misma carpeta: index.html y estilos.css.

Los enlaces del ejemplo apuntan a secciones del propio documento para que la demostración pueda recorrerse sin crear otras páginas.

Archivo index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >

  <title>Academia Web | Laboratorio de layout</title>

  <meta
    name="description"
    content="Página de práctica con estructura semántica, tarjetas y diseño adaptable mediante CSS."
  >

  <link rel="stylesheet" href="estilos.css">
</head>

<body>
  <a class="saltar-contenido" href="#contenido">
    Saltar al contenido
  </a>

  <header class="cabecera">
    <div class="contenedor cabecera-interior">
      <a class="marca" href="#inicio">Academia Web</a>

      <nav aria-label="Principal">
        <ul class="menu">
          <li><a href="#cursos">Cursos</a></li>
          <li><a href="#metodo">Método</a></li>
          <li><a href="#recursos">Recursos</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="contenido" tabindex="-1">
    <section
      id="inicio"
      class="presentacion contenedor"
      aria-labelledby="titulo-principal"
    >
      <p class="etiqueta">Formación paso a paso</p>

      <h1 id="titulo-principal">
        Aprende a construir tus propias páginas web
      </h1>

      <p class="introduccion">
        Descubre cómo organizar contenido, diseñar interfaces
        y crear proyectos que se adapten a distintas pantallas.
      </p>

      <a class="boton" href="#cursos">Explorar cursos</a>
    </section>

    <div class="contenedor distribucion">
      <div class="zona-principal">
        <section id="cursos" aria-labelledby="titulo-cursos">
          <h2 id="titulo-cursos">Cursos disponibles</h2>

          <div class="tarjetas">
            <article class="tarjeta">
              <p class="etiqueta">Nivel inicial</p>
              <h3>HTML desde cero</h3>
              <p>
                Estructura documentos y utiliza etiquetas
                con un significado claro.
              </p>
              <a href="#metodo">Cómo estudiar HTML</a>
            </article>

            <article class="tarjeta">
              <p class="etiqueta">Nivel inicial</p>
              <h3>CSS práctico</h3>
              <p>
                Trabaja con colores, espacios, Flexbox
                y cuadrículas adaptables.
              </p>
              <a href="#metodo">Cómo practicar CSS</a>
            </article>

            <article class="tarjeta">
              <p class="etiqueta">Siguiente paso</p>
              <h3>JavaScript básico</h3>
              <p>
                Añade comportamiento a tus páginas
                y responde a las acciones del usuario.
              </p>
              <a href="#metodo">Cómo practicar JavaScript</a>
            </article>
          </div>
        </section>

        <section
          id="metodo"
          class="panel"
          aria-labelledby="titulo-metodo"
        >
          <h2 id="titulo-metodo">Un método basado en la práctica</h2>

          <ol>
            <li>Lee la explicación y observa el ejemplo.</li>
            <li>Escribe el código en tu editor.</li>
            <li>Cambia una parte y comprueba el resultado.</li>
            <li>Resuelve un ejercicio sin copiar la solución.</li>
          </ol>
        </section>
      </div>

      <aside
        id="recursos"
        class="panel recursos"
        aria-labelledby="titulo-recursos"
      >
        <h2 id="titulo-recursos">Recursos de apoyo</h2>

        <p>
          Consulta estas referencias mientras desarrollas
          tus ejercicios.
        </p>

        <ul>
          <li>
            <a href="https://developer.mozilla.org/es/docs/Web/HTML">
              Referencia de HTML en MDN
            </a>
          </li>
          <li>
            <a href="https://developer.mozilla.org/es/docs/Web/CSS">
              Referencia de CSS en MDN
            </a>
          </li>
          <li>
            <a href="https://validator.w3.org/nu/">
              Comprobador de HTML
            </a>
          </li>
        </ul>
      </aside>
    </div>
  </main>

  <footer class="pie">
    <div class="contenedor">
      <p>
        <span aria-hidden="true">©</span>
        Academia Web. Ejemplo educativo.
      </p>
      <a href="#inicio">Volver al inicio</a>
    </div>
  </footer>
</body>
</html>

Archivo estilos.css

:root {
  --fondo: #f4f7fb;
  --superficie: #ffffff;
  --texto: #182235;
  --secundario: #46566c;
  --enlace: #155397;
  --borde: #cbd5e1;
  --radio: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, sans-serif;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

a {
  color: var(--enlace);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

:focus-visible {
  outline: 3px solid #9a4400;
  outline-offset: 4px;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  max-width: 22ch;
  margin-block: 0.5rem 1rem;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}

h2 {
  margin-block-start: 0;
  font-size: 1.6rem;
}

h3 {
  font-size: 1.2rem;
}

.contenedor {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.saltar-contenido {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 1rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: white;
  transform: translateY(-200%);
}

.saltar-contenido:focus {
  transform: translateY(0);
}

.cabecera {
  background: var(--superficie);
  border-block-end: 1px solid var(--borde);
}

.cabecera-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.marca {
  font-size: 1.25rem;
  font-weight: 750;
  text-decoration: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-block;
  padding-block: 0.5rem;
}

.presentacion {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.etiqueta {
  color: var(--secundario);
  font-size: 0.9rem;
  font-weight: 700;
}

.introduccion {
  max-width: 60ch;
  margin-block-end: 1.5rem;
  color: var(--secundario);
  font-size: 1.125rem;
}

.boton {
  display: inline-block;
  max-width: 100%;
  padding: 0.8rem 1.2rem;
  border-radius: 0.4rem;
  background: var(--enlace);
  color: white;
  font-weight: 700;
  text-decoration: none;
}

.boton:hover {
  text-decoration: underline;
}

.distribucion {
  display: grid;
  gap: 2rem;
  padding-block-end: 3rem;
}

.zona-principal,
.recursos {
  min-width: 0;
}

.zona-principal {
  display: grid;
  gap: 2rem;
}

.tarjetas {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.tarjeta,
.panel {
  padding: 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tarjeta > .etiqueta {
  margin-block-start: 0;
}

.tarjeta h3 {
  margin-block-start: 0;
}

.tarjeta > a {
  margin-block-start: auto;
  padding-block-start: 0.75rem;
}

.recursos {
  align-self: start;
}

.recursos li + li {
  margin-block-start: 0.75rem;
}

.pie {
  padding-block: 2rem;
  border-block-start: 1px solid var(--borde);
  background: var(--superficie);
}

@media (min-width: 60rem) {
  .distribucion {
    grid-template-columns:
      minmax(0, 3fr) minmax(15rem, 1fr);
    align-items: start;
  }
}

Qué debes observar

En una pantalla estrecha, los recursos aparecen después del contenido principal. Cuando hay espacio suficiente, pasan a una columna complementaria.

Las tarjetas ajustan sus columnas al espacio disponible. El menú permite saltos de línea y la tipografía principal crece dentro de unos límites.

El ejemplo funciona sin JavaScript: el HTML proporciona la estructura y CSS organiza su presentación.

21. Errores frecuentes al construir layouts

Utilizar tablas para distribuir toda la página

Reserva las tablas para datos tabulares. Flexbox y Grid ofrecen herramientas específicas de distribución.

Posicionar todo con absolute

El posicionamiento absoluto puede resultar útil para elementos concretos, pero complica páginas con texto variable.

Fijar anchos superiores al viewport

Una caja de 1200 píxeles no cabe en una pantalla estrecha si no tiene reglas que limiten su tamaño.

Ocultar el desbordamiento para disimular errores

Aplicar overflow-x: hidden a toda la página puede esconder contenido. Busca primero qué elemento se sale.

Eliminar el indicador de foco

Evita reglas como esta sin ofrecer una alternativa visible:

/* No elimines el foco sin sustituirlo */
a:focus {
  outline: none;
}

Diseñar solo con textos cortos

Prueba títulos largos, enlaces extensos y párrafos adicionales. El contenido real suele revelar límites que una maqueta breve no muestra.

22. Ejercicios prácticos

Ejercicio 1: estructura semántica

Crea una página con cabecera, navegación, contenido principal y pie. Explica la función de cada elemento.

Ejercicio 2: navegación flexible

Diseña un menú con Flexbox. Comprueba qué ocurre cuando duplicas la longitud de sus enlaces.

Ejercicio 3: tarjetas adaptables

Construye seis tarjetas con Grid. Deben ajustar su distribución sin provocar desplazamiento horizontal en una pantalla estrecha.

Ejercicio 4: dos columnas

Añade una zona de recursos que aparezca debajo del contenido en móvil y a su lado cuando exista espacio suficiente.

Ejercicio 5: símbolos

Muestra como texto las etiquetas <header>, <main> y <footer> utilizando referencias de caracteres.

Ejercicio 6: guía de estilo

Define colores, separaciones y radios mediante propiedades personalizadas. Cambia después la apariencia modificando esos valores.

23. Ejercicios avanzados

Una tarjeta en dos contextos

Coloca el mismo componente en una zona ancha y en una columna estrecha. Utiliza una consulta de contenedor para adaptar su contenido.

Laboratorio de contenido difícil

Prueba el layout con:

• Un título de varias líneas.
• Una dirección web larga.
• Una tarjeta con cinco párrafos.
• Una imagen muy grande.
• Texto ampliado.

Documenta los problemas y sus correcciones.

Rediseño de una página del curso

Escoge una página de práctica y reconstruye su distribución con HTML semántico, Grid y Flexbox. Conserva un orden de lectura claro.

Alineación con subgrid

Construye varias fichas con título, descripción y enlace. Intenta alinear esas partes mediante filas compartidas.

24. Comprobación del diseño

Antes de dar una página por terminada, revisa:

La vista adaptable del navegador ayuda a detectar problemas, pero conviene complementar la revisión con dispositivos reales cuando sea posible.

25. Buenas prácticas profesionales

Diseña a partir del contenido

La estructura debe responder a lo que necesita la página. No todas las webs requieren una barra lateral o una cuadrícula.

Conserva una base sencilla

Empieza con el flujo normal. Añade distribución y comportamiento adaptable donde aporten valor.

Reutiliza decisiones

Mantén espacios, colores y componentes coherentes mediante una pequeña guía de estilo.

Comprueba el orden real

Una página debe poder recorrerse con comodidad tanto visualmente como con teclado.

Consulta documentación actual

Para ampliar estos conceptos, utiliza la guía de diseño responsive de MDN y el tutorial de estructura de páginas del W3C.

26. Conclusión

Un buen layout en HTML comienza con una estructura comprensible. Las etiquetas semánticas identifican las partes del contenido, mientras que CSS permite distribuirlas y adaptarlas al espacio disponible.

Con el flujo normal, Flexbox y Grid puedes construir gran parte de las páginas habituales. Las consultas de contenedor, la tipografía fluida y herramientas como subgrid amplían tus opciones cuando el diseño lo necesita.

La práctica consiste en comprobar que la página mantiene su claridad cuando cambia la pantalla, crece el texto o se utiliza el teclado.

En el próximo módulo trabajaremos con gráficos en HTML: aprenderemos a utilizar SVG y Canvas, entender sus diferencias y elegir la herramienta adecuada para cada caso.

Módulo anterior: 10. Cabecera del documento y metadatos.
Siguiente módulo: 12. Gráficos en HTML.