HTML Iframes

HTML Iframes


An HTML iframe is used to display a web page within a web page.


HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.


Iframe – Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example

Try it Yourself »

Or you can add the style attribute and use the CSS height and width properties:

Example

Try it Yourself »


Iframe – Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

Try it Yourself »

With CSS, you can also change the size, style and color of the iframe’s border:

Example

Try it Yourself »


Iframe – Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

Try it Yourself »


Chapter Summary

  • The HTML <iframe> tag specifies an inline frame
  • The src attribute defines the URL of the page to embed
  • Always include a title attribute (for screen readers)
  • The height and width attributes specifies the size of the iframe
  • Use border:none; to remove the border around the iframe

HTML Exercises

Test Yourself With Exercises

Exercise:

Create an iframe with a URL address that goes to https://www.w3schools.com.

 

Start the Exercise


HTML iframe Tag

Tag Description
<iframe> Defines an inline frame

For a complete list of all available HTML tags, visit our HTML Tag Reference.

ArmenianEnglish