learn2kode.in

Menu

HTML Tutorial

Menu

HTML Frames

Frames were used in earlier versions of HTML to divide a web page into multiple sections, each displaying a different HTML document.

⚠️ Note: Frames are not supported in HTML5.
Modern websites use CSS Flexbox, Grid, or iframes instead.

However, it’s useful to learn about frames for understanding legacy websites.

1. What is a Frame?

A frame allows you to display multiple web pages within one browser window.
Each section is independent and can load a separate HTML document.

2. The <frameset> Tag

Before HTML5, the <frameset> tag replaced the <body> tag to define the layout of frames.

Syntax

Copy Text 
<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>
  • cols — divides the window into columns (you can use percentages or pixel values).
  • rows — divides the window into horizontal sections.
  • <frame> — defines each frame and specifies its content using the src attribute.

3. Example – Two Columns Layout

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Frames Example</title>
  </head>
  <frameset cols="50%,50%">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</html>

Output:

 The browser window is split into two vertical sections:

  • Left frame → loads menu.html
  • Right frame → loads content.html

4. Example – Rows Layout

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>Frames Rows Example</title>
  </head>
  <frameset rows="30%,70%">
    <frame src="header.html">
    <frame src="main.html">
  </frameset>
</html>

Output

 The page is divided into two horizontal sections (a header and a main content area).

5. Combining Rows and Columns

Copy Text 
<frameset rows="25%,75%">
  <frame src="header.html">
  <frameset cols="30%,70%">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</frameset>
  • Top: Header frame
  • Bottom: Split into left menu and right content

6. The <noframes> Tag

Browsers that do not support frames can show a fallback message using <noframes>.

Copy Text 
<noframes>
  <p>Your browser does not support frames.</p>
</noframes>

7. Replaced by <iframe> in HTML5

Modern websites use the <iframe> tag instead of framesets.

Example (HTML5 method):

Copy Text 
<iframe src="content.html" width="600" height="400" title="Content Frame"></iframe>

Output

 Displays the content.html page inside the current page.

Quick Summary

Tag Description Example
<frameset> Defines frame layout <frameset cols="50%,50%">
<frame> Defines each frame <frame src="page.html">
<noframes> Shown if browser doesn’t support frames <noframes>Fallback</noframes>
<iframe> Modern method to embed pages <iframe src="page.html"></iframe>

💡 Tips

  • Avoid using in new projects (deprecated in HTML5).
  • Use <iframe> for embedding modern content like maps, videos, or other pages.
  • Framesets are not mobile-friendly and not supported in HTML5 validators.
HTML iframes