What is the HTML Embed Tag and How to Use It
<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.
<!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>
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
srcattribute to specify the file URL andtypeto 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.