Reading time: 15 minutes | Coding time: 10 minutes
We come across many websites that have video, audio along with the text content. Those websites/ webapps attract more users and are easier to interact with. In this article at OpenGenus, we will learn how to embed videos, applications and other external content in HTML document. To embed external content in HTML, embed tag is used.
In short, it is as follows:
<embed src="content path" type="content type" title="text on hover">
The embed tag embeds interactive content or external application (plugin) in the specified part of HTML document. It basically provides an integration point for an external (typically non-HTML) application or interactive content. It is a self-closing tag means it must not have an end tag.
Here are some of the contents/applications which we can be embedded in HTML document using
<embed> tag :
- Flash animations
- Java Applets
- Pdf files
The element-specific attributes of
<embed> tag are as follows :
||It specifies the URL(address) of the resource.
||It specifies the type of embedded resource. If specified, the value must be a MIME type.
||It specifies the vertical dimension of embedded resource. Its value should be in pixels
||It specifies the horizontal dimension of embedded resource. Its value should be in pixels.
Understanding MIME type
A MIME type(Multipurpose Internet Mail Extensions) represents internet media. It is a standard that specifies format of document or media. Browsers use MIME type to determine how to process the URL. The value of type attribute of
<embed> tag is actually a MIME type. It describes the format of resource provided by src attribute of
The structure of MIME type consists of type and subtype. Both type and subtype are strings and when we combine them with '/' character we get a MIME type string.
The type represents general category of data and subtype represents exact format of data. Some examples of MIME types are image/png, video/webm, application/pdf.
Embedding image in HTML
We can embed images in HTML using
<embed> tag. Various supported types are png, jpeg, bmp, jxs, etc
Example Code :
<embed src="/content/images/2020/01/opengenus.png" type="image/png" title="OpenGenus image">
border:8px solid black;
Here we have embedded a png image from local directory.