EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

Embed Tag in HTML

Home » Software Development » Software Development Tutorials » HTML Tutorial » Embed Tag in HTML

Embed Tag in HTML

Introduction to Embed Tag in HTML

The Embed Tag in HTML purpose is for displaying external resources or applications. This is used mostly in multimedia content like showing video files or audio files into our HTML application. This tag is also used for importing plug-ins like flash animators. This tag is introduced in HTML 5 version. It does have ending tag as like <p>, <html>, <body>, <a> etc.

Real-Time Example: We have seen so many websites contains media files within those websites. A normal tag is not supported to display media files. So we have used embed tag for all types of media files in HTML.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Note: This tag also used for including images and external html files.

How Does Embed Tag Work in Html?

HTML embed work based on 4 attributes. These attributes specify what embed has to do.

Syntax:

<embed Required attributes>

Required attributes: The <embed> tag allows attributes in any HTML document.

1. height: These attributes used to specify the height of the embedded content element. This value is in pixels.

Popular Course in this category
HTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (5,690 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)

Syntax:

<embed height="value in pixels">

2. width: These attributes used to specify the width of the embedded content element. This value is in pixels.

Syntax:

<embed width="value in pixels">

3. src: It is used to carry the web URL, means used to specify the web address of the embedded content.

Syntax:

<embed src="web URL">

4. type: This attribute is used to specify the type of media like video or audio.

Syntax:

<embed type="type of media">

Examples of Embed Tag in HTML

Here are the following examples mention below:

Example #1 – embed with image

