HTML Frame Tag (Frameset and Frame Tag Full Details with suitable example)


Introduction HTML Frame Tag

This Special frame structure element create a film set that defines now multiple documents can appear in different frames of a browsers window.

<frameset> tag is used inset of body tag.

Before HTML5, web developers used frames to divide a web page into multiple sections, where each section could display a different HTML document.
The purpose of frames was to make it possible to have one part of a page (like a menu) remain static while other parts (like the main content) changed.

However, frames are now deprecated in HTML5. Modern websites use CSS, JavaScript, or <iframe> for similar layouts.

Still, it’s important to understand frames for historical or academic purposes.

Main Tags Used for Frames

  1. <frameset> — replaces the <body> tag when frames are used.
  2. <frame> — defines each individual frame (a section of the browser window).
  3. <noframes> — provides alternate content for browsers that do not support frames.
  1. <frameset> Tag 

The <frameset> tag defines how to divide the browser window into frames.
It uses attributes like rows or cols to set the layout.

Syntax:

<frameset rows=”value” cols=”value”>

<frame src=”URL1″>

<frame src=”URL2″>

</frameset>

Attributes of <frameset>

Attribute Description Example
rows Divides the window horizontally (top to bottom). <frameset rows=”50%,50%”>
cols Divides the window vertically (left to right). <frameset cols=”30%,70%”>
border Sets the border width of frames. <frameset cols=”50%,50%” border=”5″>
framespacing Sets space between frames (browser-dependent). <frameset cols=”50%,50%” framespacing=”10″>
  1. <frame> Tag

Each <frame> tag defines one particular section of the page and loads a specific HTML file into it.

Syntax:

<frame src=”URL” name=”framename”>

Attributes of <frame>

Attribute Description Example
src Specifies the file to display in the frame. <frame src=”menu.html”>
name Assigns a name to the frame (used with links). <frame name=”content”>
scrolling Controls scrollbar appearance (yes, no, or auto). <frame scrolling=”no”>
noresize Prevents the user from resizing the frame. <frame noresize>
marginwidth Sets left and right margins in pixels. <frame marginwidth=”10″>
marginheight Sets top and bottom margins in pixels. <frame marginheight=”10″>
frameborder Controls border visibility (0 or 1). <frame frameborder=”0″>
  1. <noframes> Tag

The <noframes> tag provides alternative content for browsers that do not support frames.
It is usually placed inside the <frameset>.

Syntax:

<noframes>
<body>
<p>Your browser does not support frames. Please use a modern browser.</p>
</body>
</noframes>

 

Example 1: Frameset with Columns

This example divides the browser window into two vertical frames (left and right).

<html>

<head>

<title>Frameset Example</title>

</head>

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

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

<frame src=”content.html” name=”content”>

<noframes>

<body>

<p>Your browser does not support frames.</p>

</body>

</noframes>

</frameset>

</html>

Explanation:

  • The window is divided vertically:
    • Left Frame (30%) → shows menu.html
    • Right Frame (70%) → shows content.html

Example 2: Frameset with Rows

This example divides the window into two horizontal sections (top and bottom).

<html>
<head>
<title>Frameset with Rows</title>

</head>

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

<frame src=”header.html” name=”header”>

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

</frameset>

</html>

Explanation:

  • The window is divided horizontally:
    • Top Frame (25%) → header section.
    • Bottom Frame (75%) → main content section.

Example 3: Nested Frameset

You can combine rows and columns together.

<html>
<head>
<title>Nested Frameset Example</title>
</head>
<frameset rows=”30%,70%”>
<frame src=”header.html” name=”header”>
<frameset cols=”25%,75%”>
<frame src=”menu.html” name=”menu”>
<frame src=”content.html” name=”content”>
</frameset>
</frameset>
</html>

Explanation:

  • The page is divided into two rows:
    • Top row (30%) → Header
    • Bottom row (70%) → further divided into two columns:
      • Left column → Menu
      • Right column → Main content

Important Notes

  1. Frames are deprecated in HTML5.
    • Modern browsers still support them for backward compatibility, but they should not be used in new websites.
  2. Use <iframe> instead of <frameset> and <frame>.
  3. Frames can cause:
    • Problems with bookmarking pages.
    • Difficulty for search engines.
    • Accessibility issues for screen readers.

Modern Alternative — <iframe> Example

<html>
<head>
<title>Using Iframe</title>
</head>
<body>
<h2>Iframe Example</h2>
<iframe src=”menu.html” width=”300″ height=”200″ title=”Menu Section”>
</iframe>
</body>
</html>

Summary Table

Tag Purpose Status
<frameset> Divides the page into frames Deprecated
<frame> Defines each frame and its content Deprecated
<noframes> Alternate content for unsupported browsers Deprecated
<iframe> Embeds one page within another (modern use) Recommended