HTML Iframe

An inline frame (iframe) is a HTML element that loads another HTML page within the document.

It essentially puts another webpage within the parent page.

They are commonly used for advertisements, embedded videos, web analytics and interactive content.

What are HTML iframes?

An iframe is an HTML document embedded inside another HTML document.

The <iframe> tag specifies the URL of the embedded content, allowing for seamless integration of external resources. This section will guide you through the syntax and attributes of the <iframe> tag, providing a solid foundation for your iframe usage.

Syntax:
<iframe src="URL" title="description"></iframe>

Attributes Value

It contains a single value URL that specifies the URL of the document that is embedded in the iframe.

There are two types of URL links which are listed below:

URL	Descriptions
Absolute URL	It points to another webpage.
Relative URL	It points to other files of the same web page.

Supported Attributes

Attributes	Description
allow	Specifies a set of extra restrictions on the content that can be loaded in an <iframe>.
allowfullscreen	Indicates whether the <iframe> can be displayed in fullscreen mode.
allowpaymentrequest	Enables payment requests for content inside the <iframe>.
height	Sets the height of the <iframe> element.
width	Sets the width of the <iframe> element.
loading	Specifies how the content of the <iframe> should be loaded.
scrolling	Controls whether or not the <iframe> should have scrollbars.
name	Specifies the name of the <iframe> for targeting its content or for referencing it in JavaScript.
referrerpolicy	Sets the referrer policy for the <iframe> content.
sandbox	Specifies an extra set of restrictions for the content in the <iframe>.
src	Specifies the URL of the document to embed in the <iframe>.
srcdoc	Specifies the HTML content of the page to display in the <iframe>.

Here are the key points about the HTML <iframe> element:

1. Embedding External Content:

• <iframe> allows you to embed external websites, documents, or media (like videos) within your webpage.

2. src Attribute:

• The id attribute can be used in URLs to create fragment links (i.e., deep links) to specific sections of a webpage

3. Customizable Dimensions:

• You can set the width and height using attributes like width and height.

4. Cross-Domain Limitations:

• Content from another domain (e.g., different website) may have restrictions due to browser security policies (like Same-Origin Policy).

5. Security with sandbox:

• The sandbox attribute can restrict what the embedded content can do (e.g., disable scripts, forms, or pop-ups).

6. Responsive Design:

• Iframes can be styled using CSS to be responsive or maintain aspect ratios.

7. No Content Fallback:

• If the browser doesn't support iframes, you can provide alternative content between the opening and closing iframe tags.

8. allow Attribute:

• Controls permissions for embedded content (e.g., access to fullscreen, camera, microphone).

9. SEO Considerations:

• Content inside iframes is not indexed as part of your webpage by search engines, which may impact SEO.

10. allowfullscreen:

• Grants fullscreen capability to the embedded content, often used for videos.