WaSP Asks the W3C

Adding Multimedia in Web Documents (part 1)

Web browsers and devices that access the Web have evolved greatly over the years. Items for document inclusion have reached far beyond text and images to a variety of objects, including rich media file types such as sound, videos and animation. Often, developers and designers pose questions about the correct way to include a variety of such items in their standards-conformant documents. At the same time, many may wonder how well these formats are supported across browsers and their versions.

In this two-part issue, we ask the W3C to give us some insight into the inclusion of multimedia into our familiar (X)HTML documents.

WaSP Asks

How do we insert multimedia objects into Web documents in a backwards-compatible way?

The W3C responds

We decided to address this issue in a two-part article:

  1. The history of the birth of multimedia in HTML: the img tag, limitations, and a brief introduction of the object tag
  2. What object is, examples of how it can be used, test cases and user agent support

Introduction

Using multimedia objects in Web documents comes with a wide variety of techniques depending on the technology and the types of objects we are addressing. A Web document can be written in SVG, SMIL, XHTML, MathML, CSS, and so forth. In Part 1, we will discuss the birth of the img element and explain its limitations, as well as introduce the object element. In the second part of this article, we will give usage examples of the object element and provide an overview on the state of implementation across various user agents.

History: Birth of Multimedia in HTML

Reading mailing-lists archives often helps to provide context for the creation of a feature in a technology. There is always a tradeoff between making the technology more universal (but often more complex) and building it fast (but often limited and incomplete). Jeffrey Veen gives an historic perspective on the birth of a long-awaited feature of HTML: the ability to insert images in an HTML document.

In 1993, a debate was exploding on the fledgling HTML mailing list, and finally a college student named Marc Andreessen added <img> to his Mosaic browser. People objected, saying it was too limited. They wanted <include> or <embed>, which would allow you to add any sort of medium to a Web page with the much-touted content negotiation used on the client. That was too big a project, according to Marc, and he need to ship ASAP. Mosaic went with <img>, and it would be years before including media in a page using <embed> or <applet> or <object> would surface again.

Mosaic shipped with <img>, Tim went off to the nascent World Wide Web Consortium, and Marc left for California to start a little browser company called Netscape.

The history of HTML - Jeffrey Veen

We can still find the original message sent by Marc Andreessen to the www-talk mailing-list in 1993:

IMG

Required argument is SRC="url".

This names a bitmap or pixmap file for the browser 
to attempt to pull over the network and interpret 
as an image, to be embedded in the text at the 
point of the tag's occurrence.

An example is:

<IMG SRC="file://foobar.com/foo/bar/blargh.xbm">


(There is no closing tag; this is just a 
standalone tag.) 

proposed new tag: IMG - Marc Andreessen

Since then, the img element has been unfortunately used for layouts devoid of meaningful mark-up, such as where images are cut up into slices that are then placed into individual table cells.

The img element

The most common way to insert a graphical element in an HTML document (from HTML 3.2 to XHTML 1.1) is to use an img element.

The IMG element embeds an image in the current document at the location of the element's definition. The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.

The HTML specifications do not define any requirements for the format which have to be supported, but commonly supported formats are: GIF, JPEG, PNG, TIFF and Bitmap — you can insert different images of various formats in any document. The list of formats supported by browsers have gradually evolved over time.

Markup examples

 <p><img src="http://example.org/bzcam.png" alt="Image de
l'étoile variable cataclysmique BZ Cam."/></p>

You will find explorative use of HTML markup to insert images in documents at the following Web sites:

The need for a generic object inclusion mechanism

The img element does a good job for the inclusion of images, but there are plenty more multimedia objects one may want to embed in a Web document: sound, movies, interactive animations, small programs. Some elements were created as an attempt to broaden the range of objects to include.

First, the applet element was introduced for Java programs, but this only solved the issue for yet another type of object, thus it was eventually deprecated. Later, the embed element was a first proprietary attempt at creating a generic inclusion mechanism, but it was never formally included in HTML.

HTML 4.01 finally came with a standardized, generic object inclusion mechanism: the object element.

Introducing the object element

In response, the object element was introduced in HTML 4.01. It has been created as a generic method to insert multimedia objects of any kind in a Web document. This element has a very powerful cascading fallback mechanism: in addition to the primary object to be rendered, an object element can contain another object or alternate text. User-agents can thus cascade through embedded objects in search of one they can render if they do not support the format of the primary object.

How well is object supported?

In the second part on this topic, we will show the use of the object element and provide a framework to test the level of support of this element in user agents.

References

Discussion

For clarification and discussion on this topic, please address your comments and questions to the W3C Web Standards Education list.

To subscribe to the list, send an email to public-evangelist- [email protected] with “Subject: subscribe”. You can read archived posts at http:// lists.w3.org/Archives/Public/public-evangelist/.