Alternatives of Iframe in HTML

1. Use the object Tag as an Alternative to Iframe in HTML
2. Use the embed Tag as an Alternative to Iframe in HTML

In HTML, we use the Iframes to specify an inline frame through which we can embed a webpage in a webpage. In this tutorial, we will introduce some other alternatives to Iframe to display web pages.

Use the object Tag as an Alternative to Iframe in HTML

We can use the object tag in HTML to embed external resources in the webpage. We can use the tag to display another webpage in our webpage. The object tag is an alternative to the iframe tag in HTML. We can use the tag to embed different multimedia components like image, video, audio, etc. The object tag has an attribute data where we can define the URL of the webpage to be embedded. We can even set the width and height of the container using the width and height attributes.

For example, write the object tag and set the URL https://theuselessweb.com/ in the data attribute. Then, set the width and height attributes of the object tag to 800. Next, set the type attribute to text/html. Finally, close the object tag.

When we load the following web page in the browser, we can see the embedded web page in a container. We can interact with the embedded web page. The type text/html indicates that the embedded content is HTML. In this way, we can use the object tag to embed a webpage in a webpage which is an alternative to the iframe tag in HTML. However, it is better to use the iframe tag instead of the object tag.

Example Code:

<object data="https://theuselessweb.com/"
width="800"
height="800"
type="text/html">
</object>

Use the embed Tag as an Alternative to Iframe in HTML

The embed tag is similar to the object tag, and it is used for the same purpose. We can embed various external resources in our web page using the embed tag. We can embed media like PDF, image, audio, video, and web pages. The tag defines a container in which we can embed our desired content. The embed tag is a self-closing tag. We can use the src attribute to specify the URL of the web page to be embedded. The tag has a type attribute to specify the type of content to be embedded. We can similarly define the height and width, same with the object tag.

For example, write the embed tag and set the type attribute to text/html. Next, write the src attribute and set it to https://theuselessweb.com/. Then, set the height and width of the container to 500 and 800.

The measurement of height and width is in pixels. In this way, we can use the embed tag as an alternative to the iframe tag in HTML. However, the iframe tag is recommended rather than the embed tag.

Example Code:

<embed type="text/html" src="https://theuselessweb.com/" width="800" height="500">