HTML Plug-ins
In this page:
<object data="file-url" type="mime/type" width="width" height="height"></object>
<embed src="file-url" type="mime/type">The Evolution of Plug-ins
In the early days of the web, browsers required third-party plug-ins to play media, run games, or display PDFs. Modern web standards have replaced these insecure plug-ins with native HTML5 tags, making pages load faster and run more securely.
Example: The Evolution of Plug-ins
<video src="movie.mp4" controls></video>Embedding Resources with object
The object tag is a versatile element used to embed external resources (like PDFs, interactive widgets, or other webpage documents) directly onto your webpage, complete with width, height, and type attributes.
- Always include fallback text inside your object tags to assist users on devices that cannot render the resource.
- Accepted attributes:
- data — URL of the resource
- type — MIME type
- width / height — pixels
- name — for targeting
- form — id of an associated form
Example: Embedding Resources with object
<object data="document.pdf" type="application/pdf" width="600" height="400">
Your browser cannot display this PDF.
</object>Simple Embeds with embed
The embed tag is another self-closing element used to integrate external resources or interactive tools. Unlike the object tag, it is simpler and does not wrap fallback content, relying entirely on attributes to load and size the resource.
- Use the embed tag for fast, simple integrations of external tools or widgets.
- Accepted attributes:
- src — URL of the resource
- type — MIME type
- width / height — pixels
Example: Simple Embeds with embed
<embed src="document.pdf" type="application/pdf" width="600" height="400">Security Risks of Plug-ins
Embedding external applications can be risky, as they can run unwanted scripts on your page. Modern browsers have replaced legacy plug-ins with secure APIs and native sandboxed elements to protect user security.
Example: Security Risks of Plug-ins
<object data="https://secure.example.com/widget" type="text/html"></object>Modern Standard Alternatives
Modern web standards have introduced native APIs and elements that can handle almost all tasks previously handled by plug-ins. Use video and audio for media playback, canvas for interactive graphics, and iframes for embedding external web pages.
Example: Modern Standard Alternatives
<video src="movie.mp4" controls></video>
<canvas id="graphics"></canvas>
<iframe src="https://example.com"></iframe>- Using legacy plug-ins like Flash Player, which are blocked by all modern web browsers.
- Embedding insecure HTTP resources on a secure HTTPS website, causing browsers to block the content.
- Forgetting to include fallback text inside your object tags to assist users on unsupported devices.
- HTML plug-ins extend browser features, allowing you to embed external applications directly onto your page.
- Use object and embed tags to integrate external resources like PDFs, widgets, or maps cleanly.
- Modern web standards have replaced legacy plug-ins with secure, native HTML5 tags to improve performance and security.
Standard object and embed elements are supported natively, but support for legacy plug-ins (like Flash) has been disabled by all modern browsers.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: