🧱 Frames in HTML – Detailed Explanation (CBSE Class 10)

🌐 1. What are Frames?

Frames in HTML are used to divide a web page into multiple sections.
Each of these sections can display a different HTML document.
This lets users view more than one web page in a single browser window.

Key Points & Elaboration

Divide Webpage: Frames split a browser window into two or more parts.
- Each part acts like a mini-browser.
- Every frame can load a separate webpage.
Multiple Pages Together:
Users can see side-by-side pages without switching tabs.

Examples

A frame on the left shows the website menu; the right frame displays page content.
One frame holds a logo at the top, and another shows the changing content below.
Frames are like picture frames on a wall, each holding a different picture (webpage).

🖼️ 2. Why Use Frames?

Frames help design complex web layouts easily.
They are useful for:

Displaying multiple documents at once (for comparison or multi-panel views).
Keeping navigation menus or headers visible at all times, even when users scroll or change the main content.
Organizing large websites into different sections (for easy maintenance and navigation).

Examples

News websites can keep categories in one frame, while stories open in another.
Online learning portals may use one frame for chapters (menu) and another for lessons.
In a library website, you can explore genres in one frame and display book details in another.

🧩 3. Tags Used for Frames

There are two main tags for frames:

<frameset>: This tag defines how the window is split (into rows/columns).
<frame>: This tag tells what each section should display (which HTML file).

Important:
When using <frameset>, you do not use the <body> tag.
<frameset> replaces <body> when frames are present.

Examples

<frameset rows="50%, 50%"> splits the window into two horizontal frames.
<frameset cols="30%, 70%"> splits the window vertically.
Nested **<frameset>**s are used for complex structures.

🧱 4. The <frameset> Tag

The <frameset> tag defines how your browser window or screen is divided:

Rows divide the window horizontally (top and bottom).
Columns divide the window vertically (side by side).

Syntax

<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>

This creates two vertical sections, each taking half the window.

Explanation:

cols="50%,50%" creates two columns.
rows="30%,70%" would create two horizontal sections (top 30%, bottom 70%).

Examples

<frameset cols="70%,30%"> for a big main area and a slim side bar.
<frameset rows="20%,80%"> for a small header and a larger main body.
<frameset cols="33%,34%,33%"> splits into three equal vertical parts.

Attributes of <frameset>

Attribute	Description	Example
`cols`	How many vertical sections (and widths)	`cols="40%,60%"`
`rows`	How many horizontal sections (and heights)	`rows="25%,75%"`
`border`	Width of divider lines between frames	`border="2"`
`bordercolor`	Color of those border lines	`bordercolor="red"`
`frameborder`	Show (`1`) or hide (`0`) the borders	`frameborder="0"`

Examples

cols="50%,50%" for two equal columns.
rows="40%,60%" border="3" for two rows with a thick divider.
bordercolor="green" to make lines green.

Activity: Creating a Simple Frame Page

Step by Step Instructions

Open Notepad or any text editor.

Type

<html>
  <frameset cols="50%,50%">
    <frame src="menu.html">
    <frame src="main.html">
  </frameset>
</html>

Save as frameset.html.
Make two more files: menu.html and main.html (just add simple texts to each).
Open frameset.html in your browser.

Observation:
You see your browser divided into two vertical halves. Each half shows contents of menu.html and main.html.

🪟 5. The <frame> Tag

A <frame> is placed inside <frameset>.
It specifies which HTML file to display in that section.

Key Attributes

Attribute	Description	Example
`src`	The HTML page to load in the frame	`src="menu.html"`
`name`	Name to refer to this frame (for link targets)	`name="leftFrame"`
`scrolling`	Add/remove scrollbar (`yes`, `no`, `auto`)	`scrolling="no"`
`noresize`	Prevents resizing this frame	`noresize`
`marginwidth`	Set left/right margin in pixels inside frame	`marginwidth="20"`
`marginheight`	Set top/bottom margin in pixels inside frame	`marginheight="15"`
`frameborder`	Show/hide border (`1` = show, `0` = hide)	`frameborder="1"`
`bordercolor`	Border color	`bordercolor="orange"`

Examples

<frame src="about.html"> shows about.html in the frame.
<frame src="home.html" name="main"> gives the frame a name.
<frame src="welcome.html" scrolling="no"> disables scroll.

🔗 6. Linking Between Frames

Frames get really powerful when you allow one frame’s links to open in another frame.
This is done by using the target attribute in anchor <a> tags.

Example

menu.html could contain:

<a href="page1.html" target="rightFrame">Page 1</a>
<a href="page2.html" target="rightFrame">Page 2</a>

frameset.html frames:

<frameset cols="30%,70%">
  <frame src="menu.html" name="leftFrame">
  <frame src="welcome.html" name="rightFrame">
</frameset>

Observation:
Clicking a menu link on left updates right-side content only.

Other Examples

Navigation bar opens new articles in the main frame.
"Contact Us" link opens contact form in right frame.
Clicking a chapter shows details on right frame.

⚙️ 7. Nested Frames

Nested frames are when a <frameset> is placed inside another <frameset>.
This helps you create complex layouts.

Example

<frameset rows="20%,80%">
  <frame src="header.html">
  <frameset cols="25%,75%">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</frameset>

Explanation:

First, the screen is split horizontally (20% header, 80% rest).
Inside the lower 80%, it's further split vertically (25% menu, 75% content).

Other Examples

Top area for logo, bottom split into side menu and content.
Left third for navigation, right two-thirds split into top (news) and bottom (updates).
Full screen split into header, then main body split into menu/content.

🚫 8. Important Note (Deprecation)

The <frameset> and <frame> tags are deprecated in HTML5.

Modern browsers may not support them well.
Today, people use CSS layouts and <iframe> tags for similar work.
If you’re building new websites, avoid frames, and use these modern techniques.

🧠 9. Comparison Table

Feature	Frameset	Frame
Purpose	Creates rows/columns for layout	Displays content in each section
Used In	Main HTML instead of <body>	Only inside <frameset>
Attributes	`rows`, `cols`, `border`, etc.	`src`, `name`, `scrolling`, `noresize`, `marginwidth`
Example	<frameset cols="50%,50%">	<frame src="main.html" name="main">

🧩 10. Example: Complete Frame Layout

<html>
<head><title>Frames Example</title></head>

<frameset rows="20%,80%">
  <frame src="header.html" name="topFrame" noresize>
  <frameset cols="30%,70%">
    <frame src="menu.html" name="leftFrame">
    <frame src="content.html" name="rightFrame">
  </frameset>
</frameset>

</html>

Explanation:

The window is split into two horizontal parts (top 20%, bottom 80%).
Top 20% shows header.
Bottom 80% is further split into left 30% (menu) and right 70% (content).

📘 Summary Table

Concept	Description
Frames	Divide webpage into multiple windows (sections), each with different HTML
Frameset Tag	Defines rows/columns (layout of frames)
Frame Tag	Shows a specific HTML in a frame
Linking	Use `target` attribute to open pages in another frame
Modern Alternative	CSS and <iframe>
HTML5 Support	Frames are deprecated; use <iframe>

Fun Fact!

Frames were once very popular, but today, websites are responsive and dynamic using CSS grids and flex layouts!
Frames can be a little tricky for mobile screens and accessibility, so we use new methods now.

Scenario Based Questions

Scenario: Your school's website shows a fixed men...