HTML Iframes

Used to embed another HTML document or web page within the current document.
They provide a way to display content from another source on your webpage without having to navigate away from the main page.
This is commonly used to include external content such as videos, maps, advertisements, or other web pages within your site.
To use an iframe, you need to specify the URL of the content you want to embed and optionally provide attributes for customization. Syntax: <iframe src="https://www.example.com/" ></iframe>

Example

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Iframe Example</title>
    </head>
    <body>
        <iframe src="URL" width="width" height="height" frameborder="border" scrolling="scrolling"></iframe>
    </body>
</html>

Run

HTML Iframes Attributes

Here are the attributes used in iframe element.

Table Attribute

Description

Example

src

Specifies the URL of the content to be embedded within the iframe

Run

width

Sets the width of the iframe

Run

height

Sets the height of the iframe

Run

frameborder

Specifies whether to display a border around the iframe

Run

scrolling

Determines whether scrollbars are shown within the iframe when the content overflows

Run

sandbox

A security attribute that restricts the capabilities of the iframe's content, providing an extra layer of protection

Run

allow

Specifies a set of permissions for the content inside the iframe

Run

name

Assigns a name to the iframe, which can be used as the target of links or form submissions

Run

title

Provides a title for the iframe, which is displayed as a tooltip when the user hovers over it

Run

loading

Specifies how the iframe content should be loaded

Run

referrerpolicy

Controls the HTTP referer header value when navigating to the content of the iframe

Run

allowfullscreen

When present, allows the content within the iframe to enter fullscreen mode

Run

Border in inframe

You can remove the border for an iframe using style attribute with "border:none"
or by setting the framebrder attrbute value to 0

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Border Iframe Example</title>
    </head>
    <body>
        <iframe src="https://online-tools.bmreducation.com/" frameborder="0"></iframe>
        <iframe src="https://online-tools.bmreducation.com/" style="border: none;"></iframe>
        <iframe src="https://online-tools.bmreducation.com/" style="border: 2px solid black;"></iframe>
    </body>
</html>

Run

Quick Recap - Topics Covered

HTML Iframes

Iframe Attributes

Borders in Iframe

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

HTML Iframes

Example

HTML Iframes Attributes

Border in inframe

Example

Quick Recap - Topics Covered

Practice With Examples in Compilers

Example js

Quiz