HTML – Frames
Frames in HTML allow you to divide a web page into multiple sections or panes, each with its own independent HTML document. This enables you to display multiple web pages within a single browser window. However, it’s worth noting that the use of frames has significantly declined over the years, and modern web development practices favor other approaches like CSS and JavaScript for creating dynamic and flexible layouts.
Here’s an example of how frames are structured in HTML:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Frames Example</title> </head> <frameset cols="25%, 75%"> <frame src="left.html"> <frame src="right.html"> </frameset> </html> |
In this example, the <frameset>
element is used to define the layout of frames. The cols
attribute specifies the width of each frame, and percentages are used to distribute the available space. In this case, the left frame takes up 25% of the width, while the right frame takes 75%.
Within the <frameset>
, <frame>
elements are used to define individual frames. The src
attribute specifies the source HTML document to be loaded into each frame. In the example, “left.html” will be loaded into the left frame, and “right.html” will be loaded into the right frame.
It’s important to provide alternative content for browsers that don’t support frames or have frames disabled. This can be done by including a <noframes>
section within the <frameset>
element. The content within the <noframes>
section will be displayed when frames are not supported.
1 2 3 4 5 6 |
<noframes> <body> <p>This page requires frames.</p> </body> </noframes> |
Frames also support various attributes like name
, border
, scrolling
, and frameborder
that can be used to customize the behavior and appearance of frames.
While frames were popular in the early days of the web, their usage has diminished due to several drawbacks, including difficulties with bookmarking, printing, search engine optimization, and accessibility. Modern web development techniques, such as CSS layouts and JavaScript frameworks, offer more flexibility and better user experiences.