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.
How do we insert multimedia objects into Web documents in a
The W3C responds
We decided to address this issue in a two-part article:
- The history of the birth of multimedia in HTML: the
imgtag, limitations, and a brief introduction of the
of how it can be used, test cases and user agent support
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
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
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 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 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
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.
<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
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.
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
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
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.
- The History of HTML (by Jeffrey Veen)
- proposed new tag: IMG (by Marc Andreessen)
- Definition of the
CSS: figures and captions
- Definition of the
- Rules for rendering objects
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
email@example.com with “Subject: subscribe”. You can read
archived posts at href="http://lists.w3.org/Archives/Public/public-evangelist/">http://
The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.