- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - Iframes
An iframe is an inline frame that allows us to embed another document within the current HTML document. In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular region at specified place within the HTML document in which the browser can display an external document such as a map or another web page.
URL or path of the external document is attached using the src attribute of <iframe> tag. If the content of iframe exceeds the specified rectangular region, HTML automatically includes the scrollbars. HTML allows any number of iframes, but, it may affect the performance of the website.
Example
Following is the example to show how to use the <iframe> in HTML −
<!DOCTYPE html> <html> <head> <title>HTML Iframes</title> </head> <body> <p>It is an example of HTML Iframe</p> <iframe src="/html/menu.htm"> Sorry your browser does not support inline frames. </iframe> </body> </html>
On executing, the above HTML code will generate an iframe having three links.
The <Iframe> Tag Attributes
The following table describe the attributes used with the <iframe> tag.
S.No. | Attribute & Description |
---|---|
1 | src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file available in html directory. |
2 | name This attribute allows to give a name to a specific frame. It is used to indicate which frame a document should be loaded into. This is important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link. |
3 | height This attribute specifies the height of <iframe>. By default it is 150 pixels. |
4 | width This attribute specifies the width of <iframe>. By default it is 300 pixels. |
5 | allow It is used to specify the permission policies to access features like microphone and camera. |
6 | loading It specifies the time to load a given iframe. |
Setting Height and Width of Iframes
To set height and width (dimension) of an HTML Iframe, we use the height and width attribute of <iframe> tag.
Example
The following example demonstrates how to set the dimension of an HTML Iframe.
<!DOCTYPE html> <html> <head> <title>HTML Iframes</title> </head> <body> <p>Setting Height and width of HTML Iframe </p> <iframe src="/html/html_iframes.htm" width="500" height="300"> Sorry your browser does not support inline frames. </iframe> </body> </html>
This HTML code will generate an Iframe with the defined dimension.
Iframe for a Hyperlink
To create a target Iframe for a hyperlink, we use the name attribute of <iframe> tag. The value of this attribute is used in the target attribute of elements like <form> and <a> to specify the target frame.
Example
The following example shows how to make a target iframe for a hyperlink.
<!DOCTYPE html> <html> <head> <title>HTML Iframes</title> </head> <body> <p>Click on the link below to load the content inside the specified frame...</p> <p><a href="/html/html_iframes.htm" target="Iframe">Iframe Tutorial</a></p> <iframe style="background-color: skyblue;" name="Iframe" width="500" height="300"> Sorry your browser does not support inline frames. </iframe> </body> </html>
On execution, the above code will generate a link and an Iframe with a sky-blue background. When the link is clicked, its content will open inside the Iframe.
To Continue Learning Please Login
Login with Google