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 backwards-compatible way?
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
objectis, examples 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 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 most common way to insert a graphical element in an HTML
document (from HTML 3.2 to XHTML 1.1) is to use an
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.
<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
- W3C CSS: figures and captions
- Simplebits: Image floating
- 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 public-evangelist- email@example.com with “Subject: subscribe”. You can read archived posts at http:// lists.w3.org/Archives/Public/public-evangelist/.
The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.