Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a container for an external (non-HTML) application in HTML5
To add a container for an external application in HTML5, we use the <embed> tag. It defines a container for an external resource like web pages, media players, pictures, or plug-in applications. The embed element is a self-closing tag that provides a generic way to include external content when more specific HTML5 elements are not suitable.
Syntax
Following is the basic syntax for the embed tag in HTML −
<embed src="URL" type="media_type" width="pixels" height="pixels">
The <embed> tag is self-closing and does not require a closing tag. It supports global and event attributes in HTML5.
Attributes
The <embed> tag supports the following specific attributes −
-
src − Specifies the URL of the external file to be embedded. This is a required attribute.
-
type − Defines the MIME type of the embedded content, which helps the browser determine how to handle the resource.
-
width − Sets the width of the embedded content in pixels.
-
height − Sets the height of the embedded content in pixels.
Individual attribute syntax examples −
<embed src="URL"> <embed type="media_type"> <embed width="pixels"> <embed height="pixels">
Default CSS Styling
Most browsers apply default CSS settings to the <embed> element −
embed:focus {
outline: none;
}
Embedding Images
Following example demonstrates how to embed an image using the <embed> tag −
<!DOCTYPE html> <html> <head> <title>Embed Image Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Embedded Image</h2> <embed src="https://www.tutorialspoint.com/images/logo.png" type="image/png" width="300" height="100"> </body> </html>
The output displays the TutorialsPoint logo embedded in the page −
Embedded Image [TutorialsPoint Logo - 300x100 pixels]
Embedding Video Content
Following example shows how to embed a video file −
<!DOCTYPE html> <html> <head> <title>Embed Video Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Sample Video Embedded</h2> <embed type="video/mp4" src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="400" height="300"> </body> </html>
The output shows an embedded video player with the specified dimensions −
Sample Video Embedded [Video Player - 400x300 pixels with BigBuckBunny video]
Embedding HTML Documents
Following example demonstrates how to embed another HTML document −
<!DOCTYPE html> <html> <head> <title>Embed HTML Document</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Embedded HTML Page</h2> <embed type="text/html" src="https://www.tutorialspoint.com/index.htm" width="500" height="300"> </body> </html>
The output displays the external HTML page within the specified container dimensions −
Embedded HTML Page [Container showing the TutorialsPoint homepage - 500x300 pixels]
Common MIME Types
Following table shows commonly used MIME types with the <embed> tag −
| Content Type | MIME Type | Example |
|---|---|---|
| HTML Document | text/html | Embedding web pages |
| Image (PNG) | image/png | Embedding PNG images |
| Image (JPEG) | image/jpeg | Embedding JPEG images |
| Video (MP4) | video/mp4 | Embedding MP4 videos |
| Audio (MP3) | audio/mpeg | Embedding MP3 audio |
| PDF Document | application/pdf | Embedding PDF files |
Browser Compatibility
The <embed> tag is supported by all major modern browsers including Google Chrome, Internet Explorer, Firefox, Safari, and Opera. However, the actual rendering depends on the browser's ability to handle the specified MIME type and whether appropriate plugins are available.
Best Practices
While the <embed> tag provides a generic way to include external content, HTML5 offers more specific and semantic alternatives −
-
Use
<img>tag for displaying images instead of<embed>. -
Use
<video>and<audio>tags for multimedia content. -
Use
<iframe>tag for embedding HTML documents. -
Reserve
<embed>for plugin-based content or when specific HTML5 elements are not suitable.
These alternative elements provide better accessibility, semantic meaning, and cross-browser compatibility compared to the generic <embed> tag.
Conclusion
The <embed> tag provides a generic container for external resources in HTML5. While it supports various content types through MIME type specification, modern web development favors using specific HTML5 elements like <img>, <video>, <audio>, and <iframe> for better semantics and accessibility. Use <embed> primarily for plugin-based content or when other elements are insufficient.
431 Views
