HTML <object> Tag

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <object> Tag in HTML 5

The <object> tag is used to embed content from an external resource into a web page.

Using an <object> to embed a YouTube video

This is an actual working example of the <object> tag example code below.

<object> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <object type="type/subtype" ...>
      <param name="pname" value="pvalue"/>
      ...
      ... flow content ...
   </object>
   ...
</body>

Rules for coding HTML `object` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Include a object element where flow content is expected.
Begin the object element with a starting <object> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
If the object takes parameters, code them with <param> tags inside the object element, between the starting <object> tag and the ending </object> tag.
Optionally include an embed element or other inner HTML flow content inside the object element.
End the object element with a matching </object> closing tag.

Content Model

Content of the object element

The content of the object element can include <param> tags, text content, any tags that can be used in flow content and HTML comments.

<object> Tag Attributes

Attributes of the <object> tag

global attributes	In addition to the personal attributes of the <object> tag below, any of the common HTML attributes can also be coded.
data	a URI reference that resolves to the URL of a two-dimensional image resource Use percent escape codes as explained in the URL-encoding tutorial for any special characters in the URI reference. If the value of the `data` attribute resolves to an HTTP URL, it may contain any of the following components: protocol scheme, typically `http:` or else `https:` username, followed by an "@" host name or IP address port number, which defaults to 80 for the `http` scheme and 443 for the `https` scheme absolute or relative path search query, indicated by "?" If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash `/...`, it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document.
form
name
type
usemap	a URI reference that resolves to the URL of an image map Use percent escape codes as explained in the URL-encoding tutorial for any special characters in the URI reference.
width, height

<object> Tag Examples

Examples of the `object` tag in HTML 5

Example of embedding video in HTML 5

The "old" YouTube embed code used an <object> tag and an <embed> tag. (The "new" YouTube code uses the <iframe> tag.)

<object width="640" height="390">
   <param name="movie" value="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"/>
   <param name="allowFullScreen" value="true"/>
   <param name="allowscriptaccess" value="always"/>
   <embed src="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"
      type="application/x-shockwave-flash"
      allowscriptaccess="always" allowfullscreen="true"
      width="640" height="390"/>
</object>

Since the <param/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiter string /> rather than just > (<param .../>). The <embed> tag provides a fallback for browsers that do not support the <object> tag.

Demo of embedded YouTube video:
embedded YouTube video
(Note that this video will probably not play if your current browser does not yet support HTML 5 video.)

Embedding video with fallback

The <object> tag can be combined with some other tags, such as the <video> tag <audio> tag to provide a fallback when the browser does not support the type of media provided. The <object> tag for fallback media is coded within the <audio> or <video> tag as shown in the following example, which falls back to an embedded YouTube video:

<video poster="poster.png" controls="controls" style="border: black 1px solid; margin: 4px">
   <source src="http://Vyd.com/video.ogv" type="video/ogg; codecs="theora,vorbis""/>
   <source src="http://Vyd.com/video.mp4" type="video/mp4; codecs="avc1.42E01E,mp4a.40.2""/>
   <object width="1280" height="745">
      <param name="movie" value="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1"/>
      <param name="allowFullScreen" value="true"/>
      <param name="allowscriptaccess" value="always"/>
      <embed src="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"/>
   </object>
</video>

Changes in HTML 5 - <object> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The <object> tag is not allowed in the head section.

The following attributes should not be coded on the <object> tag because they either have been deprecated or were never officially supported:

align
archive
border
classid
codebase
codetype
declare
hspace
standby
vspace

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the object element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5

HTML <object> Tag