How to Create Frames in HTML

In this article, we will comprehend how to create frames in HTML. Let us first know about HTML frames.

HTML Frames

The HTML frames are used to split the web browser window into many sections. These sections or parts are not dependent on each other and they are loaded separately.

HTML frames display the document in multiple views. For instance, one frame can display a navigation bar, the other frame can display the main content, etc.

An HTML table consists of rows and columns. In the same way, the web browser window is split into frames to create many sections.

A group of frames on a web browser window is called a frameset.

Creating frames

We can create frames in HTML utilizing <frameset> tag and <frame> tag. The <frameset> tag is used in place of the <body> tag for creating frames on a webpage. If we use the <body> tag along with the <frameset> tag then the code will not work.

<frameset> tag and <frame> tag

The <frameset> tag is utilized to divide the window into frames. It contains one or more frames which are defined utilizing the <frame> tag.

Syntax:

<frameset>
    <frame name="frame1" src="url"/>
    <frame name="frame2 src="url"/>
    .
    .
</frameset>

The <frameset> is the opening tag and the <frameset> is the closing tag. The <frame> tag is a self-closing tag.

Note: The <frameset> tag and <frame> tag are not recommended to use because they are not supported in HTML5.

There are various attributes that are used in <frameset> and <frame> tags that we will discuss one by one.

Attributes of <frameset> tag:

Attribute	Description
Cols	The cols attribute is utilized to define the number of columns present in the frameset and the size of each column in the frameset. It creates vertical frames and the value of the cols attribute can be in pixels, percentages, etc. Example: <frameset cols = "20%, 50%, 30%"> The above example creates three column frames on the web browser. For two frames, two values will be given. For three frames, three values will be given and so on.
Rows	The rows attribute is utilized to define the number of rows present in the frameset and the size of each row in the frameset. It creates horizontal frames and the value of the rows attribute can be in pixels, percentages, etc. Example: <frameset cols = "25%, 75%"> The above example creates two-row frames on the web browser.
Border	The width attribute is utilized to define the width of the border of each frame.
frameborder	The frameborder attribute defines whether to display a 3-D border between frames or not. It takes only two values either "0" or "1". The value "0" defines no frame border and the value "1" defines a 3-D frame border.
framespacing	The framespacing attribute defines a space between frames. It takes an integer value.

Attributes of <frame> tag:

Attribute	Description
name	The "name" attribute is utilized to provide the name to the frame.
Src	The "src" attribute is utilized to provide the URL of the frame.
marginwidth	The "marginwidth" attribute is utilized to define the space between the left and the right of the borders of the frame and the content of the frame.
marginheight	The "marginheight" attribute is utilized to define the space between the top and the bottom of the borders of the frame and the content of the frame.
frameborder	The "frameborder" attribute defines whether or not to demonstrate a frame border. It takes only two values either "0" or "1". The value "0" means "Yes" and "1" means "No".
noresize	The "noresize" attribute is utilized to stop the user from changing the size of the frame. Example: noresize = "noresize"
longdesc	The "longdesc" attribute is utilized to give a link to another page which consists of a long description.
scrolling	The "scrolling" attribute is utilized to control the look of the scrollbars which are visible on the frames.

Constructing frames in HTML

We will construct a file called "navbar.html" first of all.
Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navbar File</title>
    <style>
        body {
            background-color: darkkhaki;
        }
        nav {
            color: black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="https://www.google.co.in/">Google</a>
            </li>
            <li>
                <a href="https://www.youtube.com/">YouTube</a>
            </li>
            <li>
                <a href="https://twitter.com/">Twitter</a>
            </li>
            <li>
                <a href="https://www.instagram.com/">Instagram</a>
            </li>
            <li>
                <a href="https://in.pinterest.com/">Pinterest</a>
            </li>
        </ul>
    </nav>
</body>
</html>

Output:

Here in the outcome given downwards a navbar can be witnessed.

We will be required to construct a file called "main.html" that contains the main content.

Code:

<!DOCTYPE html>
<html lang="en">.g
<head>
    <title>Main Content File</title>
    <style>
        body {
            background-color: rgb(253, 248, 180);
            color: red;
            text-align: center;
            padding: 20px;
            font-weight: bold;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div>
        Main Content...
    </div>
</body>
</html>

Output:

Here in the outcome below we can witness the main content.

We will make a footer file called "foot.html".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer File</title>
    <style>
        body {
            background-color: rgb(119, 87, 45);
            color: white;
            text-align: center;
            font-weight: bold;
            margin-top: 36px;
            font-size: 28px;
        }
    </style>
</head>
<body>
    FOOTER
</body>
</html>

Output:

We have created a footer file which we can witness downwards in the outcome.

We will construct a frameset and add three files that we have already constructed named "navbar.html", "main.html" and "foot.html".

We will utilize the "cols" attribute and make frames in columns.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frames in columns</title>
</head>
<frameset cols="30%, 40%, 30%">
    <frame name="navbar" src="navbar.html">
    <frame name="main-content" src="main.html">
    <frame name="foot" src="foot.html">
</frameset>
</html>

Output:

Here in the output we can witness three frames in columns on a single webpage.

We will utilize the "rows" attribute and construct frames in rows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Frames in rows</title>
</head>
<frameset rows="=20%, 70%, 10%">
    <frame name="navbar" src="navbar.html">
    <frame name="main-content" src="main.html">
    <frame name="foot" src="foot.html">
</frameset>
</html>

Output:

Here is the result downwards where we can clearly witness three frames called "navbar.html", "main.html" and "foot.html" in rows on a single webpage.

Nested framesets

When one frameset is defined into another frameset is called nested framesets.

We will make nested framesets in HTML in this demonstration.

Code:

<!DOCTYPE html> 
<html lang="en">
<head>
	<title>Nested Framesets in HTML</title> 
</head> 

<frameset rows="20%,*,*"> 

	<frameset cols="100%"> 

        <frame name="navbar" src="navbar.html">

	</frameset>

	<frameset cols="*, *"> 
		<frame name="frame4" src="frame4.html"> 
		<frame name="frame5" src="frame5.html">
	</frameset> 

    <frame name="foot" src="foot.html">
</frameset> 

</html>

Output:

We can witness nested frameset on a single webpage.

Advantages of frames:

The major benefit of using frames in HTML is that it permits users to view multiple documents on a single web page.
We can keep one frame static and change the other frames.
We can load webpages from various servers in a single frameset.
It reduces downloading time as there is no need to load images on each page.
It reduces server load.
We can create dynamic layouts by utilizing frames.
We can use the top frame as a header.

Disadvantages of frames:

When there are more than two frames on a single web page then it becomes difficult to navigate through frames.
Frames are not supported by some of the old browsers so the content is placed separately utilizing the <noframes> HTML tag.
It is hard to print the content of all the frames.
Search engine optimization becomes difficult when using frames because it is hard for search engines to rank the web pages containing frames.
If utilizing too many frames then the server will take more time to load the webpage.
Space on the system screen reduces when using many frames.

Browsers Support:

Following are the browsers that support the <frameset> and <frame> tag:

Google Chrome
Firefox
Safari
Microsoft Edge
Opera

Conclusion:

We have understood how to create frames in HTML. We can utilize <frameset> tag and <frame> tag to create frames. We can create nested framesets in HTML.

Next TopicHTML Compressor

← prev next →