HTML Frames

Creating HTML frames

HTML frames allow you to create a layout where a single HTML document can be divided into several sections or frames, with each frame displaying a separate HTML document. To create frames in HTML, you need to use the <frameset> and <frame> elements.

Contents

HTML TUTORIALS HTML5 FEATURES HTML5 References HTML Frames Creating HTML frames

Here’s a basic example of how to create frames:

<!DOCTYPE html>
<html>
<head>
<title>My Frameset</title>
</head>
<frameset cols="25%, 75%">
<frame src="left.html">
<frame src="right.html">
</frameset>
<noframes>
<body>
<p>This page requires a frames-enabled browser.</p>
</body>
</noframes>
</html>

In this example, we have used the <frameset> element to define the layout of the frames. The cols attribute specifies the width of each frame as a percentage of the browser window. We have defined two frames using the <frame> element, with the src attribute specifying the HTML file to be displayed in each frame.

The <noframes> element is used to provide content for browsers that do not support frames. In this example, we have simply provided a message that informs the user that a frames-enabled browser is required to view the content.

Frames can also be defined using the rows attribute to divide the frames vertically instead of horizontally.

<!DOCTYPE html>
<html>
<head>
<title>My Frameset</title>
</head>
<frameset rows="25%, 75%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>
<noframes>
<body>
<p>This page requires a frames-enabled browser.</p>
</body>
</noframes>
</html>

In this example, we have used the rows attribute to divide the frames vertically. We have defined two frames using the <frame> element, with the src attribute specifying the HTML file to be displayed in each frame.

Frames can be useful for dividing a web page into separate sections that can be updated independently. However, frames have some limitations and drawbacks. For example:

Frames can cause problems with search engines, as the search engine may only index the content of one frame rather than the entire page.
Frames can be difficult to navigate and bookmark, since each frame has its own URL and content.
Frames can cause accessibility issues for users who rely on screen readers or other assistive technologies.

Due to these limitations, frames are less commonly used today and are often replaced by other techniques such as CSS layouts, server-side includes, or JavaScript.