bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/HTML/HTML Foundations
HTML•HTML Foundations

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

<iframe src="
url
" title="
description
"></iframe>

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

Formatted code
<iframe src="demo_iframe.htm" height="200" width="300"
  title="Iframe Example"></iframe>

Live preview

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

Example

Formatted code
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
  title="Iframe Example"></iframe>

Live preview

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

Formatted code
<iframe src="demo_iframe.htm" style="border:none;"
  title="Iframe Example"></iframe>

Live preview

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

Example

Formatted code
<iframe src="demo_iframe.htm" style="border:2px solid red;"
  title="Iframe Example"></iframe>

Live preview

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

Formatted code
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
 Example"></iframe>

<p><a href="https://example.com target="iframe_a">ExampleSite.com</a></p>

Live preview

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 specify the size of the iframe
  • Use border:none; to remove the border around the iframe

HTML iframe Tag

TagDescription
<iframe>Defines an inline frame

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

Previous

HTML Buttons

Next

HTML JavaScript

This chapter

Overview
56

Lessons

191m

Read time

1. HTML Tutorial2. HTML Introduction3. HTML Editors4. HTML Elements5. HTML Attributes6. HTML Headings7. HTML Paragraphs8. HTML Styles9. HTML Text Formatting10. HTML Comments11. HTML Colors12. HTML RGB and RGBA Colors13. HTML HEX Colors14. HTML HSL and HSLA Colors15. HTML Styles - CSS16. HTML Links17. HTML Links - Different Colors18. HTML Links - Create Bookmarks19. HTML Images20. HTML Image Maps21. HTML Background Images22. HTML <picture> Element23. HTML Favicon24. HTML Page Title25. HTML Tables26. HTML Table Borders27. HTML Table Sizes28. HTML Table Headers29. HTML Table Padding & Spacing30. HTML Table Colspan & Rowspan31. HTML Table Styling32. HTML Table Colgroup33. HTML Lists34. HTML Unordered Lists35. HTML Ordered Lists36. HTML Other Lists37. HTML Block and Inline Elements38. HTML Div Element39. HTML class Attribute40. HTML id Attribute41. HTML Buttons42. HTML Iframes43. HTML JavaScript44. HTML File Paths45. HTML - The Head Element46. HTML Layout Elements and Techniques47. HTML Responsive Web Design48. HTML Computer Code Elements49. HTML Semantic Elements50. HTML Style Guide51. HTML Entities52. HTML Symbols53. Using Emojis in HTML54. HTML Encoding (Character Sets)55. HTML Uniform Resource Locators56. HTML Versus XHTML

On this page

HTML Iframe SyntaxIframe - Set Height and WidthIframe - Remove the BorderIframe - Target for a LinkChapter SummaryHTML iframe Tag