The 7 content objects of HTML

A content object is a discrete represention of text content. The 4 general types of objects are image, audio, video, and document.

HTML provides the following elements to enable a form of those objects on a webpage.

Then, there are the following elements to manage those content objects.

svg element

An svg element inserts a scalable vector graphics on the document.

The syntax expects those required in the SVG namespace.

img element

An img element inserts a raster image object on a web document.

The syntax is a void element that expects the following attributes:

<img src="[url]">

audio element

An audio element inserts a sound object in a web document.

The syntax expects the following:

<audio></audio>

video element

A video element inserts moving images with or without a sound object.

The syntax expects the following:

<video></video>

iframe element

An iframe element inserts a web document object.

The syntax expects the following:

math element

A math element inserts a mathematical notation on the document.

The syntax expects those required in the Math namespace.

object element

An object element inserts an object resource that cannot be inserted by the following elements: img, audio, video, iframe, and embed.

The syntax expects the following:

<object data="[valid-url]"></object>
Utility elements

picture element

A picture element defines a container for multiple image sources. Each source is defined by a source element.

The syntax expects the following in stated order:

  1. 0 or more source element
  2. 1 img element
  3. 0 or more for both a script element and template element. They can be intermixed with other elements.
<picture>
  <img src="">
</picture>

source element

A source element specifies an alternative image, audio, or video object.

The syntax is a void element that expects the following:

<picture>
  <source srcset="[image-candidate-string]">
</picture>

<!-- or -->

<audio>
  <source src="[valid-url]">
</audio>

<!-- or -->

<video>
  <source src="[valid-url]">
</video>

map element

A map element defines a container for clickable areas of an img element. Each area is defined by the area element.

The syntax expects the following:

  • 1 name attribute
  • 0 or 1 count for each element allowed in the parent of this map element
<map name="[identifier]"></map>

area element

An area element defines a region of a raster image object and may link to it.

The syntax is a void element that expects the following:

<map name="[identifier]">
  <area>
</map>

canvas element

A canvas element creates a raster image object on the fly.

The syntax expects the following:

<canvas></canvas>

track element

A track element specifies a timed text alternative resource for an audio, or a video element.

The syntax is a void element that expects the following:

  • 1 src attribute
  • 0 or 1 for both of kind attribute and label attribute.
  • 0 or 1 srclang attribute except for the following condition:
    • 1 srclang attribute if the kind attribute have the subtitles keyword.
  • 0 or 1 default attribute for a set of track element with a kind attribute of either the subtitles or the captions keyword
  • 0 or 1 default attribute for a set of track element with a kind attribute having the descriptions keyword
  • 0 or 1 default attribute for a set of track element with the kind attribute having the chapters keyword
  • A unique value combination of the following attributes: kind, srclang, and label.
<track>

embed element

An embed element inserts an integration point for external applications to insert a resource.

The syntax is a void element that expects the following:

<embed>