The <frame> tag specifies a designated region in an HTML document where an external web page can be shown.
A <frame> element is employed alongside <frameset>, splitting a webpage into numerous sections or frames, where each frame has the capability to display distinct web pages.
Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use <iframe> or <div> with CSS to achieve similar effects in HTML.
Syntax
Example
< frame src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" >
The HTML <frame> tag specifications are as follows:
| Display | Block |
|---|---|
| Start tag/End tag | Start tag(required), End tag(forbidden) |
| Usage | Frames |
Example 1
Create Vertical frames:
Example
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" >
<frame src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<frame src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</frameset>
</html>
Output:
Frame1.html
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #7fffd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>
Frame2.html
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #2f4f4f;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>
Frame3.html
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #c1ffc1;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>
Example 2:
Create Horizontal frames:
Example
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" >
<frame name="main" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<frame name="bottom" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</frameset>
</html>
Output:
Attribute
Tag-specific attribute
| Attribute | Value | Description |
|---|---|---|
| frameborder | 01 | It specifies whether to display a border around the frame or not, and its default value is 1 |
| longdsec | URL | It specifies a page which contains the long description of the content of the frame. |
| marginheight | pixels | It specifies the top and bottom margins of the frame. |
| marginwidth | pixels | It defines the height of the margin between frames. |
name |
text | It is used to assign the name to the frame. |
| noresize | noresize | It is used to prevent resizing of the frame by the user. |
| scrolling | yesnoauto | It specifies the existence of the scrollbar for overflowing content. |
src |
URL | It specifies the URL of the document which we want to display in a frame. |
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<frame> |
Yes | Yes | Yes | Yes | Yes |