Categories
Learn HTML

HTML: iframe tag

HTML: <iframe> tag

In this series of learning HTML, we will teach you how to use HTML iframe tag with proper syntax and lots of examples. Let’s start on the HTML iframe tag.

Description of HTML iframe tag

The HTML “iframe” tag stands for “inline frame” and is used to embed a separate HTML document or web page within another HTML document. The “iframe” tag allows you to display content from another source while still keeping the current web page intact.

Here is an example of how to use the “iframe” tag in HTML:

<iframe src="http://www.example.com"></iframe>

In the example above, the “src” attribute specifies the URL of the external web page that should be displayed within the “iframe” tag. The external web page will be displayed as a separate frame within the current web page.

The “iframe” tag can also include other attributes to customize the appearance and behavior of the embedded web page, such as width, height, scrolling, border, and more.

It’s important to note that the use of “iframe” tags can have security implications, as the content displayed within the iframe may be from an external and potentially untrusted source. Therefore, it is important to exercise caution when using “iframe” tags and ensure that any content being displayed within an iframe is trusted and secure.

Syntax of HTML iframe tag

The <iframe> tag in HTML is used to embed another HTML document within the current document. Here’s the basic syntax of the <iframe> tag:

<iframe src="URL" frameborder="0" width="width" height="height"></iframe>

The src attribute is used to specify the source URL of the document to be embedded. The frameborder attribute is used to specify whether or not the iframe should have a border around it, with a value of “0” for no border or “1” for a border. The width and height attributes are used to specify the dimensions of the iframe in pixels.

Here’s an example of using the <iframe> tag to embed another webpage:

<iframe src="https://www.example.com" frameborder="0" width="800" height="600"></iframe>

Note that the content within the iframe can be styled using CSS and can be accessed and manipulated using JavaScript. However, loading external content into an iframe can also pose security risks, such as cross-site scripting attacks, so it’s important to be cautious and ensure that the embedded content is trustworthy.

Global Attributes

The iframe tag in HTML is used to embed an HTML document within another HTML document. It has several global attributes that can be used to control its behavior and appearance, including:

  1. src: This attribute specifies the URL of the document to be embedded within the iframe.
  2. height: This attribute sets the height of the iframe. It can be specified in pixels, percentages, or other units.
  3. width: This attribute sets the width of the iframe. It can be specified in pixels, percentages, or other units.
  4. name: This attribute specifies a name for the iframe. It can be used to target the iframe from other elements or scripts.
  5. sandbox: This attribute is used to enable a sandbox mode for the iframe. This mode restricts the actions that can be performed within the iframe to prevent malicious code from executing.
  6. scrolling: This attribute controls whether scrollbars are displayed within the iframe. It can be set to yes, no, or auto.
  7. allowfullscreen: This attribute enables the iframe to be displayed in fullscreen mode.
  8. frameborder: This attribute controls whether a border is displayed around the iframe. It can be set to 0 to remove the border or 1 to display it.
  9. longdesc: This attribute provides a long description of the content within the iframe for users with disabilities who may not be able to view it.
  10. title: This attribute provides a title for the iframe, which can be used by screen readers and other assistive technologies to describe its purpose.

These global attributes can be used to customize the appearance and behavior of the iframe tag in HTML. By using them effectively, you can create embedded documents that are secure, accessible, and user-friendly.

Event Attributes

Event attributes on HTML elements allow you to add JavaScript code that is executed when a specific event occurs, such as when a user clicks a button or hovers over an element. The iframe tag in HTML also supports several event attributes, including:

  1. onload: This event occurs when the iframe has finished loading its contents. You can use this event to perform actions after the iframe has loaded, such as modifying its contents or resizing it.
  2. onunload: This event occurs when the iframe is about to be unloaded, such as when the user navigates away from the page. You can use this event to perform actions before the iframe is unloaded, such as saving any data entered into the iframe.
  3. onblur: This event occurs when the iframe loses focus, such as when the user clicks away from it. You can use this event to perform actions when the iframe is no longer the active element.
  4. onfocus: This event occurs when the iframe gains focus, such as when the user clicks on it. You can use this event to perform actions when the iframe becomes the active element.
  5. onresize: This event occurs when the size of the iframe changes, such as when the user resizes the browser window. You can use this event to perform actions when the size of the iframe changes, such as adjusting the layout of its contents.
  6. onscroll: This event occurs when the user scrolls within the iframe. You can use this event to perform actions when the user scrolls, such as updating the contents of the iframe.

These event attributes can be used to enhance the functionality and interactivity of the iframe tag in HTML. By adding JavaScript code to these attributes, you can create dynamic and responsive embedded documents that respond to user input and adapt to changes in their environment.

