Understanding Frames in HTML: An Overview

In this blog, you will learn about the concept of frames in HTML, its history and usage, benefits and drawbacks, and alternatives to frames in modern web development.

Frames in HTML are a way to divide a web page into multiple sections, each displaying its own separate HTML document. Each of these sections (or "frames") can scroll independently and have its own individual URL.

Frames were introduced in HTML 4 as a way to create complex page layouts, but have since fallen out of favor in web development due to issues with accessibility, search engine optimization, and general user experience.

In HTML, there are two types of frames:

iframe
frameset

The frameset element commonly use frame element.

An iframe (Inline Frame) in HTML is an embeddable frame that allows you to embed another HTML document within the current page.
The frameset element defines the structure of a web page with frames. It specifies the number of rows or columns that the page should be divided into, as well as the width or height of each row or column.
The frame element represents a single frame within a frameset. It is used to specify the source of content for a specific frame, as well as other attributes such as its name, scrolling behavior, and margin width.

The frame elements provides a number of useful attributes that can be used to customize its appearance and behavior, such as:

src: The URL of the content to be embedded within the iframe.
width and height: The dimensions of the iframe.
frameborder: The border around the iframe (0 for no border, 1 for a border).
scrolling: Specifies whether the iframe should have scrollbars (yes, no, or auto).

iframe:

An iframe (Inline Frame) in HTML is an element that allows you to embed another HTML document within the current page. It provides a way to include content from another source (such as another website or a video) into a web page, without having to reload the entire page.

To create an iframe, you can use the iframe element along with several attributes to specify the source of the content, the dimensions of the iframe, and other characteristics.

<iframe src="list_tag.html" width="500" height="400"></iframe>

In this example, the src attribute specifies the source URL for the content to be embedded within the iframe. The width and height attributes set the dimensions of the iframe, with a width of 500 pixels and a height of 400 pixels.

In addition to the src, width, and height attributes, the iframe element also provides several other attributes that can be used to customize its appearance and behavior. For example, the frameborder attribute can be set to 0 to remove the border around the iframe, or to 1 to display a border. The scrolling attribute can be set to "yes" to enable scrolling within the iframe, "no" to disable scrolling, or "auto" to allow scrolling only if necessary.

For Example

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <body>
        <iframe src="red.html"  height="300" width="300"frameborder="0"></iframe>
        <iframe src="purple.html"  height="300" width="300"frameborder="0"></iframe>
        <iframe src="green.html"  height="300" width="300"frameborder="0"></iframe>
        <iframe src="vimg.html"  height="300" width="300"frameborder="0"></iframe>
    </body>
</html>

To download raw file Click Here

This code creates an HTML document that uses iframes to embed four different HTML documents into the main page. The code defines the structure of the HTML document, including the head (with a title), and the body.

Within the body, the code creates four iframe elements, each with a unique source (src) specified by the red.html, purple.html, green.html, and vimg.html files. These files will be embedded into the main page and displayed within the iframes.

Each iframe is set to a height of 300 pixels and a width of 300 pixels, and the frameborder attribute is set to 0, which means the iframes will have no border.

When this code is rendered in a browser, it will display the main HTML document with four iframes, each displaying the content of the specified HTML documents.

Overall, iframes offer a convenient way to embed content from other sources into a web page without having to reload the entire page. They are widely used for embedding videos, advertisements, maps, and other types of content.

frameset:

The frameset element in HTML is used to define a set of frames on a web page. It allows you to divide a single HTML document into multiple, independent sections that can be independently scrolled, or navigated to a different page.

Each frame is defined using the frame element, and its source is specified using the src attribute. The size and layout of each frame within the frameset is determined by the cols or rows attributes, which define the number of columns or rows in the frameset, and their relative width or height, respectively.

The cols and rows attributes are used in the <frameset> HTML tag to define the number of columns or rows, respectively, that a frameset should have. The values assigned to these attributes are in the form of percentages or pixels, indicating how much space each column or row should occupy within the frameset. This allows the designer to divide the screen into multiple frames, each containing a different HTML document or web page. The <frame> tag is then used within the <frameset> to define the source of each individual frame within the frameset.

Here is an example of a simple frameset in HTML:

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <!---<frameset rows="25%,25%,25%,25%">--->
    <frameset cols="25%,25%,25%,25%">
        <frameset rows="50%,50%">
            <frameset cols="30%,*">
                <frame src="red.html"></frame>
                <frame src="purple.html"></frame>
            </frameset>
            <frame src="black.html"></frame>
        </frameset>
        <frame src="green.html"></frame>
        <frame src="red.html"></frame>
        <frame src="purple.html"></frame>
    </frameset>
</html>

To download raw file Click Here

This code is written in HTML and creates a webpage with frames. The webpage is divided into 4 columns of 25% each and each column contains a frame. The first column is further divided into two rows, the first row containing two frames that occupy 30% and 70% of the row, respectively. The second row of the first column is a single frame. The second, third and fourth columns each contain a single frame. The frames source the content from different HTML files named "red.html", "purple.html", "black.html", "green.html".

The use of frames in HTML has largely been deprecated in favor of other technologies, such as iframes, or more modern web development practices, such as responsive design. This is because frames can result in issues with usability and accessibility, as well as making it more difficult to manage the overall layout and behavior of a web page.

If you need to include multiple independent sections within a single HTML document, it is usually better to use an iframe instead of a frameset. Iframes provide a way to embed another HTML document within the current page, without having to reload the entire page.

It's important to note that the use of frames is generally not recommended in modern web development, as they can cause a variety of problems with accessibility, SEO, and user experience. Alternatives such as CSS and JavaScript are now commonly used to achieve similar effects.