zaro

How to Make a Frame in HTML?

Published in HTML Structure 3 mins read

Creating frames in HTML involves structuring your webpage into multiple independent sections, each displaying a different document. While the <frame> element and <frameset> elements are deprecated in HTML5 and no longer recommended due to accessibility and usability issues, understanding the historical approach and its modern alternatives is beneficial. Here's how you used to create frames and what you should use instead:

Deprecated Method: Using Framesets and Frames (Not Recommended)

This is the old way and should be avoided. It's included for historical context.

  1. Replace <body> with <frameset>: Instead of the standard <body> tag, use <frameset>. The <frameset> tag defines how to divide the window into frames.

  2. Define Frame Layout: Use the rows and cols attributes within the <frameset> tag to specify the layout of the frames.

    • rows: Specifies the height of the frames, either as percentages (e.g., "25%,75%") or pixel values (e.g., "200, "). The asterisk () represents the remaining space.
    • cols: Specifies the width of the frames, similarly using percentages or pixels (e.g., "20%, *").
  3. Create <frame> Elements: Within the <frameset>, create <frame> elements. Each <frame> tag defines one frame in the layout.

  4. Specify Frame Content: Use the src attribute within each <frame> tag to specify the URL of the HTML document to be displayed in that frame.

Example (Deprecated - Do Not Use):

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<frameset rows="20%, *">
  <frame src="top_frame.html" name="topFrame">
  <frame src="main_frame.html" name="mainFrame">
</frameset>
</html>
  • top_frame.html would contain content for the top frame.
  • main_frame.html would contain content for the main frame.
  • name attribute is used for targeting frames in links.

Why You Shouldn't Use Frames

  • Accessibility Issues: Frames can be difficult for users with disabilities to navigate.
  • Usability Problems: Frames can break the back button, making navigation confusing. Bookmarking individual frame content is often impossible.
  • SEO Challenges: Search engines struggle to index framed content properly.

Modern Alternatives: Using <iframe> (Inline Frames) and Server-Side Includes

Instead of <frame> and <frameset>, use these alternatives:

  1. <iframe> (Inline Frame): The <iframe> tag creates an inline frame, which embeds another HTML document within the current page. This provides more flexibility and avoids the layout issues of framesets.

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML iFrame Example</title>
    </head>
    <body>
    
    <h1>Using an iFrame</h1>
    
    <iframe src="embedded_content.html" height="200" width="300" title="Iframe Example"></iframe>
    
    <p>Some text that surrounds the iframe.</p>
    
    </body>
    </html>
    • src: Specifies the URL of the document to embed.
    • height and width: Define the dimensions of the iframe.
    • title: Crucial for accessibility; describes the content of the iframe.
  2. Server-Side Includes (SSI) or Other Templating Languages (PHP, Python, etc.): These techniques involve including content from other files into a single HTML page on the server before it's sent to the browser. This avoids the problems associated with frames and iframes. This requires server-side scripting capabilities. For example, in PHP:

     <!DOCTYPE html>
     <html>
     <head>
     <title>PHP Include Example</title>
     </head>
     <body>
    
     <?php include 'header.php'; ?>
    
     <main>
         <h1>Main Content</h1>
         <p>This is the main content of the page.</p>
     </main>
    
     <?php include 'footer.php'; ?>
    
     </body>
     </html>
    • This allows you to reuse the same header.php and footer.php across multiple pages.

Recommendation: Favor server-side includes or templating languages for the best combination of reusability, accessibility, and SEO. <iframe> is acceptable for embedding content from third-party sources but use it judiciously.