Other Attributes

In addition to global and event attributes, the iframe tag in HTML also supports several attributes that are specific to the iframe element. These attributes include:

  1. allow: This attribute specifies a list of features that are allowed to be used within the iframe, such as fullscreen mode or autoplay for videos.
  2. allowpaymentrequest: This attribute specifies whether the iframe can initiate a payment request through the Payment Request API.
  3. referrerpolicy: This attribute specifies how the browser should send the Referer header when fetching the content for the iframe.
  4. srcdoc: This attribute allows you to specify the content of the iframe directly within the HTML document, rather than linking to a separate file.
  5. seamless: This attribute specifies whether the iframe should appear as part of the parent document or as a separate document with its own styles and layout.
  6. loading: This attribute specifies when the iframe should start loading its content, such as when the page loads or when the user scrolls to it.
  7. importance: This attribute specifies the relative importance of the iframe‘s content for preloading and resource prioritization.
  8. aria-*: These attributes are used to add accessibility information to the iframe for users with disabilities. Examples include aria-label, aria-describedby, and aria-labelledby.

By using these attributes effectively, you can create more powerful and flexible iframe elements in your HTML documents. For example, you can control which features are allowed within the iframe, specify how the browser should handle Referer headers, and provide more detailed accessibility information for users with disabilities.

Notes on HTML iframe tag

The iframe tag in HTML is a powerful tool for embedding external content within a web page. However, there are several important notes to keep in mind when using the iframe tag:

  1. Security risks: Embedding content from external sources can pose security risks to your website, as it allows for potential cross-site scripting (XSS) attacks. It is important to use the sandbox attribute to restrict the behavior of the iframe and ensure that it cannot access or modify the parent page.
  2. Accessibility considerations: The iframe tag can create accessibility challenges for users with disabilities, such as screen reader users. It is important to use appropriate aria-* attributes to provide alternative text and descriptions for the iframe content.
  3. Performance implications: Embedding external content within an iframe can have performance implications, as it requires additional network requests to retrieve the content. It is important to optimize the iframe‘s loading behavior and use lazy loading techniques to improve page load times.
  4. Browser compatibility: The iframe tag is supported by most modern web browsers, but there may be compatibility issues with older browsers or mobile devices. It is important to test your iframe content across different browsers and devices to ensure that it displays correctly.
  5. Content ownership: It is important to ensure that you have the necessary permissions and ownership of the content that you are embedding within an iframe. Unauthorized use of copyrighted material can lead to legal issues and damage to your website’s reputation.

By keeping these important notes in mind, you can effectively and responsibly use the iframe tag to enhance your website’s functionality and user experience.

Browser Compatibility

The HTML iframe tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML iframe tag

We will discuss the <iframe> tag below, exploring examples of how to use the <iframe> tag in HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML iframe tag below, with some examples of how to use the iframe tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

HTML5 Document

Here’s an example of how to use the iframe tag in HTML5 to embed a YouTube video:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Here's a cool video I found:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

In this example, we have an HTML5 document with a title element and a body element containing a heading (h1) and a paragraph (p). We use the iframe tag to embed a YouTube video, with the following attributes:

  • width and height: These attributes set the width and height of the iframe element in pixels.
  • src: This attribute specifies the URL of the YouTube video that we want to embed. We use the embed URL format for YouTube videos, which is https://www.youtube.com/embed/VIDEO_ID.
  • frameborder: This attribute specifies whether or not to show a border around the iframe. In this case, we set it to 0 to remove the border.
  • allow: This attribute specifies a list of features that are allowed to be used within the iframe, such as accelerometer, autoplay, and encrypted media.
  • allowfullscreen: This attribute specifies whether or not the iframe can be put into fullscreen mode.

When you load this HTML document in a web browser, you should see the YouTube video embedded in the iframe element. You can click the play button to start the video, and use the controls to adjust the volume, skip ahead, and pause the video.

 

 

HTML 4.01 Transitional Document

If the browser does not support the <iframe> tag, it will display the text “Sorry, this browser does not support iframes.” instead.

Here’s an example of how to use the iframe tag in HTML 4.01 Transitional to embed a webpage:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Check out this cool website:</p>
<iframe width="100%" height="500" src="https://www.example.com" frameborder="0" scrolling="auto"></iframe>
</body>
</html>

