⬅ Previous Next ➡

15. Frames & Iframes

Frames & Iframes
  • Frames:
    • Used in older versions of HTML (HTML4) to divide a browser window into multiple sections, where each section could load a separate HTML document.
    • Status: These are now deprecated and not supported in HTML5 because they are bad for SEO and user accessibility.
  • Iframes (Inline Frames):
    • Used to embed another HTML document or external content (like a YouTube video or a Google Map) inside the current webpage.
    • Unlike old frames, iframes can be placed anywhere on a page like an image or a paragraph.
  • Key Attributes for <iframe>:
    • src: The URL of the page or content you want to embed.
    • width & height: Set the size of the iframe window (in pixels or percentages).
    • frameborder: Specifies whether or not to display a border around the iframe (usually set to "0" for a clean look).
    • name: Used as a target for links, allowing a link to open its content inside the iframe.
    • allowfullscreen: Allows the embedded content (like a video) to be viewed in full-screen mode.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Iframe Examples (sswebtechio & quitexams)</title>
</head>

<body>

<h2>HTML Iframes (&lt;iframe&gt; Tag)</h2>

<!-- Example 1: Basic Iframe (Load sswebtechio) -->
<h3>Example 1: sswebtechio in Iframe</h3>
<iframe src="https://sswebtechio.com" width="700" height="350" title="sswebtechio Website"></iframe>

<!-- Example 2: Basic Iframe (Load quitexams) -->
<h3>Example 2: quitexams in Iframe</h3>
<iframe src="https://quitexams.com" width="700" height="350" title="quitexams Website"></iframe>

<!-- Example 3: Iframe with Border (sswebtechio) -->
<h3>Example 3: Iframe with Border</h3>
<iframe src="https://sswebtechio.com" width="700" height="350" frameborder="1" title="sswebtechio (Border)"></iframe>

<!-- Example 4: Iframe without Border (quitexams) -->
<h3>Example 4: Iframe without Border</h3>
<iframe src="https://quitexams.com" width="700" height="350" frameborder="0" title="quitexams (No Border)"></iframe>

<!-- Example 5: Open Link Inside Iframe using name attribute -->
<h3>Example 5: Open Links inside Iframe</h3>

<p>Click links below, page will open inside iframe:</p>
<a href="https://sswebtechio.com" target="myframe">Open sswebtechio</a> |
<a href="https://quitexams.com" target="myframe">Open quitexams</a> |
<a href="https://www.sswebtechio.com/typing/typing.php" target="myframe">Typing Test Page</a>

<br><br>

<iframe name="myframe" width="700" height="350" title="My Iframe Window"></iframe>

<!-- Example 6: Iframe with Loading Lazy (faster) -->
<h3>Example 6: Lazy Loading Iframe</h3>
<iframe src="https://sswebtechio.com" width="700" height="350" loading="lazy" title="sswebtechio Lazy"></iframe>

<!-- Example 7: Iframe with sandbox (Security Example) -->
<h3>Example 7: Iframe with Sandbox</h3>
<iframe
  src="https://quitexams.com"
  width="700"
  height="350"
  sandbox
  title="quitexams Sandbox">
</iframe>

</body>
</html>
⬅ Previous Next ➡