logo Learn HTML
  • Home
  • Tutorials
  • Practice
  • Quiz
  • Projects
  • About
  • Contact

HTML Course

  • HTML HOME
  • HTML Introduction
  • HTML Basic
  • HTML Element
  • HTML Attributes
  • HTML Headings
  • HTML Paragrapha
  • HTML Style
  • HTML Formattin
  • HTML Quotations
  • HTML Colors
  • HTML Css
  • HTML Links
  • HTML Image
  • HTML Favicon
  • Page Tittle
  • HTML Tables
  • HTML Lists
  • Block & Inline
  • HTML Div
  • HTML Classes
  • HTML Id
  • HTML Buttons
  • HTML Iframes
  • HTML File Paths
  • HTML Head
  • HTML Layout
  • HTML Symbols
  • HTML Emojis
  • HTML URL Encode
  • HTML VS XHTML
  • HTML FROM
  • HTML Form
  • Form Attributes
  • Form Elements
  • HTML Input Types
  • HTML Input Attributes
  • Input Form Attributes
  • HTML Graphics
  • HTML Canvas
  • HTML SVG
  • HTML Media
  • HTML Media
  • HTML Video
  • HTML Audio
  • HTML Plug-ins
  • HTML Youtube
  • HTML APIS
  • HTML Web APIS
  • HTML Geolocation
  • HTML Drag & Drop
  • Web Storage
  • Web Workers
  • HTML SSE
  • HTML Examples
  • HTML Examples
  • HTML Editor
  • HTML Quiz
  • HTML Exercises
  • HTML References
  • HTML Tag List
  • HTML Attributes
  • HTML Global Attributes
  • HTML Brower Support
  • HTML Events
  • HTML Colors
  • HTML Canvas
  • HTML Audio & Video
  • HTML Doctypes
  • HTML Character Sets
  • HTML URL Encode
  • Language Codes
  • HTTP Messages
  • HTTP Methods
  • PX to EM Converter
  • keyboard Shortcuts

HTML Iframes


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



HTML <iframe> Element

The HTML <iframe> element is used to display another webpage inside the current webpage.

An iframe creates an inline frame that loads external content such as another HTML page, a website, a video, or other resources within your page layout.


Basic Syntax


Example

<iframe src="URL" title="Description"> </iframe>

Explanation:
  • src → Specifies the URL of the page you want to display.

  • title → Provides a description of the iframe content (important for accessibility).

It is strongly recommended to always include the title attribute. Screen readers use it to describe the iframe content to users.


Setting Height and Width

You can control the size of an iframe using either HTML attributes or CSS.

Method 1: Using HTML Attributes

<iframe src="page.html" height="200" width="300" title="Example Iframe"> </iframe>


By default, height and width values are measured in pixels.


Method 2: Using CSS

< iframe src="page.html" style="height:200px; width:300px;" title="Example Iframe" > </iframe>


Using CSS gives you more flexibility for styling and responsiveness.


Removing the Border

By default, most browsers display a border around an iframe.

To remove it, use CSS:

< iframe src="page.html" style="border:none;" title="Example Iframe" > </iframe>


Using an Iframe as a Link Target

An iframe can display content when a link is clicked.

First, give the iframe a name attribute:

< iframe src="page.html" name="myFrame" title="Example Iframe" > </iframe>


Then, set the links target attribute to match that name:


< a href="https://LeranHTML.edu" target="myFrame" > Open Website </a>


When the link is clicked, the webpage will open inside the iframe instead of replacing the current page.

Summary

  • <iframe> is used to embed another webpage inside your page.

  • The src attribute defines the URL of the embedded content.

  • Always include the title attribute for accessibility.

  • Use height and width to control size.

  • Use border:none; to remove the default border.

  • The name attribute allows the iframe to act as a target for links.


Try It Your Self

Sign Up For New
Update

HTML Basic
  1. HTML Basic
  2. HTML Element
  3. HTML Attributes
  4. HTML Headings
  5. HTML Paragrapha
  6. HTML Tables
  7. HTML Lists
HTML Advance
  1. HTML Div
  2. HTML Classes
  3. HTML Id
  4. HTML Buttons
  5. HTML Iframes
  6. HTML Symbols
  7. HTML Emojis