tag defines frames within a
HTML Frame
AI-enhanced title and description
The <frame> tag defines a specific window, a frame, where we can load another web page. Use the src attribute to define the address of this web page. The web page can have several such frames.
The <frame> tag is used with the <frameset> element, which defines how to divide the window into frames.
If you want to use frames in a web browser instead of the <body> tag, you can put the <frameset> tag. It defines the structure of a frame (zone in the browser window, where we can load another web page), the number of columns and rows, and also how many percent/pixels it will occupy in a frame.
When writing in HTML, the <frame> tag was a block element used to designate a specific window within a <frameset> element. It was useful in some instances because it allowed each window to have its own set of attributes and could contain an entire document.
Parent: <frameset>
Placement: Block
SyntaxThe basic syntax of the <frame> tag is given with:HTML:<frame src="URL">The example below shows the <frame> tag in action.
Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head> <title>This is a frameset document</title></head><frameset> <frame src="sample-a.html" name="frame-a"> <frame src="sample-b.html" name="frame-b"></frameset></html>
Tag-Specific AttributesThe following table shows the attributes that are specific to the <frame> tag.
noresize noresize This boolean attribute specifies that the frame window is not resizable by the users.
It doesn’t allow to bookmark the Web pages that are inside of a frame. Using too many frames will cause a high workload on the server. It is not supported by many old browsers
The <frameset> tag defines the structure of a frame (zone in the browser window, where we can load another web page), number of columns and rows, and also how many percent/pixels it will occupy in a frame. The <frameset> is a deprecated HTML tag. You can use the <iframe> or <div> tags with different CSS properties for getting the same result. The pages that contain frames can be validated only if the <!DOCTYPE> is set to XHTML Frameset DTD or HTML Frameset DTD. Syntax¶The <frameset> tag comes in pairs. The content is written between the opening(<frameset>) and closing (</frameset>) tags.The <frameset> tag can contain one or several <frame> tags․ It is allowed to nestone <frameset> tag in another if it is necessary to divide the windows into smallerones.The frameset document uses the <frameset> element instead ofthe <body> element. The frameset element may not contain any content, butinstead it defines and names frames arranged in rows and/or columns.Example of the HTML <frameset> tag: ¶<!DOCTYPE html><html> <head> <title>Title of the document</title> </head> <frameset cols="50%,50%"> <frame src="https://www.w3docs.com/learn-html/html-basic.html"> <frame src="https://www.w3docs.com/learn-css/css-syntax.html"> </frameset></html>Attributes¶
pixels Defines the number and the size of frame columns.cols % Not supported in HTML5. *
pixels Defines the number and the size of frame rows.rows % Not supported in HTML5. *Creating Vertical ColumnsTo create a set of four vertical columns, we need to use the frameset element withthe cols attribute.The cols attribute is used to define the number and size of columnsthe frameset will contain. In our case, we have four files to display, so we needfour frames. To create four frames we need to assign four comma-separated valuesto the cols attribute.To make things simple we’re going to assign the value * to each of the frames, thiswill cause them to be automatically sized to fill the available space.Here’s what our HTML markup looks like.
<!DOCTYPE html><html><frameset cols="*,*,*,*"> <frame src="../file_path/frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"></frameset></html>
<!DOCTYPE html><html><frameset rows="*,*,*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"></frameset></html>
By making that one change, the frames now load as four rows stacked up on top ofeach other.Mixing Columns and RowsColumns and rows of frames can both appear on the same webpage by nestingone frameset inside of another. To do this, we first create a frameset and then nesta child frameset within the parent element. Here’s an example of how we couldnest two rows within a set of three columns.
<frameset cols="*,*,*"> <frameset rows="*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> </frameset> <frame src="frame_3.html"> <frame src="frame_4.html"></frameset>
<frameset cols="*,*,*"> <frame src="frame_1.html"> <frameset rows="*,*"> <frame src="frame_2.html"> <frame src="frame_3.html"> </frameset> <frame src="frame_4.html"></frameset>
<frameset cols="*,*"> <frame src="frame_1.html"> <frameset rows="*,*"> <frame src="frame_2.html"> <frameset cols="*,*"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset> </frameset></frameset>
That code creates a set of two equally sized columns. We then split the secondcolumn into two rows. Finally, we split the second row into two columns. Here’swhat that actually looks like.One more way to create a combination of rows and columns is to define a grid ofcolumns and rows in a single frameset. For example, if you wanted a grid of fourequally sized frames, you could use the following code.
<frameset cols="100,*"><frame src="menu.html"><frame src="main.html"><noframes>Alternative Content</noframes></frameset>
The "menu.html" and "main.html" are displayed when it visited the "index.html".index.html
<html><head><title>TAG index</title></head>
<noframes><body><p>Alternate content</p></body></noframes>
</html>
Example
<frameset cols="150,*">
<frame src="example1.html"><frame src="example2.html">
</frameset>
The FRAMESET element defines how to divide the window into frames.
cols="100,150,*"rows="100,150,*"
Vertical framescols="100,150,*"
Horizontal framesrows="100,150,*"
Nested FRAMESET
The window is first divided into vertical frames, and next the right frame isdivided into horizontal frames.
Complex nesting
<frameset rows="10%,80%,10%"><frame src="example.html">
<frameset cols="100,*,100"> <frame src="example.html">
<frameset rows="50%,50%"> <frame src="example_b.html"> <frame src="example.html"> </frameset> <frame src="example.html"> </frameset>
<frame src="example.html">
The width of the frame border can be changed using the border attribute.
</html> The bordercolor attribute of the FRAMESET element specifies the color of the frame border.
HTML Colors
<html> <head> <title>TAG index</title> </head>
<noframes> <body> <p>Alternate content</p> </body> </noframes>
</frameset> </html>
<!DOCTYPE html><html><head> <title>Frame tag</title></head> <frameset cols="25%,50%,25%"> <frame src="frame1.html" > <frame src="frame2.html"> <frame src="frame3.html"> </frameset></html>
Frame1.html
<!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
<!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
1. <!DOCTYPE html>2. <html>3. <head>4. <style>5. div{6. background-color: #c1ffc1;7. height: 500px;8. }9. </style>10. </head>11. <body>12. <div>13. <h2>This is Third frame</h2>14. </div>15. </body>16. </html>
src=" " URL the URL of the page to display in the frame
Vertical frames
<frameset cols="200,*"> <frame src="example_a.html"> <frame src="example_d.html">
</html> Output Example page
Horizontal frames
<frameset rows="100,*"> <frame src="example_a.html"> <frame src="example_d.html">
The name attribute of the FRAME element defines a unique name for the frame.
Frame name
The frame name is used for the target attribute of the element and the target attribute of the FORM element.
<frameset rows="150,150,*"><frame src="example05a.html" name="top"><frame src="example05b.html" name="middle"><frame src="example05c.html" name="bottom">
The noresize attribute of the FRAME element specifies that the user cannot resizethe frame.
<frameset cols="150,*,150"><frame src="example_a.html"><frame src="example_d.html"><frame src="example_b.html" noresize>
</html>The scrolling attribute of the FRAME element specifies whether or not to display thescrollbars.
<frameset cols="50%,50%"><frame src="example12a.html" scrolling="yes"><frame src="example12b.html" scrolling="no">
The marginwidth and marginheight attributes of the FRAME element specifies themargins in the frame.
marginwidth=" " pixels the left and right margins in the frame
<frameset cols="33%,*,33%"><frame src="example13a.html"><frame src="example13a.html" marginwidth="30" marginheight="30"><frame src="example13a.html" marginwidth="0" marginheight="0">
The target attribute of the A element specifies the target frame of the link.
target=" " _blank the linked page opens in the new window
Example page
<ul><li><a href="example_t04.html" target="top">B frame</a></li><li><a href="example_t04.html" target="main">C frame</a></li></ul>Output
The blue parts are displayed by the browsers that do not support frames.
<frameset cols="100,*"><frame src="example1.html"><frame src="example2.html">
<noframes><body>
<h1>Alternate content</h1><p>Sorry the frames cannot be displayed by your browser.</p><p><a href="menu.html">Please go to the menu page</a></p>
</body></noframes>
<noframes><body><h1>Alternate content</h1><ul><li><a href="html/index.html">HTML Tags</a></li><li><a href="css/index.html">CSS Properties</a></li><li><a href="about/index.html">About us</a></li><li><a href="contact/index.html">Contact us</a></li></ul>
<frameset cols="150,*"><frame src="example_a.html"><frame src="example_d.html">
Example page<html><head><title>TAG index</title></head>
<frameset cols="*,150"><frame src="example_d.html"><frame src="example_a.html">
<frameset cols="150,*,150"><frame src="example_a.html"><frame src="example_d.html"><frame src="example_b.html">
</frameset></html>
<frameset rows="100,*"><frame src="example_a.html"><frame src="example_d.html">
<frameset rows="*,100"><frame src="example_d.html"><frame src="example_a.html"><noframes><body><p>Alternate content</p></body></noframes>
<frameset rows="100,*,100"><frame src="example_a.html"><frame src="example_d.html"><frame src="example_b.html">
<frameset rows="100,*">
<frame src="example_a.html">
<frameset cols="150,*"><frame src="example_b.html"><frame src="example_d.html"></frameset>
<frameset cols="*,150"><frame src="example_d.html"><frame src="example_b.html"></frameset>
</html>Example page
<frameset rows="100,*"><frame src="example_b.html"><frame src="example_d.html"></frameset>
<frameset cols="150,*"><frame src="example_a.html">
<frameset rows="100,*,100"><frame src="example_b.html"><frame src="example_d.html"><frame src="example_c.html"></frameset>
<frameset cols="*,150">
<!DOCTYPE html><html><body><h1>Frame 2</h1><p>Contents of Frame 2</p><ul><li><a href="frame_1.html" target="mid_col">Load frame_1.html</a></li><li><a href="frame_2.html" target="mid_col">Load frame_2.html</a></li> <li><a href="frame_3.html" target="mid_col">Load frame_3.html</a></li><li><a href="frame_4.html" target="mid_col">Load frame_4.html</a></li></ul></body></html>