- <!--...-->
- <!DOCTYPE> Declaration
- <a>
- <abbr>
- <acronym>
- <address>
- <applet>
- <area>
- <article>
- <aside>
- <audio>
- <b>
- <base>
- <basefont>
- <bdi>
- <bdo>
- <big>
- <blockquote>
- <body>
- <br>
- <button>
- <canvas>
- <caption>
- <center>
- <cite>
- <code>
- <col>
- <colgroup>
- <data>
- <datalist>
- <dd>
- <del>
- <details>
- <dfn>
- <dialog>
- <dir>
- <div>
- <dl>
- <dt>
- <em>
- <embed>
- <fieldset>
- <figcaption>
- <figure>
- <font>
- <footer>
- <form>
- <frame>
- <frameset>
- <h1> to <h6> s
- <head>
- <header>
- <hgroup>
- <hr>
- <html>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <label>
- <legend>
- <li>
- <link>
- <main>
- <map>
- <mark>
- <menu>
- <meta>
- <meter>
- <nav>
- <noframes>
- <noscript>
- <object>
- <ol>
- <optgroup>
- <option>
- <output>
- <p>
- <param>
- <picture>
- <pre>
- <progress>
- <q>
- <rp>
- <rt>
- <ruby>
- <s>
- <samp>
- <script>
- <search>
- <section>
- <select>
- <small>
- <source>
- <span>
- <strike>
- <strong>
- <style>
- <sub>
- <summary>
- <sup>
- <svg>
- <table>
- <tbody>
- <td>
- <template>
- <textarea>
- <tfoot>
- <th>
- <thead>
- <time>
- <title>
- <tr>
- <track>
- <tt>
- <u>
- <ul>
- <var>
- <video>
- <wbr>
HTML <iframe> Tag
Example
An inline frame is marked up as follows:
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
More "Try it Yourself" examples below.
Definition and Usage
The <iframe>
tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Tip: Use CSS to style the <iframe>
(see example below).
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.
Browser Support
Element | |||||
---|---|---|---|---|---|
<iframe> | Yes | Yes | Yes | Yes | Yes |
Attributes
Attribute | Value | Description |
---|---|---|
allow | Specifies a feature policy for the <iframe> | |
allowfullscreen | true false | Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method |
allowpaymentrequest | true false | Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API |
height | pixels | Specifies the height of an <iframe>. Default height is 150 pixels |
loading | eager lazy | Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met |
name | text | Specifies the name of an <iframe> |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Specifies which referrer information to send when fetching the iframe |
sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Enables an extra set of restrictions for the content in an <iframe> |
src | URL | Specifies the address of the document to embed in the <iframe> |
srcdoc | HTML_code | Specifies the HTML content of the page to show in the <iframe> |
width | pixels | Specifies the width of an <iframe>. Default width is 300 pixels |
Global Attributes
The <iframe>
tag also supports the Global Attributes in HTML.
Event Attributes
The <iframe>
tag also supports the Event Attributes in HTML.
More Examples
Example
Add and remove iframe borders (with CSS):
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>
Related Pages
HTML tutorial: HTML Iframes
HTML DOM reference: IFrame Object
Default CSS Settings
Most browsers will display the <iframe>
element with the following default values:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
outline: none;
}
iframe[seamless] {
display: block;
}