Code:

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<head>
<!-- CSS Code -->
<style>
p {
color: red;
border: 2px solid green;
font-size: 22px;
}
h1 {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1>The embed tag introduction</h1>
<p>
The
<embed>
tag in HTML purpose is for displaying external resources or
applications. This is used mostly in multimedia content like showing
video files or audio files into out HTML application. This embed tag
is also used for importing plug-ins like flash animators. This embed
tag is introduced in HTML 5 version. It does have ending tag as like p
tag, <html>, <body>, <a> etc.
</p>
<p>Real Time Example: We have seen so many website contains media
files within that websites. Normal tag are not supported to display
media files. So we have used embed tag for all types of media files in
HTML.</p>
<h1>The embed tag Example</h1>
<embed src="d6.jpg" width="400" height="400">
</body>
</html>

Output:

embed tag in html output 1

Example #2 – Embed with other html resources

HTML Code: EmbedResource.html

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<body>
<!-- Embed content from other html file -->
<embed src="Resource.html" width="1000" height="200">
</body>
</html>

HTML Code: Resource.html

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<head>
<!-- CSS Code -->
<style>
p {
color: brown;
border: 2px ridge navy;
font-size: 22px;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>The embed tag introduction</h1>
<p>
The
<embed>
tag in HTML purpose is for displaying external resources or
applications. This is used mostly in multimedia content like showing
video files or audio files into out HTML application. This embed tag
is also used for importing plug-ins like flash animators. This embed
tag is introduced in HTML 5 version. It does have ending tag as like p
tag, <html>, <body>, <a> etc.
</p>
<p>Real Time Example: We have seen so many website contains media
files within that websites. Normal tag are not supported to display
media files. So we have used embed tag for all types of media files in
HTML.</p>
</body>
</html>

Output:

embed tag in html output 2

output 3

Example #3 – Embed with the video file

Code:

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<head>
<!-- CSS Code -->
<style>
p {
color: brown;
border: 2px ridge navy;
font-size: 22px;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>The embed tag introduction</h1>
<p>
The
<embed>
tag in HTML purpose is for displaying external resources or
applications. This is used mostly in multimedia content like showing
video files or audio files into out HTML application. This embed tag
is also used for importing plug-ins like flash animators. This embed
tag is introduced in HTML 5 version. It does have ending tag as like p
tag, <html>, <body>, <a> etc.
</p>
<p>Real Time Example: We have seen so many website contains media
files within that websites. Normal tag are not supported to display
media files. So we have used embed tag for all types of media files in
HTML.</p>
<!-- Embed content from other video file -->
<embed src="nationalgeography.mp4" width="400" height="300">
</body>
</html>

Output:

output 4

output 5

Conclusion

Embed in HTML is used for including video and audio files into our HTML application. This external embed resource can be resized as per our requirement by using height and width attributes.

Recommended Articles

This is a guide to Embed Tag in HTML. Here we discuss how does Embed Tag Work in HTML along with examples for better understanding. You may also look at the following articles to learn more –

  1. HTML Sonderzeichen
  2. Frame Tag in HTML
  3. HTML Geolocation
  4. Registration Form in HTML

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
HTML Tutorial
  • Tags
    • Types of Tags in HTML
    • Basic HTML Tags
    • HTML Format Tags
    • HTML object Tag
    • HTML Image Tags
    • HTML Table Tags
    • Meta Tag in HTML
    • Caption Tag in HTML
    • Aside Tag in HTML
    • Style Tag in HTML
    • Cite Tag in HTML
    • HTML Legend Tag
    • Quotation Tag in HTML
    • Datalist in HTML
    • map Tag in HTML
    • HTML Marquee Tag
    • Footer Tag in HTML
    • HTML nav Tag
    • HTML figure Tag
    • Option Tag in HTML
    • Inline Tags in HTML
    • Pre Tag in HTML
    • Span Tag in HTML
    • HTML samp Tag
    • SUP Tag in HTML
    • Div Tag in HTML
    • HTML tr Tag
    • HTML abbr Tag
    • HTML Address Tag
    • Small Tag in HTML
    • PHP Tag in HTML
    • Canvas Tag in HTML
    • Font Tag in HTML
    • Select Tag in HTML
    • HTML Picture Tag
    • Fieldset Tag in HTML
    • HTML Code Tag
    • kbd Tag in HTML
    • TextArea Tag in HTML
    • HTML Article Tag
    • HTML Button Tag
    • HTML time Tag
    • THead Tag in HTML
    • HTML frameset Tag
    • HTML checkbox Tag
    • Address Tag in HTML
    • Area Tag in HTML
    • HTML Strike Tag
    • HTML section Tag
    • HTML Umlaute
    • Frame Tag in HTML
    • tfoot in HTML
    • Embed Tag in HTML
    • href tag in HTML
    • Alt Tag in HTML
    • HTML Audio Tag
  • Basic
    • Introduction to HTML
    • What is HTML
    • HTML stands for
    • Advantages of HTML
    • Applications of HTML
    • Career In HTML
    • How HTML Works
    • Versions of Html
    • Symbols in HTML
    • HTML Commands
    • HTML Events
    • HTML Fonts Styles
    • HTML Form Controls
    • HTML Form Elements
    • HTML Frames
    • HTML Layout
    • HTML Entities
    • HTML List Styles
    • HTML Style Sheets
    • HTML Text Formatting Tags
    • What is XHTML?
    • HTML Section vs Div
    • DHTML
    • Cheat Sheet HTML
  • Attributes
    • HTML Attributes
    • HTML Event Attributes
    • HTML Style Attribute
    • HTML Text Attributes
    • HTML Block Elements
    • HTML Inline-Block
    • Block Level Elements in HTML
    • HTML Form Attribute
    • HTML Padding vs Margin
  • Color
    • HTML Colors 
    • RGB Color Model
    • Color Name in HTML
    • HTML Color Picker
    • Scrollbar Color
  • HTML5
    • What is HTML5
    • HTML5 Elements
    • Html5 New Elements
    • HTML5 Tags
    • HTML5 Semantics
    • HTML5 Web Workers
    • HTML5 Semantic Elements
  • Advance
    • Create Tables in HTML
    • Drag and Drop in HTML
    • Dropdown List in HTML
    • HTML Align Center
    • HTML Display Block
    • HTML Blocks
    • HTML Canvas
    • HTML SVG
    • HTML Text Editors
    • HTML Text Link
    • HTML Text Decoration
    • HTML URL Encoding
    • Iframes in HTML
    • HTML Tooltip
    • HTML Reset Button
    • HTML Hide Element
    • Image Link in HTML
    • Web Templates HTML
    • HTML Ordered List
    • HTML Unordered List
    • HTML Description List
    • HTML Form Validation
    • HTML Form Action
    • Registration Form in HTML
    • HTML Justify Text
    • Date in HTML
    • Vertical Table HTML
    • DOCTYPE HTML
    • Moving Text in HTML
    • Scrollbar in HTML Table
    • Responsive in HTML
    • HTML Inline-Style
    • HTML Progress Bar
    • HTML Colspan
    • HTML Favicon
    • HTML margin-left
    • Combobox in HTML
    • HTML Table Background
    • Table Without Border in HTML
    • Nested Table in HTML
    • Table Border in HTML
    • HTML onclick Button
    • HTML Image Padding
    • HTML Padding
    • HTML Border Style
    • HTML Float Left
    • File Path in HTML
    • HTML Geolocation
    • Linking Pages in HTML
    • Embed PHP in HTML
    • How to Add CSS in HTML?
    • Design Web Page in HTML
    • HTML Schriftart
    • Cursor in HTML
    • Scrollbar in HTML
    • HTML Sonderzeichen
    • HTML Search Bar
  • Interview Questions
    • HTML interview Questions
    • HTML5 Interview Questions And Answers

Related Courses

Online HTML Course

Bootstrap Training Course

XML Training Course

CSS Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - Online HTML Course Learn More