In this example, we have an HTML 4.01 Transitional document with a title element and a body element containing a heading (h1) and a paragraph (p). We use the iframe tag to embed an external website, with the following attributes:

  • width and height: These attributes set the width and height of the iframe element in pixels. In this example, we use width="100%" to make the iframe fill the entire width of the webpage, and height="500" to set the height to 500 pixels.
  • src: This attribute specifies the URL of the website that we want to embed within the iframe.
  • frameborder: This attribute specifies whether or not to show a border around the iframe. In this case, we set it to 0 to remove the border.
  • scrolling: This attribute specifies whether or not to show scrollbars within the iframe. In this case, we set it to auto to allow the browser to decide whether or not to show scrollbars based on the size of the iframe content.

When you load this HTML document in a web browser, you should see the external website embedded in the iframe element. You can use the scrollbars to navigate the content within the iframe. Note that because this example is using HTML 4.01 Transitional, it does not support the sandbox attribute or other advanced features of the iframe tag available in HTML5.

XHTML 1.0 Transitional Document

Here’s an example of how to use the iframe tag in XHTML 1.0 Transitional to embed a webpage:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Check out this cool website:</p>
<iframe width="100%" height="500" src="https://www.example.com" frameborder="0" scrolling="auto"></iframe>
</body>
</html>

 

In this example, we have an XHTML 1.0 Transitional document with a title element and a body element containing a heading (h1) and a paragraph (p). We use the iframe tag to embed an external website, with the following attributes:

  • width and height: These attributes set the width and height of the iframe element in pixels. In this example, we use width="100%" to make the iframe fill the entire width of the webpage, and height="500" to set the height to 500 pixels.
  • src: This attribute specifies the URL of the website that we want to embed within the iframe.
  • frameborder: This attribute specifies whether or not to show a border around the iframe. In this case, we set it to 0 to remove the border.
  • scrolling: This attribute specifies whether or not to show scrollbars within the iframe. In this case, we set it to auto to allow the browser to decide whether or not to show scrollbars based on the size of the iframe content.

When you load this XHTML document in a web browser, you should see the external website embedded in the iframe element. You can use the scrollbars to navigate the content within the iframe. Note that because this example is using XHTML 1.0 Transitional, it does not support the sandbox attribute or other advanced features of the iframe tag available in HTML5.

 

 

XHTML 1.0 Strict Document

Here’s an example of how to use the html iframe tag in an XHTML 1.0 Strict Document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example of HTML iframe Tag in XHTML 1.0 Strict Document</title>
</head>
<body>
<h1>Example of HTML iframe Tag in XHTML 1.0 Strict Document</h1>

<p>Below is an example of using the iframe tag to embed a web page within another web page:</p>

<iframe src="https://www.example.com/" width="100%" height="500px">
<p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

 

In this example, we have an XHTML 1.0 Strict Document with a head section containing a title element and a body section containing an h1 element and a p element with some text explaining the example.

The iframe element is used to embed another web page within the current web page. In this case, we set the src attribute to “https://www.example.com/” to load the example website. We also set the width attribute to 100% to make the iframe fill the entire width of the parent element, and the height attribute to 500px to set the height of the iframe to 500 pixels.

Lastly, we include some fallback content inside the iframe element, which will be displayed if the user’s browser does not support iframes. In this case, we just include a simple p element with some text.

Overall, this example demonstrates how to use the html iframe tag in an XHTML 1.0 Strict Document to embed external web content within a web page.

 

XHTML 1.1 Document

Here’s an example of how to use the html iframe tag in an XHTML 1.1 Document:




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Example of HTML iframe Tag in XHTML 1.1 Document</title>
</head>
<body>
<h1>Example of HTML iframe Tag in XHTML 1.1 Document</h1>

<p>Below is an example of using the iframe tag to embed a web page within another web page:</p>

<iframe src="https://www.example.com/" width="100%" height="500px">
<p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

 

In this example, we have an XHTML 1.1 Document with a head section containing a title element and a body section containing an h1 element and a p element with some text explaining the example.

The iframe element is used to embed another web page within the current web page. In this case, we set the src attribute to “https://www.example.com/” to load the example website. We also set the width attribute to 100% to make the iframe fill the entire width of the parent element, and the height attribute to 500px to set the height of the iframe to 500 pixels.

Note that in an XHTML 1.1 Document, the Content-Type meta tag in the head section should specify “application/xhtml+xml” instead of “text/html” as in previous versions of HTML/XHTML. This tells the browser that the document is an XML document and should be processed accordingly.

Lastly, we include some fallback content inside the iframe element, which will be displayed if the user’s browser does not support iframes. In this case, we just include a simple p element with some text.

Overall, this example demonstrates how to use the html iframe tag in an XHTML 1.1 Document to embed external web content within a web page, and also illustrates the proper Content-Type meta tag for an XHTML 1.1 Document.