Saltearse al contenido

<frameset> y <frame>

Las etiquetas <frameset> y <frame> se utilizaban en HTML para dividir una página en secciones independientes, llamadas “frames”, en las cuales se podían cargar distintos documentos HTML. Esta técnica permitía crear una estructura modular, pero fue reemplazada en HTML5 por <iframe> y técnicas más modernas de layout con CSS.

¿Cómo funciona `<frameset>`?

El elemento <frameset> define cómo se divide la ventana del navegador en filas y columnas, reemplazando al <body> en el HTML de una página. En lugar de un contenido tradicional dentro de <body>, <frameset> organiza la página en un “grid” donde cada “celda” es un frame que carga un archivo HTML diferente.

Estructura Básica de `<frameset>`

<frameset rows="valor1, valor2,...">: Define filas y sus tamaños.
<frameset cols="valor1, valor2,...">: Define columnas y sus tamaños.

Las medidas pueden expresarse en:

Porcentaje (%): Cada frame ocupa una parte del espacio disponible.
Pixeles (px): Tamaño fijo.
Asterisco (*): Ocupa el espacio restante.

Ejemplo de Código

El siguiente ejemplo muestra cómo organizar la ventana en una estructura de dos filas y dos columnas dentro de la segunda fila.

<html>
  <head>
    <title>Ejemplo de Frames</title>
  </head>
  <frameset rows="16%,*" border="2">
    <frame src="header.html" name="header" />
    <frameset cols="18%,*">
      <frame src="izquierdo.html" name="izquierdo" />
      <frame src="contenido.html" name="contenido" id="contenido" />
    </frameset>
  </frameset>
</html>

Explicación del Código

El <frameset> principal divide la ventana en dos filas:
- La primera fila tiene un tamaño del 16% de la altura total y carga header.html en el frame.
- La segunda fila ocupa el espacio restante (*) y contiene otro <frameset> anidado.
En la segunda fila, se anida otro <frameset> que divide esta parte en dos columnas:
- La primera columna ocupa el 18% del ancho total y carga izquierdo.html.
- La segunda columna ocupa el resto del espacio y carga contenido.html.
Cada <frame> dentro del <frameset> puede tener un atributo name, permitiendo que otros documentos dentro del layout enlacen y se actualicen en ese frame específico.

Cómo funcionan los enlaces en los frames

Para cargar un contenido en un frame específico, como actualizar el contenido del frame contenido desde un enlace en izquierdo.html, se usa el atributo target en los enlaces.

Ejemplo de enlace en izquierdo.html para cargar contenido en el frame contenido:

<a href="contenido.html#seccion" target="contenido">Ir a Sección</a>

En este código:

href="contenido.html#seccion": Especifica el archivo HTML y, opcionalmente, el id de una sección dentro de ese documento.
target="contenido": Indica que el contenido se cargará en el frame llamado contenido.

Anidación y Layouts Complejos

Es posible anidar múltiples <frameset> dentro de otros <frameset> para crear estructuras de varias filas y columnas. Sin embargo, esto complica la estructura del HTML y puede dificultar la accesibilidad y el SEO.

Desventajas y Alternativas

SEO y Accesibilidad: Los framesets no permiten que los motores de búsqueda indexen correctamente el contenido y dificultan la navegación para usuarios con discapacidades.
Mantenimiento: Los layouts con <frameset> son difíciles de gestionar y depurar.

Alternativas Modernas

Para lograr un layout similar, puedes usar <iframe> junto con CSS Grid o Flexbox para dividir la página en secciones y cargar contenido dinámico.