How to Create Frames in HTML?

Last Updated : 15 Oct, 2024

Frames in HTML allow you to divide a browser window into multiple sections, where each section can load a different HTML document. This technique was once popular for creating complex layouts, but it is now considered outdated due to several limitations and accessibility issues.

What are Frames in HTML?

Frames in HTML divide the browser window into multiple sections, each capable of displaying a separate HTML document. These sections are defined using the <frameset> tag instead of the standard <body> tag

The main parts of a frameset include:

Horizontal frames: Defined using the rows attribute.
Vertical frames: Defined using the cols attribute.

Frames allow multiple HTML files to be displayed in different sections of a single browser window.

Let us see how we can create a frame using HTML.

How to Create Frames in HTML

Let’s go through the process of creating frames using HTML.

Step 1: Create Separate HTML Files

First, create three separate HTML files to display in the frames:

frame1.html
frame2.html
frame3.html

Each of these files will load content into separate sections of the window.

Example: Code for frame1.html

frame1.html

<!DOCTYPE html>
<html>

<head>
    <title>Frame 1</title>
</head>

<body>
    <h1>Welcome to Frame 1</h1>
</body>

</html>

Example 2: Code for frame2.html

frame2.html

<!DOCTYPE html>
<html>

<body>
    <h3>frame 2</h3>
    <p> This content is in frame 2 </p>
</body>

</html>

Example 3: Code for frame3.html

frame3.html

<!DOCTYPE html>
<html>

<body>
    <h3>frame 3</h3>
    <p> This content is in frame 3</p>
</body>

</html>

Step 2: Create the Main HTML File

Now, create the main HTML file, typically named index.html, which will include all the frame files.

Example: The following example demonstrates the HTML <frameset> with cols attribute. The following code uses all of the above files i.e “frame1.html”, “frame2.html” and “frame3.html” as frames.

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Frameset Example with Columns</title>
</head>
<body>
	<frameset cols="33%, 33%, 34%">
   	 <frame src="frame1.html">
        <frame src="frame2.html">
            <frame src="frame3.html">
	</frameset>
</body>

</html>

Output:

column frames example

Example 2: In the following example, just change the cols to rows in the <frameset> tag. The codes for “frame1.html”,”frame2.html”,”frame3.html” are given before the examples.

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Frameset Example with Rows</title>
</head>
  <body>
  	<frameset rows="50%, 25%, 25%">
   	 <frame src="frame1.html">
        <frame src="frame2.html">
            <frame src="frame3.html">
	</frameset>
  </body>

</html>

Output:

row frameset example

How To Create A Box in HTML?

pall58183

Improve

Article Tags :

How to Create Frames in HTML?

What are Frames in HTML?

How to Create Frames in HTML

Step 1: Create Separate HTML Files

Step 2: Create the Main HTML File

Similar Reads

Thank You!

What kind of Experience do you want to share?