How to Use the HTML iframe Tag with Examples

This Blog You Will Learn

ஃ what is the <iframe> tag?

ஃ Why Use the <iframe> Tag ?

ஃ Important <iframe> Attributes

ஃ Syntax of HTML <iframe> tag

ஃ structure diagram examples

ஃ Explain Program

ஃ Output

what is the <iframe> tag?

✅ HTML <iframe> tag used to embed another webpage

✅ <iframe> tag external content inside a webpage.

✅ <iframe> tag stands for lnline frame.

✅ use embed an external document or webpage within the current HTML document.

✅ HTML <iframe> tag use to display another webpage or external content inside a webpage.

✅ <iframe> tag use display content such as maps,videos,documents websites.

Why Use the <iframe> Tag ?

✔ Display external websites.

✔ Embed YouTube videos.

✔ Show Google Maps.

✔ Load third-party content.

Advantages of <iframe> tag

Easy to embed external content.
keep users on your page.
Save development time.

Important <iframe> Attributes

1) src (source)

  <iframe src=
"https://webdesigningtheory.blogspot.com"> 
</iframe>

specifies URL of webpage or content to be embedded inside the <iframe> tag.

2) width

Defines the width of the <iframe> tag

  <iframe src="index.html" width="500"></iframe>

3) height

Defines the height of the iframe

  <iframe src=
"https://webdesigningtheory.blogspot.com" 
height ="400"></iframe>

4) title

text description of the iframe for screen readers.

  <iframe src=
"https://webdesigningtheory.blogspot.com"
  title="web designing theory blog"></iframe>

5) allowfullscreen

Allows embedded content (like videos) fullscreen

  <iframe src=
"https://webdesigningtheory.blogspot.com" 
allowfullscreen></iframe>

6) loading

controls how the iframe is loaded.

  <iframe src=
"https://webdesigningtheory.blogspot.com" 
loading="lazy"></iframe>

values:-

lazy - loads only when needed

eager - loads immediately

7) sandbox ( security attribute)

adds security restrictions to the frame content.

  <iframe src=
"https://webdesigningtheory.blogspot.com" 
  sandbox="allow-scripts allow-forms">
</iframe>

8) referrerpolicy

controls what referrer information is sent

  <iframe src=
"https://webdesigningtheory.blogspot.com" 
  referrerpolicy="no-referrer">
</iframe>

improves privacy and security

9) allow

  <iframe src=
"https://webdesigningtheory.blogspot.com"
 allow="autoplay;></iframe>

controls access to browser features (camera microphone etc)

Syntax of HTML <iframe> tag

  <iframe src="URL">
   .
   .
   .     </iframe>

<iframe> tag in HTML use to embed another webpage or external content inside webpage.
HTML <iframe> tag inline frame tag.
HTML <iframe> tag allows display separate html page small window on your current page.
HTML <iframe> tag embed example :- YouTube videos, Ads, webpages, Twitter, TikTok video, Pinterest Pin ,Facebook

ஃ structure diagram examples

Important Points <iframe> Tag

<iframe> use embed another webpage or content
<iframe> commonly use youtube videos, ads,maps
Avoid many iframes (website slow )
helps display external content easily

How to Use the HTML iframe Tag with Examples

Example

<!DOCTYPE html>
<html>
  <head>      
     <title> HTML iframe tag</title>

      </head>
 
    <body>
    <h1> webdesigningtheory.blogspot.com</h1>
 
       <h2>  learn HTML iframe Tag</h2>
        <iframe src=
"https://webdesigningtheory.blogspot.com"
        title=
"Web designing theory free online blogspot 
web Tutorial">
      </iframe>
        
    </body>
    </html>

How to Use the HTML iframe Tag with Examples

Explain Program

Step 1]

<!DOCTYPE html>

This declare the document type.
browser that the document is written in html

Step 2 ]

html is the root element of the html page.
Every thing inside it is part of the webpage.

Step 3]

     
      <head>
      
     <title> HTML iframe tag </title>

      </head>

<head> section
head section contains metadata about page. not visible on the page itself.
<title> tag title section set the title of the page shows the browser tab.

Step 4]

<body>

< body> tag contains all the content visible to webpage.
<body> tag contains all the visible content of the page.
inside <body> show the browser screen.

Step 5]

   <h1> webdesigningtheory.blogspot.com</h1>

    <h2> learn HTML iframe tag</h2>

<h1> tag heading tag use for main title on webpage .
<h2> tag subheading of page.

Step 6]

  
    <iframe src="https://webdesigningtheory.blogspot.com"
      title="Web designing theory free online blogspot web Tutorial ">
   </iframe>
        

<iframe>.....</iframe>
The iframe tag is use to embed another webpage inside webpage.
title :- provides text description of iframe content.
helps seo browser understanding.

Step 7]

closing the Tag

 
</body>

 </html>

Header Ads

How to Use the HTML iframe Tag with Examples