0
0
HtmlConceptBeginner · 3 min read

What is the HTML Embed Tag and How to Use It

The <embed> tag in HTML is used to insert external content like videos, PDFs, or other media directly into a webpage. It acts like a window showing that content inside your page without needing extra plugins.
⚙️

How It Works

The <embed> tag works like a frame or a window on your webpage that shows content from another file or source. Imagine you have a picture frame on your wall; the frame itself doesn’t create the picture but holds and shows it. Similarly, the <embed> tag holds and displays content like videos, PDFs, or other media files inside your webpage.

When the browser sees the <embed> tag, it loads the external file specified by the src attribute and displays it right where the tag is placed. This lets users interact with that content without leaving your page or needing to download the file separately.

đź’»

Example

This example shows how to embed a PDF file inside a webpage using the <embed> tag.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed Tag Example</title>
</head>
<body>
  <h2>Embedded PDF Document</h2>
  <embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf" width="600" height="400" />
</body>
</html>
Output
A webpage with a heading 'Embedded PDF Document' and below it a visible PDF viewer showing the dummy PDF file inside a 600x400 area.
🎯

When to Use

Use the <embed> tag when you want to show external media or documents directly inside your webpage without forcing users to download or open them separately. It is great for embedding PDFs, videos, audio files, or interactive content like Flash (though Flash is now outdated).

For example, if you want visitors to read a PDF brochure, watch a video, or listen to audio without leaving your site, <embed> is a simple and effective choice.

âś…

Key Points

  • The <embed> tag inserts external content like PDFs or videos into a webpage.
  • It requires the src attribute to specify the file URL and type to define the content type.
  • It creates a rectangular area where the content is displayed inside the page.
  • It is self-closing and does not have a closing tag.
  • Use it to keep users on your page while showing rich media content.
âś…

Key Takeaways

The tag displays external media like PDFs or videos inside your webpage.
Always include the src attribute to point to the content you want to embed.
Set the type attribute to tell the browser what kind of content it is.
It creates a visible area on the page where users can interact with the embedded content.
Use to keep users engaged without making them leave your site.