askvity

How to Create Nested Frames in HTML?

Published in HTML Framesets 3 mins read

Creating nested frames in HTML involves structuring your webpage layout using multiple layers of the <frameset> element.

Nested frames allow you to divide a browser window into multiple sections, and then further divide one or more of those sections into even smaller areas, creating complex grid-like layouts.

While <frameset> is now deprecated in modern HTML (replaced by CSS layouts like Flexbox and Grid), understanding how it worked provides insight into historical web design techniques.

Steps to Create Nested Frames

The process, as outlined in the reference, involves building the structure from the outside in:

  1. Start by defining the outer frameset using the <frameset> tag. This element replaces the <body> tag in an HTML document that uses frames.
  2. Limit the rows or columns within the outer frameset using the rows or cols attribute respectively. These attributes define the size and number of initial divisions in the window.
  3. Define another frameset using the <frameset> tag inside each row or column slot where you want further subdivision, instead of placing a simple <frame> element there. This nested <frameset> will then contain its own <frame> or even another <frameset> element.

This process creates a hierarchical structure where <frameset> elements contain other <frameset> elements or the final <frame> elements that load actual web pages.

HTML Structure Example

Here is a simplified example demonstrating nested frames, creating a layout with a single column on the right and a two-row division on the left:

<!DOCTYPE html>
<html>
<head>
<title>Nested Frames Example</title>
</head>
<frameset cols="30%, 70%"> <!-- Outer frameset: divides the window vertically -->

  <frameset rows="50%, 50%"> <!-- Nested frameset: divides the LEFT column horizontally -->
    <frame src="left_top.html" name="left_top_frame">
    <frame src="left_bottom.html" name="left_bottom_frame">
  </frameset>

  <frame src="right.html" name="right_frame"> <!-- Single frame in the RIGHT column slot -->

  <noframes>
    <body>
      Your browser does not support frames.
    </body>
  </noframes>

</frameset>
</html>

In this example:

  • The main <frameset> divides the window into two vertical columns (30% and 70% width).
  • The first column slot contains another <frameset> element.
  • This nested <frameset> divides its allocated space (the first column) into two horizontal rows (50% and 50% height).
  • These inner rows contain <frame> elements loading left_top.html and left_bottom.html.
  • The second column slot contains a single <frame> element loading right.html.

This results in a layout with three distinct areas: top-left, bottom-left, and right.

Key Attributes

Creating nested frames relies on understanding the attributes used with <frameset> and <frame> tags.

Tag Attribute Description Example Value(s)
<frameset> rows Defines the number and size of horizontal divisions (rows). "50%, 50%" or "*, 200"
<frameset> cols Defines the number and size of vertical divisions (columns). "30%, 70%" or "100, *"
<frame> src Specifies the URL of the document to load into the frame. "page.html"
<frame> name Assigns a name to the frame, used for targeted links (<a target="...">). "main_content"

Sizes in rows and cols can be specified as percentages, pixels, or using the asterisk (*) which represents the remaining space.

Deprecation Note

As mentioned, the <frameset>, <frame>, and <noframes> elements are obsolete in HTML5. Modern web design achieves similar layouts using CSS techniques like Flexbox, CSS Grid, or by loading content dynamically using technologies like JavaScript and IFrames (<iframe>), which are still supported.

Related Articles