Broad Network

HTML Embedded and Object Elements

HTML Embedded Content - Part 3

Foreword: In this part of the series, I present to you the meaning, coding and differences of the HTML embedded and object elements.

By: Chrysanthus Date Published: 18 Jan 2016


This is part 3 of my series, HTML Embedded Content. In this part of the series, I present to you the meaning, coding and differences of the HTML embedded and object elements. You should have read the previous parts of the series before coming here, as this is a continuation.

A plugin is a software component that adds a specific feature to an existing computer program. It enables customization and so the specific feature satisfies (more appropriate to) the individual rather than everybody.  For the browser as a program (application), a plugin might add a search engine, or a virus scanner or the ability to use a new file type such as a new video format. You might have heard of the Adobe Flash Player. It is an example of a browser plugin.

When HTML is the browser document, a plugin can be attached to the HTML embed element or HTML object element - see below. A plugin does not become a child object; it does not also become a node object (DOM).

The embed Element
Do not confuse between the embed element and the embedded content. The embed element is an HTML element, which would take a plugin. Embedded content is content embedded by the following elements: audio, canvas, embed, iframe, img, math, object, svg, and video. An embedded content is typically a resource or content of a language (e.g. C++) other than HTML, CSS or ECMAScript (JavaScript). DOM is not a language; it is an interface for HTML “derived” from ECMAScript and stands between ECMAScript and HTML.

The embed element can use a sub-program (plugin) to display a new video type file (resource). The embed element is a single tag element, as,

    <embed src="">

The embed element can actually have four attributes, whose names and brief meanings are (details below):

src - Address of the resource
type - Type of embedded resource
width - Horizontal dimension
height- Vertical dimension

src: This is the URL of the resource.
type: This is the MIME type of the resource. The exact type depends on the manufacturer. MIME type examples are: video/mp4, video/3gpp, video/ogg, and audio/ogg .

width: This is for the width in px of the embed element, into which the plugin applies.
height: This is for the height in px of the embed element, into which the plugin applies.

The plugin is not really the resource file. The plugin is a browser add-on that displays the resource file.

The object Element
The purpose of the object element is similar to that of the embed element. However, here the user’s (operating) system is responsible for running the embedded content. The complete code for an object element is seen as an application. The main code can be written in C++, Java or some other high level language. In many object elements today, a plugin is involved.

The object element is a double tag element as:

    <object data="" name="TheApp">

Attributes and their brief meanings for the object element are:

data - Address of the resource
type - Type of embedded resource
name - Name of nested browsing context
form - Associates the control with a form element
typemustmatch - Whether the type attribute and the Content-Type value need to match for the resource to be used
usemap - Name of image map to use
width - Horizontal dimension
height - Vertical dimension

data: this attribute holds the URL of the resource or executable file (the name of the attribute, data is not vary appropriate).

type: This is the MIME type of the resource.

name: This is the name you give for the object element and its application.

form: It is possible to have a Form control element in the object. This control can be related to a Form element, coded outside the object element, but still within the HTML document. In this case, the value of this attribute is the ID of the Form element.

I will talk about the other attributes later.

The param Element
This element does not operate independently. It operates inside the object element, within the two tags. A param element is a child of the object element. Consider the following ECMAScript (JavaScript) code:

    <script type="text/ECMAScript">

        In = 5;
        out = In + 2;
        internal = out;


Now, In/5 is a variable/value pair; out/internal is a variable/value pair. The param element considers a variable/value pair as a parameter, and calls the variable/value pair a name/value pair. Each param element has one name/value pair. You can have more than one param element in an object element.

A plugin is a sub-program. Each param element is either an input to a plugin or executable code, from the object element, or an output from the plugin or executable code, to the object element.

The param element has two attributes; one is name for variable, and the other is value for value. Each of these attributes takes a value. Both the name and value pair for a param element must be present.

An example (copied from the manual) of an object element coding is:

        <object type="application/x-java-applet">
            <param name="code" value="MyJavaClass">
            <p>You do not have Java available, or it is disabled.</p>
    <figcaption>My Java Clock</figcaption>

Before we leave this section, know that the content of the object element can be an HTML element, either by the data source or by direct typing of HTML code, between the two tags. The content can also content ordinary HTML elements and a plugin. Without any attributes, the object element is an inline element.

That is it for this part of the series. Let us take a break here and continue in the next part.


Related Links

Basics of HTML 5
Basics of ECMAScript
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course



Become the Writer's Fan
Send the Writer a Message