HTML Object as arbitrary Element

Google+ Pinterest LinkedIn Tumblr +

HTML has the element, OBJECT. However, the use of this element is very vague. Whenever you want an element that is not in the HTML specification, you can make one with the OBJECT element. This is an article in which I show you one approach to using the HTML Object element.

You need basic knowledge in HTML, CSS and JavaScript to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at That is, contact me for the slightest problem you have about what you are reading.

Two approaches to using the Object Element
There are two approaches to using the HTML Object element.
– You can use it with any computer language so far as the user’s browser is configured to work with the interpreter of the language. This approach is what is given in the HTML specification. I intend to write a series of articles on this approach, later. Depending on your knowledge of HTML and CSS, you can use it to form a unique element.
– You can use it whenever you want to group a number of smaller HTML elements together as well as providing layout for the group of elements. Now that computer screens have become very large, you might need to have a group of HTML elements in a particular area, of a particular layout, on the screen. This second approach is my own derivation, and it is what I illustrate in this article.

The Tags of the Object Element
The HTML Object element needs a start and an end tag; that is:

The start tag can have many attributes. I will not talk about most of them in this article. Most of the attributes are related to the first approach. The content of the Object element can be other object elements, special Object elements and/or normal HTML elements.

Inline Nature of the Object Element
The HTML Object element is an inline-level element, by default. This means it fits along with text on a line, like the image element. In the inline context, the height of the line is determined by the tallest element in the line.

If you fill the content of the Object element with only inline elements to the extent that the code of the Object element becomes very long, at the browser, the Object element would wrap onto the next line (or wrap into lines).

However, you cannot have the Object element in parts all over the screen. In other words, you cannot have a portion of the element at one position of the screen and then after skipping some elements, you have the other portion in another position of the screen.

In terms of layout, the Object element is like the DIV element, with the difference that it is inline (by default) and it wraps into the next lines.

Effects of having Block-level Elements in Object Element
A block-level element will occupy a whole horizontal stripe within its containing (e.g. BODY) element. An example of a block-level element is the Paragraph element. If you include a block-level element in an Object element, the block-level element will take one complete horizontal line in the Object element. This line taken can be very tall depending on the height of the block-level element. However, the wrapping nature of the Object element is still maintained. Well, if the Object element does not have a width value, the width of the line will be that of the element (e.g. BODY) housing the Object element.

Assume that you have an Object element at its default inline state. Let the content of the Object element be made up of a series of inline elements, then a block-level element and then another series of inline elements. The Object element at its default inline state is displayed in lines at the browser. In this case, the Object element will start by displaying the series of inline elements wrapping them in lines. When it reaches the block-level element, it displays the block-level element in one horizontal stripe in the Object element. It continues to display the other series of inline elements, wrapping them.

Converting to Block-Level
You can convert an Object element to a block-level element. To do this you use the CSS display property and value, “display:block”. The following example illustrates this:

Some elements

In this case, the Object element will occupy one horizontal stripe in its containing (e.g. BODY) element.

You can float an Object element. Remember, when you float an inline element (or Object element) it becomes a block-level element that occupies a small area. In order to float an Object element, you need to give it a width value. The following code illustrates this:

text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text

Keeping a Group of Elements in One Place
To keep a group of normal HTML elements in one place, make the content of the Object element, normal HTML elements. You can convert the Object element into a block-level element (you can also give it a width value) or float it. The following code shows a floated Object element having an image and a button element. The image is inside another Object element nested in the outer object element. Try the code with your own image whose width is originally different from 300px.

function change()
document.getElementById(‘I1’).width = “300”;

Some text.


Change Width

Some text

The Object Element for Layout
Layout can be a difficult or simple topic, depending on your experience in GUI programming. When you have elements in the form of a grid or the display would be like that of a newspaper, use the HTML Table element for the layout. If the Table would occupy a small area of the screen (web page) you can put the Table element inside an Object element. You can also put other elements in the Object but outside of the table. The idea is that the whole Object would occupy a small area of the screen. The following example where the Object is floated, illustrates this (try it).

Some text.

Some Header Note

Cell 00Cell 01

Cell 10Cell 11

Some Footer Note

Some text

In the above code, the Table element, which is by default a block-level element, has not been converted to an inline element. The Object including the Table is floated in many different browser types. However, it is advisable to always convert any block level element in the object to inline, when you want floating.

That is it for this article. I hope you appreciated it.



About Author

Leave A Reply