HTML <iframe> Tag

The <iframe> tag is used to render another HTML page or resource inside a framed region. These tags are commonly used for embedding HTML pages or PDF documents.

HTML Tag

Example

#

An <iframe> embedding a Wikipedia page.
Rendering is slightly delayed because the page is loaded from a remote server.

<iframe src="https://en.wikipedia.org" 
        style="width:100%;height:350px;"></iframe>
iframe = inline frame

Using <iframe>

The <iframe> tag embeds another HTML page in the current web page.

By default, <iframe> displays as a rectangular region that serves as the embedded content container.

Framed pages cannot be controlled when the page comes from a different domain.

The opposite is also true, i.e. the framed page cannot control the outer parent page.

Another commonly embedded resource includes PDF documents.

More Examples

An <iframe> with a styled frame and a greater height.

<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
        style="width:100%;height:600px;border:4px solid lightblue;"></iframe>

Attributes for <iframe>

This table lists the <iframe> tag attributes.

Attribute Value Description
height value Frame height in pixels
width value Frame width in pixels
src URL URL or path of the page to be embedded
id    identifier Defines a unique identifier for the iframe.
class    classnames Sets one or more CSS classes to be applied to the iframe.
style    CSS-styles Sets the style for the iframe.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the iframe is hidden.
title    text Sets a title that is used by screen-readers and displays as a tooltip.
tabindex    index Sets a tab sequence relative to the other elements.
srcdoc HTML-code HTML content of the page to be shown inside the frame.
Use either src or srcdoc, but not both.
name text Frame name
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
no value
A space separated set of frame restrictions.
If sandbox has no value all restrictions apply.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on the iframe tag in HTML5.

Attribute Description Alternative
align Aligns the content of the iframe. CSS text-align
frameborder Draws a border around the iframe. CSS border
longdesc URL of a detailed description of the iframe content. n/a
marginheight Space between iframe content and top and bottom borders. CSS padding
marginwidth Space between iframe content and left and right borders. CSS padding
scrolling Specifies when scrollbar should appear on iframe. CSS overflow

Did you know?

Did you know?

Viewing PDF documents with <iframe>

The <iframe> element can display PDF documents without third-party libraries.

The PDF document is fully interactive with features like download, paginate, print, zoom, and others.

An <iframe> with an embedded PDF file.

<iframe src="/media/contract.pdf" type="application/pdf"
        style="width:100%;height:500px;"></iframe>

Tip: The <embed> and <object> tags also embed PDF files.


Media Tags

The <iframe> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, these tags allow you to create powerful multi-media solutions.

Here is a list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support

Here is when <iframe> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides