Code has been added to clipboard!

HTML Objects and Plugins: What's the Difference and How to Choose?

Reading time 3 min
Published Mar 27, 2019
Updated Sep 30, 2019

TL;DR – HTML objects and plugins are media elements that can be embedded in a webpage from an external source to provide additional functionalities.

Why Add Multimedia?

While HTML tags and elements provide you with a variety of possibilities, there are some things they won't help you create. Stuff like audio, video, or applets has to be embedded for an external source.

HTML objects and plugins can also be called HTML multimedia. This term represents all mediums of communication. Embedded objects help to create impressive designs, add dynamicity and provide additional functionalities. All of these options help you improve the user experience. You can embed media to HTML using a file or a web address.

Embed HTML Objects and Plugins Using the Right Tags

The HTML <object> element specifies an embedded object in the document. It can be used to embed multimedia files or another web page in HTML:

Example
<object width="400" height="300" data="example.ex">

The <embed> tag can also be used for specifying embedded objects in web documents, mostly HTML plugins and external applications:

Example
<embed width="400" height="300" src="example.ex">

Note: the <embed> element won't work in HTML4 and older versions.

Images belong to multimedia as well, as they have to be added from external sources. To embed an image, HTML <img> tags are the easiest option:

Example
<img src="image.png" alt="Space Doggo" width="50" height="50">

To add video or audio, you can simply use <audio> and <video> tags:

Example
<audio controls>
<source src="bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3" type="audio/mpeg"">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>
Example
<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

Note: using the HTML <video> tags means you don't need to embed Flash in HTML, as the native HTML5 element has a much better browser support.

HTML Audio and Video Formats

To add audio and video to your website, you need to be aware of what formats you may choose. See the list of the available formats in the tables below.

Audio Formats

Format Media type
PCM audio/wav
MP3 audio/mpeg
AAC audio/mp4, audio/aac, audio/aacp
Vorbis audio/ogg, audio/webm
Opus audio/ogg, audio/webm
FLAC audio/flac, audio/ogg

Video Formats

Format Media type
Theora video/ogg
H.264 video/mp4
HEVC video/mp4
VP8 video/webm
VP9 video/webm
AV1 video/webm

HTML Object and Plugins: Useful Tips

  • Don't embed SWF files in HTML, as Shockwave Flash has been discontinued. Currently, the native HTML5 tags are supported much better.
  • Always make sure viewing your HTML plugin doesn't require special software. For example, a lot of Java applets are no longer displayed because most browsers stopped supporting the NPAPI (Netscape Plugin Application Programming Interface) plugin.
Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>