Skip to content

The Frameset tag in HTML

The <frameset> tag in HTML was used to define a frameset, which replaced the <body> tag when creating a web page layout with frames. Framesets allowed the division of a browser window into multiple sections, each capable of displaying a different HTML document. This tag has been deprecated in HTML5, but understanding its use is still useful for historical knowledge and legacy systems.

The <frameset> Tag

The <frameset> tag defines how to divide the browser window into multiple frames. It can be configured using the cols and rows attributes to create vertical and horizontal frames, respectively.

Attributes of <frameset>

  • cols: Defines the number and size of columns in the frameset.
  • rows: Defines the number and size of rows in the frameset.
  • border: Specifies the width of the border between frames.
  • frameborder: Controls the display of the frame border (0 for no border, 1 for border).
  • framespacing: Specifies the spacing between frames.

Example of Using <frameset>

Here’s a basic example demonstrating how to use the <frameset> tag to create a layout with multiple frames:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Basic Frameset Example</title>

</head>

<frameset cols=”25%, 75%”>

    <frame src=”menu.html” name=”menuFrame”>

    <frameset rows=”50%, 50%”>

        <frame src=”content1.html” name=”contentFrame1″>

        <frame src=”content2.html” name=”contentFrame2″>

    </frameset>

    <noframes>

        <body>

            <p>Your browser does not support frames. Please update your browser.</p>

        </body>

    </noframes>

</frameset>

</html>

Explanation of the Example

  • <frameset cols=”25%, 75%”>: This divides the window into two columns. The first column takes up 25% of the window width, and the second column takes up 75%.
  • <frame src=”menu.html” name=”menuFrame”>: This specifies the content for the first frame, which will load the menu.html file.
  • Nested <frameset>: The second column is further divided into two rows, each taking up 50% of the remaining height.
  • <frame src=”content1.html” name=”contentFrame1″>: This specifies the content for the first row in the second column.
  • <frame src=”content2.html” name=”contentFrame2″>: This specifies the content for the second row in the second column.
  • <noframes>: This provides alternative content for browsers that do not support frames.

Practical Use Case

Here’s a more detailed practical example that illustrates how frames might have been used on a website:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Website Layout Using Frameset</title>

</head>

<frameset rows=”20%, 80%”>

    <frame src=”header.html” name=”headerFrame” scrolling=”no” noresize>

    <frameset cols=”30%, 70%”>

        <frame src=”navigation.html” name=”navFrame” noresize>

        <frame src=”main.html” name=”mainFrame”>

    </frameset>

    <noframes>

        <body>

            <h1>Frames Not Supported</h1>

            <p>Your browser does not support frames. Please update your browser.</p>

        </body>

    </noframes>

</frameset>

</html>

Explanation of Practical Example

  • <frameset rows=”20%, 80%”>: This divides the window into two horizontal sections. The top section (header) takes up 20% of the window height, and the bottom section takes up 80%.
  • <frame src=”header.html” name=”headerFrame” scrolling=”no” noresize>: The top frame loads header.html, has no scrollbars (scrolling=”no”), and cannot be resized by the user (noresize).
  • Nested <frameset>: The bottom section is further divided into two vertical columns.
  • <frame src=”navigation.html” name=”navFrame” noresize>: The left frame in the bottom section loads navigation.html and cannot be resized.
  • <frame src=”main.html” name=”mainFrame”>: The right frame in the bottom section loads main.html.
  • <noframes>: Provides alternative content for browsers that do not support frames.

Deprecated Status

The use of frames and the <frameset> element is deprecated in HTML5. Modern web design practices prefer using CSS and JavaScript for creating flexible and dynamic layouts that work across all browsers and devices, providing better accessibility and SEO performance.

Conclusion

The <frameset> tag was once a powerful tool for creating complex web layouts by dividing the browser window into multiple frames. While it has been deprecated in favor of more modern web design techniques, understanding its usage provides valuable historical context and insight into the evolution of web development.