HTML: <object> tag

This HTML tutorial explains how to use the HTML element called the <object> tag with syntax and examples.

Description

The HTML <object> tag is used to as a container to embed an external resource in an HTML document such as audio, video, flash, PDFs, external applications or browser plug-ins. Due to compatibility issues, the <object> tag is more commonly used to embed resources than the <embed> tag. This tag is also commonly referred to as the <object> element.

Syntax

In HTML, the syntax for the <object> tag is:

<body>
<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
</object>
</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <object> tag:

Attribute	Description	HTML Compatibility
archive	List of URIs (space separated) for this object's archived resources	HTML 4.01, Obsolete in HTML5
border	Width of border in pixels	Deprecated in HTML 4.01, Obsolete in HTML5
classid	URL of the implementation of the object	HTML 4.01, Obsolete in HTML5
codebase	The base path for the object. It is used to resolve the relative URIs for the classid, data and archive attributes. If no codebase attribute is provided, the base URI of the document is used to resolve the relative URIs.	HTML 4.01, Obsolete in HTML5
codetype	The base path for the object. It is used to resolve the relative URIs for the classid, data and archive attributes. If no codebase attribute is provided, the base URI of the document is used to resolve the relative URIs.	HTML 4.01, Obsolete in HTML5
data	Valid URI for the resource used by the object	HTML 4.01, HTML5
declare	Boolean value indicating that the object should only be declared. As a result, a subsequent <object> tag must be repeated to instantiate the object once the object is needed.	HTML 4.01, Obsolete in HTML5
form	The ID of a <form> tag in the HTML document that owns this object	HTML5
height	Height to display the resource in pixels	HTML 4.01, HTML5
name	Name of the object	HTML 4.01, HTML5
standby	Message displayed while loading the object	HTML 4.01, Obsolete in HTML5
type	MIME type of the resource as defined by the data attribute	HTML 4.01, HTML5
typemustmatch	Boolean value indicating whether the type attribute and the resource's content type must match before the resource can be used	HTML5
usemap	Name of an image map to be used with the object. It is the name of a <map> element preceded by "#", for example `usemap="#chemistry"`	HTML 4.01, HTML5
width	Width to display the resource in pixels	HTML 4.01, HTML5

Note

The HTML <object> element is found within the <body> tag.
The <object> tag is more commonly used to embed external resources than the <embed> tag since the <object> tag is compatible with HTML5, HTML 4.01 and XHMTL.

Browser Compatibility

The <object> tag has basic support with the following browsers:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Example

We will discuss the <object> tag below, exploring examples of how to use the <object> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

If you created a new web page in HTML5, your <object> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
</object>
</body>

</html>

In this HTML5 Document example, we have created an <object> tag that embeds the resource called movie.swf with a MIME type of x-shockwave-flash. We have also set a width of 400 pixels and a height of 300 pixels for the container that displays the resource.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <object> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
</object>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created an <object> tag that embeds the resource called movie.swf with a MIME type of x-shockwave-flash. We have also set a width of 400 pixels and a height of 300 pixels for the container that displays the resource.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <object> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
</object>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created an <object> tag that embeds the resource called movie.swf with a MIME type of x-shockwave-flash. We have also set a width of 400 pixels and a height of 300 pixels for the container that displays the resource.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <object> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<div>
  <object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
  </object>
</div>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created an <object> tag that embeds the resource called movie.swf with a MIME type of x-shockwave-flash. We have also set a width of 400 pixels and a height of 300 pixels for the container that displays the resource.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <object> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<div>
  <object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
  </object>
</div>
</body>

</html>

In this XHTML 1.1 Document example, we have created an <object> tag that embeds the resource called movie.swf with a MIME type of x-shockwave-flash. We have also set a width of 400 pixels and a height of 300 pixels for the container that displays the resource.