HTML5 iframe element

HTML5 iframe Element

HTML5 iframe element can be applied on a webpage using the following syntax:

<iframe src=”url” title=’your description’></iframe>

Using the following syntax, we can implement the <iframe> code in our HTML5 document.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 iframe element </title>
</head>
<body>
    <iframe src="https://www.vishacademy.com" title="Vish Academy is the best online learning platform">
    </iframe>
</body>
</html>

The output of this code will be

HTML5 iframe element

Definition and Use of HTML5 iframe Element

The HTML5 iframe element displays an inline frame. The inline frame is used to attach another document within an existing HTML5 document.

Furthermore, you can customize <iframe> using the CSS style attribute that we’ll discuss later.

It is the best development practice to include the title attribute inside the HTML5 <iframe> tag.

The screen readers will read the content inside the <iframe> tag to understand the content and <iframe>.

Browsers Support for the HTML5 iframe element

Following browsers support the HTML5 iframe Element.

Google Chrome
Microsoft Edge
Firefox
Safari
Opera

Global Attributes

HTML5 iframe element supports HTML5 global attributes.

Event Attributes

HTML5 iframe element has the by default support for Event attributes of HTML as well.

Setting the Width and Height of HTML5 <iframe> Tag

By assigning the values to width and height attributes of a <iframe> tag, we can customize the size of the frame. By default, the values assigned to the width and height attribute are in pixels.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 iframe Element </title>
</head>
<body>
    <iframe src="https://www.vishacademy.com" width="450px" height="400px"
        title="Vish Academy is the best online learning platform">
    </iframe>
</body>
</html>

The output of this code will be

HTML5 iframe Element

Also, you can customize the size of the frame using the CSS width and height properties.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 iframe Element </title>
</head>
<body>
    <iframe src="https://www.vishacademy.com" style="width:500px; height:500px;"
        title="Vish Academy is the best online learning platform">
    </iframe>
</body>
</html>

The output of this code will be

HTML5 iframe Element

Removing the Border of iframe Element

Be default, <iframe> element comes with border around it. To remove it, add the style attribute inside <iframe> element and assign value no-border to CSS border property.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 iframe Element </title>
</head>
<body>
    <iframe src="https://www.vishacademy.com" style="width:500px; height:400px; border: none;"
        title="Vish Academy is the best online learning platform">
    </iframe>
</body>
</html>

The output of this code will be

HTML5 iframe element

Similarly, using the style attribute, you can alter the iframe’s default border’s color, size, and style.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 iframe Element </title>
</head>
<body>
    <iframe src="https://www.vishacademy.com" style="width:500px; height:400px; border: 2px solid blue;"
        title="Vish Academy is the best online learning platform">
    </iframe>
</body>
</html>

The output of this code will be

HTML5 iframe Element

Targeting HTML5 <iframe> Tag in a Link

The <iframe> element can be targeted in a link. The target attribute of the link must match with the name attribute of the iframe.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 iframe Element </title>
</head>
<body>
    <iframe src="https://google.com" name="iframe_1" style="width:400px; height:500px; border: 2px solid blue;"
        title="Vish Academy is the best online learning platform">
    </iframe>
    <p> <a href="https://www.vishacademy.com" target="iframe_1"> Vish Academy</a> </p>
    <p>When both the target attribute of link tag and name attribute of iframe match with each other,
        the specified link will open in the iframe.
    </p>
</body>
</html>

The output of this code will be

HTML5 iframe Element

Key Takeaways

The <iframe> displays an inline frame
The src attribute specifies the URL of the page that has to be embedded.
Do not forget to include the title attribute in your <iframe> tag because it is necessary for users using screen readers.
We can customize the size of an inline frame by using the width and height attributes.
We can alter the iframe default border’s size, color, and appearance using the style attribute.

Next Lesson » « Previous Lesson