HTML Object Element

HTML Object element <object> can be used to define an embedded object in an HTML document.

Basically, it was designed to embed plug-ins like Java Applets, PDF Readers, Flash Players, etc., in a web page, and most of these are not supported by the browsers today.

However, this can even be used to embed an HTML document in to another HTML document.

Here is a list of some of the examples.

<object data="users.html"></object>
<object data="picture.jpeg"></object>

The embed object path can be a direct path or a reference path as below.

<object data="https://randomcodez.com/assets/logo/logo.png"></object>
<object data="/assets/html/users.html"></object>

HTML Object Attributes

Here is a list of attributes that an object element can have.

  • Attribute data to point embed object path
  • Attribute width and height to define the object container dimensions
  • Attribute style to define its inline styles
  • Attributes id and class which can be defined on any HTML elements
<object data="/assets/html/users.html" width="100%" height="200px"></object>
<object data="/assets/html/users.html" style="background-color: aquamarine; border:5px solid gray;"></object>

Examples

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Object</h1>
    <object data="/assets/html/users.html"></object>
    <object data="/assets/html/users.html" width="100%" height="200px"></object>
    <object data="/assets/html/users.html" style="background-color: aquamarine; border:5px solid gray;"></object>

    <object data="https://randomcodez.com/assets/logo/logo.png"></object>
</body>
</html>

Overall

HTML Object elements can be used for embedding web plug-ins or HTML documents into a web page.