Alternative to iFrames in HTML5

Unlike iframe before it was a non standard tag, which is standardized in HTML 5. Which admittedly was implemented by all major browsers. The embed element provides an integration purpose for an external (typically non-HTML) application or interactive content. The HTML tag is used for embedding an external application or interactive content into an HTML document.

The basic tag is written like this with the URL of the embedded resource added to the src attribute (i.e. between the double quotes).
The type attribute accepts the MIME type of the embedded resource.

Adjusting Height and Width

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
  
        <p>Using "embed" as an alternative to iframes</p>
        <embed src="https://ide.geeksforgeeks.org"
               width="400" 
               height="400" />
    </center>
</body>
  
</html>

chevron_right


Output: Using The Height and Width With Embed

Using Embed Without Borders.
By default, embed don’t have a border around it. But we can also remove the border by using the style attribute and use the CSS border property.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <p>Using "embed" as an alternative to iframes</p>
        <embed src="https://ide.geeksforgeeks.org/" 
               width="400" 
               height="400"
               style="border:none;" />
    </center>
</body>
  
</html>

chevron_right


Output: using embed without any borders

In embed tag we can also apply borders with different colors.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <p>Using embedas an alternative to iframes</p>
        <embed src="https://ide.geeksforgeeks.org" 
               style="border:4px solid orange;" />
    </center>
</body>
  
</html>

chevron_right


Output: Using Embed With Borders Of Colour Solid Orange

Supported Browsers: The browsers supported by Embed are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.