embed Tag in HTML
FREE
Overview
Before getting started with the embed tag in HTML, let us get a short overview of what are embed tags in HTML.
Basically, the <embed> tag is a tag in HTML ( to learn about what is a tag in HTML, refer tag in HTML ), which is a block element, that is, it uses the full width of the page and starts a new line. The <embed> tag is used for embedding external resources which are generally multimedia contents like video, audio, a web page link, or a picture, into our HTML document. It can also be used as a container for embedding plug-in applications like flash animations. This is a new tag in HTML 5, and it does not require any closing tag, and it only has a starting tag (<embed>).
The above gif, contains a website in which a gif is embeded with the help of the embed <embed> tag.
Note : Most of the modern browsers have removed and deprecated support for browser plug-ins, so completely depending upon the embed <embed> tag is generally not wise if you want your site to be working on the average user's browser.
We have got a brief overview of what is the embed tag in HTML. Now let us see the syntax of the embed tag in HTML.
Syntax
Below given is the syntax for the main tag in HTML.
Explanation :
Each HTML tag begins with a pair of opening angular brackets (<>). Between these brackets follows the name of the tag, here which is the "" tag. The closing tag is not required in the case of the embed tag in HTML.
Inside the opening tags, we can mention different attributes which are supported in the embed tag in HTML. Let us discuss those attributes which are supported in the embed tag in HTML.
Attributes
There are basically four attributes, which are supported by the embed tag in HTML. Let us discuss them in detail.
| Attribute | Defination | Format |
|---|---|---|
| height Attribute | Basically the height attribute is used for specifying the height of the embedded content. The value of this attribute is stored in pixel format. | pixel(px) |
| src Attribute | Basically the src attribute is used for specifying the web address of the embedded content. It is used to store the URL. | URL |
| width Attribute | Basically the width attribute is used for specifying the width of the embedded content. The value of this attribute is stored in pixel format. | pixel(px) |
| type Attribute | Basically the type attribute is used for specifying the media type of the embedded content. It is used to store the media_type content. | media_type |
How to Use <Embed> Tag in HTML?
While using the > tag in HTML we can consider the below points --
- The embed tag is used for embedding external resources which are generally multimedia contents like video, audio, gif, a web page link, or a picture, into our HTML document. Let's look at an example of how with the help of an embed tag we can add gifs to the website.
- Each HTML tag begins with a pair of opening angular brackets (<>). Between these brackets follows the name of the tag, here which is the "" tag. The closing tag is not required in the case of the embed tag in HTML.
- To adjust the embedded object positioning within the element's frame, we can use the object-position property in our embed tag.
- To control how the object's size is adjusted to fit within the element's frame, we can use the object-fit property in our embed tag.
<Embed> Tag Examples
After having a brief discussion on the embed tag, let us look at some examples to clearly understand the usage of the embed tag in HTML.
Basic Example of HTML Main Tag
Code:
Output :
Explanation :
In the above example, we are using the embed tag in HTML. It consists of an src attribute, in which we have stored an image link. With the help of the embed tag, the image will be visible in the HTML document. We can see the embed tag is only having the opening tag (<embed>).
Using Width and Height Property with the embed Tag
Let us now see an example of how we can use the width and height property with the <embed> tag in HTML.
Code :
Output :
Explanation :
In the above example, we are using the embed tag in HTML. It consists of an src attribute, in which we have stored an image link. With the help of the embed tag, the image will be visible in the HTML document. This time we have also given a specific width and height attribute inside the embed tag, which will help in specifying the width and height of the image embedded inside the embed tag. We can see the embed tag is only having the opening tag (<embed>).
An Embedded Video
Let us now see an example of how we can embed a video inside our <embed> tag in HTML.
Code :
Output :
Explanation :
In the above example, we are using the embed tag in HTML. It consists of an src attribute, in which we have stored a video link. With the help of the embed tag, the video will be visible in the HTML document. We have also given a specific width and height attribute inside the embed tag, which will help in specifying the width and height of the video embedded inside the embed tag. We can see the embed tag is only having the opening tag (<embed>).
Embedding PDF
Let us now see an example of how we can embed a PDF file inside our <embed> tag in HTML.
Code :
Output :
Explanation :
In the above example, we are using the embed tag in HTML. It consists of an src attribute, in which we have stored a PDF file link. With the help of the embed tag, the PDF file will be visible in the HTML document. We have also given a specific width and height attribute inside the embed tag, which will help in specifying the width and height of the video embedded inside the embed tag. We can see the embed tag is only having the opening tag (<embed>).
Embedding Another HTML Page
Let us now see an example of how we can embed another HTML page inside our <embed> tag in HTML.
Main.html
Code :
another.html
Code :
Output :
Explanation :
In the above example, we have two HTML pages : main.html and another.html. Inside our main.html page there is an embed tag, which consists of an src attribute which is storing the source URL of the another.html page. With this, the content inside the another.html page is displayed inside the main.html document.
<embed> Tag vs <iframe> Tag
Let us now discuss the difference between a embed tag and iframe tag in java.
| <embed> Tag | <iframe> Tag |
|---|---|
| embed is an element of Applets | iframe is an element of <frame> tag |
| embedding external resources which are generally multimedia contents like video, audio, a web page link, or a picture, into our HTML document. | iframe is primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well. |
| The <embed> element creates an embedded panel in which a third-party application, such as a Flash-based object, can run. | The <iframe> creates an inline frame, which embeds an independent HTML document into the current document. |
| The embed tag is displayed as a block. | The frame tag is displayed as a block. |
| The embed tag is Used to embed the content for browser plugins. Exceptions to this are SVG and HTML which are handled differently according to the standard. For embedded HTML there is no way to get at the embedded document from the parent. | The iframe tag is primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well. The <iframe>'s strength is that the embedded code is 'live' and can communicate with the parent document. |
| The embed tag has only a start tag, it does not have any end tag. | The iframe tag does have both a start and end tag. |
| The syntax of embed tag is <EMBED SRC="FileName"> | The syntax of iframe tag is <IFRAME SRC="FileName"></IFRAME> |
Accessibility Concerns
On an embed element, we can use the title attribute, by which the content inside the embed tag is labeled and the people who are navigating with assistive technology such as screen readers can understand the embedded content inside the embed tag. If there is no title, then people might get confused and may not be able to determine the content of the embed tag. This context shift can be confusing and time-consuming in case of embed element contains interactive content like video or audio.
Browser Support
Most browsers support the embed tag in HTML. Below given is the list of some popular browsers that support the embed tag in HTML --
Desktop Browsers
- Chrome
- Edge
- Firefox
- Opera
- Safari
- Internet Explorer
Android Browsers
- WebView Android
- Chrome Android
- Firefox for Android
- Opera Android
- Safari on iOS
- Samsung Internet
Conclusion
We learned about the embed tag <embed> in HTML in this article. Let us recap the points we discussed throughout the article:
- The embed tag <embed> in HTML is a block element, which is used for embedding external resources which are generally multimedia contents like video, audio, a web page link, or a picture, into our HTML document.
- The embed tag <embed> in HTML have only a starting tag (<embed>) but does not have any ending or closing tag.
- There are basically four attributes, which are supported by the embed tag in HTML they are : height, src, width, and type attribute.
- The height attribute is used for specifying the height of the embedded content.
- The src attribute is used for specifying the web address of the embedded content.
- The width attribute is used for specifying the width of the embedded content.
- The type attribute is used for specifying the media type of the embedded content.
- To adjust the embedded object positioning within the element's frame, we can use the object-position property in our embed tag.
- To control how the object's size is adjusted to fit within the element's frame, we can use the object-fit property in our embed tag.
- We have seen some examples like how we can add images, videos, PDF files, or another HTML page with the embed tag in our HTML document. to make it more clearly understandable.
- We have seen the difference between the embed (<embed>) and iframe (<iframe>) tag.
- An iframe (inline frame) is used to embed another document within the current HTML document.
- We have seen how using the title attribute in our embed tag makes its content more accessible to the users.
Related Tags
I suggest you to go through the below tags to enhance your learning of the HTML tags.