HTML Plug-ins: object and embed Elements

HTML plug-ins were add-ons like Flash that browsers once needed for video and games. Learn why they are gone, how the object and embed elements show PDFs, SVG and other pages, and why iframe is usually better.

What were browser plug-ins?

A plug-in was an extra program you installed into your browser so it could show content that HTML alone could not. It was like buying an adapter so your phone charger fits a foreign wall socket. Famous plug-ins were:

• Adobe Flash, for animations, games and video.
• Java applets, small programs that ran inside a page.
• Microsoft Silverlight, for video streaming.
• QuickTime and RealPlayer, for audio and video.

To include plug-in content in a page, developers used the <object> and <embed> elements, often with <param> elements for settings.

Why Flash and Java applets are gone

Plug-ins caused big problems:

• Security: plug-ins were a favourite way for attackers to infect computers.
• Speed and battery: they used a lot of memory and power, which was terrible on laptops and phones.
• Phones: the iPhone never supported Flash, and Android dropped it.
• Accessibility and search: screen readers and search engines could rarely read what was inside.

Meanwhile, HTML itself grew up. <video> and <audio> play media, <canvas>, SVG, CSS animations and JavaScript handle games and animations, and WebAssembly runs fast programs. So browsers removed plug-in support: Flash reached its official end of life on 31 December 2020, and no modern browser runs Flash, Java applets or Silverlight anymore.

Old plug-in	Modern replacement
Flash video	<video> and <audio>
Flash animation and games	<canvas>, SVG, CSS animations, JavaScript
Java applets	JavaScript and WebAssembly
Silverlight streaming	<video> with streaming formats

Common mistake: Copying old tutorial code with <object>, <param> and a .swf file, or classid and codebase attributes. A .swf (Flash) file will not play anywhere today. Replace it with a video, an image or modern HTML.

The object element

<object> still exists and still works, but today it is used for things the browser can show by itself, such as PDFs, images, SVG files and other HTML pages. Its main attributes are:

• data: the URL of the file.
• type: the file's type, like application/pdf or image/svg+xml.
• width and height: the size of the box.

Its best feature is fallback content: anything you put between <object> and </object> is shown only if the file cannot be displayed.

A PDF embed example

<h2>Our autumn menu</h2>
<object data="files/autumn-menu.pdf" type="application/pdf" width="100%" height="600">
  <p>Your browser cannot show the menu here. <a href="files/autumn-menu.pdf">Download the autumn menu (PDF, 240 KB)</a>.</p>
</object>

On most desktop browsers you see the PDF inside the page, with the browser's own PDF toolbar for zooming and printing. On browsers or phones that can't show PDFs inline, the visitor sees the paragraph and a download link instead. Mobile browsers often show the fallback or only the first page, so the download link is important.

Showing an SVG with object

<object data="images/floor-plan.svg" type="image/svg+xml" width="600" height="400">
  <img src="images/floor-plan.png" alt="Floor plan of the cafe showing the counter, 12 tables and the garden door" width="600" height="400">
</object>

The SVG floor plan is shown inside the page, and links or animations inside the SVG keep working. If the SVG cannot load, the PNG image with its alt text appears instead. For a simple SVG picture, a normal <img src="floor-plan.svg"> is usually easier; <object> is useful when the SVG has its own interactive parts.

The embed element

<embed> is a simpler, empty element: it has no closing tag and therefore no fallback content. It takes src, type, width and height.

<embed src="files/price-list.pdf" type="application/pdf" width="100%" height="500">
<p><a href="files/price-list.pdf">Open the price list (PDF)</a></p>

The PDF shows in a 500-pixel-high box on browsers that support it. Because <embed> has no fallback, the link below it is the only help for people whose browser can't display it, so always add one.

	<object>	<embed>	<iframe>
Closing tag	Yes	No (empty element)	Yes
Fallback content	Yes, between the tags	No	No
Main URL attribute	data	src	src
Security sandbox	No	No	Yes, with sandbox
Good for today	PDFs and SVG with fallback	Rarely the best choice	Other web pages, maps, videos

Why iframe is the modern choice

For embedding another web page, a YouTube video or a map, use <iframe>, which you learned in the previous lesson. It is the most widely supported, it has the sandbox and allow attributes for security, it supports loading="lazy", and it has a title attribute for screen readers. <object> can show an HTML page too, but it has none of these security tools.

<iframe src="files/autumn-menu.pdf" title="Autumn menu PDF" width="100%" height="600" loading="lazy"></iframe>
<p><a href="files/autumn-menu.pdf" download>Download the autumn menu (PDF)</a></p>

Modern desktop browsers show the PDF in the frame using their built-in viewer. The download link with the download attribute lets everyone, including mobile users, save the file.

Tip: Often the friendliest choice for a PDF is simply a clear link, like "Download the menu (PDF, 240 KB)". Embedded PDFs are hard to read on phones and can be hard for screen reader users. Embed only when seeing the document in the page really helps. See MDN: From object to iframe for more.

Practice exercise

Create a "Documents" page for a sports club. Embed the club rules PDF with <object> and a fallback paragraph with a download link. Show a training map SVG with <object> and a PNG <img> fallback with good alt text. Finally, embed the club's online calendar page with an <iframe> that has a title and loading="lazy".

Hint: <object> uses data, not src. Test the fallback by changing the file name to one that doesn't exist.

Key takeaways

• Plug-ins like Flash, Java applets and Silverlight are gone; no modern browser runs them.
• HTML now has native replacements: <video>, <audio>, <canvas>, SVG and JavaScript.
• <object> shows PDFs, SVG and other files with fallback content between its tags.
• <embed> is an empty element with no fallback, so always add a link too.
• For other web pages, videos and maps, <iframe> is the modern, secure choice.