HTML objects

What if there was a way for you to embed anything onto a webpage? Not just audio or video, but other webpages as well? What if you can take it a step further and actually embed external documents (like PDF files) onto your webpages?

NOTE: The elements on this webpage (audio, video, documents) may take a few minutes to load. Please be patient. Apologies in advance for any browser crashes (sorry!).

NOTE: You might need to download and install some plug-ins for some of the objects to be displayed.

This tutorial focuses on:

The <object> tag
Embedding another page
Embedding audio
Embedding video
Embedding images

The <object> tag

The <object> tag is a rather useful, but underappreciated tag in HTML. With the <object> tag you can embed several things onto a webpage including another webpage, an external document, audio, video, and images.

Attributes of the <object> tag

type - Denotes the MIME type of the object that will be embedded. MIME stands for Multimedia Internet Mail Extensions. A MIME type is used to specify a special code for the type of information that a file will contain. For example, an audio file in a WAVE format will use "audio/x-wav" for the MIME type, and an HTML document will use "text/html" for the MIME type.
data - Denotes the location of the object to embed
name - Specifies a name for the embedded object
width - Specifies the width for the object
height - Specifies the height for the object

Example:

Output:

In the above example, we embed another webpage using the <object> tag. It is the 'vertical frames' page from our HTML frames tutorial.

Alternative content

What happens if a user is using an older browser that does not support the <object> tag or the object does not get loaded for some reason such as it cannot be found? You can specify alternative content to display in this situation.

Example:

The above example is just like the first with one major difference -- we use the <a> tag to specify alternative content to display in case the object does not load.

If the object doesn't load, the user will see this:

See a frameset

You can even specify that if an object does not load, a different object should load.

Example:

In the above example we are saying that if the first object does not load, load the object specified within it.

Parameters

There is another tag used together with the <object> tag, and that is the <param> tag. The <param> tag is used to set the settings for an embedded object. Settings like if it should start playing automatically (for an audio object), or if their should be a control panel (for video objects).

You will have to use the <object> tag together with the <param> tag and understand how they work together to create specific settings for certain objects.

Attributes of the <param> tag

name - A setting for the object that is known by the object itself (such as "autoStart" for audio files).
value - The detail about a setting for an object that you specify with the name attribute. For example, if the name attribute has the value "autoStart", you can give this attribute the value "0"

NOTE: The <param> tag does not have a closing tag.

Example:

Output:

Embedding another page

To embed another page into a webpage, use the "text/html" MIME type.

Example:

<html> <head> <title>Embedding a webpage</title> </head> <body> This is a webpage with an embedded webpage. <object data="/html-tutorials/verticalframes.php" type="text/html" name="frame" width="480" height"240"> <a href="/html/verticalframes.php">See a frameset</a> </object> Isn't that cool? </body> </html>

Output:

This is a webpage with an embedded wepage.

Isn't that cool?

Embedding audio

You can embed audio files to play in your webpages using several different audio formats such as WAV, MP3, and MIDI. The MIME type to use depends on the format. For WAV use "audio/x-wav", for MP3 use "audio/mpeg", for MIDI use "audio/rtp-midi".

Example:

Output:

To learn more about using audio on webpages, read our HTML audio tutorial.

Embedding video

You can embed video files to play in your webpages using several different video formats such as MPEG, WMV, and Flash. The MIME type to use depends on the format. For MPEG use "video/mpeg", for WMV use "video/x-ms-wmv", for Flash use "application/x-shockwave-flash".

Example:

Output:

To learn more about using video on webpages, read our HTML video page.

Embedding images

You can embed images into your webpages using the "image/jpeg" MIME type for jpeg images (extension .jpg or .jpeg), or the "image/gif" MIME type for gif images (extension .gif).

Using the <object> tag for images is not really necessary since the <img> tag works just fine for images, but you can still use it.

Example:

Output:

They say that an apple a day keeps the doctor away!