What is the difference between embed, object, and iframe tags?

You may have come across some HTML tags namely embed object and iframe, and wondered where they are used and how they are different. On the surface, all of these tags seem to do the same thing, but there are a few key differences. When you’re using these tags in your projects, it’s important to know the difference between them to make a better decision on which one should be used in what scenario. In this article, we will look at what these tags are, their attributes, and the key differences between them.

Introduction

All of the HTML tags mentioned embed, object, and iframe are basically used to embed something in an HTML page. For various reasons, it can be an advantage to embed an element in a page. These days it is especially video that is embedded, and to some degree pdf documents, but those are not the only uses.

Frames, a previous iteration of the modern iframe tag, were extremely popular in the late 1990s since they opened up new design options. Due to Frames the tag being deleted in HTML 5, frames are only used on a small number of outdated websites nowadays. We still frequently utilize embedding, and there are three tags for it: object, embed, and iframe. They essentially perform the same functions, but you should be aware that the tags differ slightly in a few small ways, which may make one of them preferable to utilize when coding. iframe is currently the most common tag overall, whereas embed is allegedly being deprecated.

One important thing to note here is that, while all these tags embed object and iframe can handle video, it is generally a better decision to use the <video> tag if you are planning to embed videos in your HTML page.

Difference between embed, object, and iframe

The

The <iframe> tag is the most commonly used tag for embedding another page or document within an HTML page.

We can create a simple iframe by using the following syntax,

<iframe
   src="https://example.org"
   title="Codedamn iframe example"
   width="500px"
   height="200px">
</iframe>
Code language: HTML, XML (xml)

And it will look something like this on an actual HTML Page,

Notice how the iframe also has a vertical scrollbar by default. You may also notice we are using some attributes like src, title, width, height. Only the src attribute is required to make the iframe work and you should put the path to the file or page you’re trying to embed in it. There are so many attributes that be added to customize the iframe to your liking, some of the important ones are mentioned below.

If you choose, you may write something or include photographs within the <iframe> opening and closing tags. That will only be displayed underneath the content that the “src” property is linking to.

Attribute	Values	Description
src	URL	provides the iframe’s embedded file address.
height	pixels	specifies the iframe’s width in pixels. The effect can be achieved with style, which is in any case advised.
width	pixels	specifies the iframe’s width in pixels. The effect can also be achieved with style.
title	string	specifies a title for the iframe.
allowfullscreen	boolean	Specifies if the iframe can invoke fullscreen mode by invoking the requestFullscreen() method.
name	string	Specifies a targetable name for the embedded browsing context. The target attribute of the <a>, <form>, or <base> elements may use this.
loading	lazy/eager	Specifies how the browser should load the iframe.

The tag

The <embed> tag is basically like the <iframe> tag but with fewer attributes. The component inserts external content into the document at the designated location. This content comes from an external program or another source.

We can use the <embed> tag as follows,

<embed type="video/webm"
       src="/sample/BigBuckBunny.mp4"
       width="500px"
       height="300px">
Code language: HTML, XML (xml)

It will look something like this on an HTML page,

Notice there are closing tags, and unlike iframe, we have to specify a “type” attribute for it to work.

The attributes that are available to be used on this tag are as follows,

Attribute	Values	Description
src	URL	provides the embed’s embedded file address.
height	pixels	specifies the element’s width in pixels. The effect can be achieved with style, which is in any case advised. This cannot be a percentage; it must be an absolute value.
width	pixels	specifies the element’s width in pixels. The effect can also be achieved with style. This cannot be a percentage; it must be an absolute value.
type	string	specifies a type of content to be embedded.

The tag

In comparison to <iframe> and <embed>, the <object> tag is a little older and is still functional in HTML 4.01. The proper syntax for implementing it is as follows:

<object type="video/webm"
        data="/sample/BigBuckBunny.mp4"
        width="500px"
        height="300px">
</object>
Code language: HTML, XML (xml)

And like the previous example, it will look like this on an HTML page,

Notice there are closing tags here like in an iframe but we also have to specify a “type” attribute. Also keep in mind that we are using the “data” attribute here rather than “src”, which is the attribute typically used for file/path. If you choose, you may write something or include photographs within the <object> opening and closing tags. That will only be displayed underneath the content that the “data” property is linking to.

Here are some of the important attributes that come with the <object> tag,

Attribute	Values	Description
data	URL	provides the object’s embedded file address.
height	pixels	specifies the element’s width in pixels. The effect can be achieved with style, which is in any case advised. This cannot be a percentage; it must be an absolute value.
width	pixels	specifies the element’s width in pixels. The effect can also be achieved with style. This cannot be a percentage; it must be an absolute value.
type	string	specifies a type of content to be embedded.
name	string	The name of the control (HTML4), or the name of the embedded browsing context (HTML5).
border	pixels	Specifies the width of a border around the object’s control, in px.

Conclusion

Being able to embed external content, embed object and iframe or files in your web pages can be extremely useful. In this article, we looked at what are embed, iframe, and object tags, how they are used, as well as the differences between them, and some important attributes associated with them. I hope this article has helped you solidify your understanding of these tags and you’ll be able to which of these tags you should be using in your project. Now it is time for you to apply what you have learned and use these tags appropriately in your code!

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!