You are previewing HTML5: Up and Running.

HTML5: Up and Running

Cover of HTML5: Up and Running by Mark Pilgrim Published by O'Reilly Media, Inc.
  1. HTML5: Up and Running
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Diving In
      2. Conventions Used in This Book
      3. Using Code Examples
      4. A Note on the Editions of This Book
      5. Safari® Books Online
      6. How to Contact Us
    3. 1. How Did We Get Here?
      1. Diving In
      2. MIME Types
      3. A Long Digression into How Standards Are Made
      4. An Unbroken Line
      5. A Timeline of HTML Development from 1997 to 2004
      6. Everything You Know About XHTML Is Wrong
      7. A Competing Vision
      8. What Working Group?
      9. Back to the W3C
      10. Postscript
      11. Further Reading
    4. 2. Detecting HTML5 Features
      1. Diving In
      2. Detection Techniques
      3. Modernizr: An HTML5 Detection Library
      4. Canvas
      5. Canvas Text
      6. Video
      7. Video Formats
      8. Local Storage
      9. Web Workers
      10. Offline Web Applications
      11. Geolocation
      12. Input Types
      13. Placeholder Text
      14. Form Autofocus
      15. Microdata
      16. Further Reading
    5. 3. What Does It All Mean?
      1. Diving In
      2. The Doctype
      3. The Root Element
      4. The <head> Element
      5. New Semantic Elements in HTML5
      6. A Long Digression into How Browsers Handle Unknown Elements
      7. Headers
      8. Articles
      9. Dates and Times
      10. Navigation
      11. Footers
      12. Further Reading
    6. 4. Let’s Call It a Draw(ing Surface)
      1. Diving In
      2. Simple Shapes
      3. Canvas Coordinates
      4. Paths
      5. Text
      6. Gradients
      7. Images
      8. What About IE?
      9. A Complete Example
      10. Further Reading
    7. 5. Video on the Web
      1. Diving In
      2. Video Containers
      3. Video Codecs
      4. Audio Codecs
      5. What Works on the Web
      6. Licensing Issues with H.264 Video
      7. Encoding Ogg Video with Firefogg
      8. Batch Encoding Ogg Video with ffmpeg2theora
      9. Encoding H.264 Video with HandBrake
      10. Batch Encoding H.264 Video with HandBrake
      11. Encoding WebM Video with ffmpeg
      12. At Last, the Markup
      13. What About IE?
      14. A Complete Example
      15. Further Reading
    8. 6. You Are Here (And So Is Everybody Else)
      1. Diving In
      2. The Geolocation API
      3. Show Me the Code
      4. Handling Errors
      5. Choices! I Demand Choices!
      6. What About IE?
      7. geo.js to the Rescue
      8. A Complete Example
      9. Further Reading
    9. 7. The Past, Present, and Future of Local Storage for Web Applications
      1. Diving In
      2. A Brief History of Local Storage Hacks Before HTML5
      3. Introducing HTML5 Storage
      4. Using HTML5 Storage
      5. HTML5 Storage in Action
      6. Beyond Named Key/Value Pairs: Competing Visions
      7. Further Reading
    10. 8. Let’s Take This Offline
      1. Diving In
      2. The Cache Manifest
      3. The Flow of Events
      4. The Fine Art of Debugging, a.k.a. “Kill Me! Kill Me Now!”
      5. Let’s Build One!
      6. Further Reading
    11. 9. A Form of Madness
      1. Diving In
      2. Placeholder Text
      3. Autofocus Fields
      4. Email Addresses
      5. Web Addresses
      6. Numbers As Spinboxes
      7. Numbers As Sliders
      8. Date Pickers
      9. Search Boxes
      10. Color Pickers
      11. And One More Thing...
      12. Further Reading
    12. 10. “Distributed,” “Extensibility,” and Other Fancy Words
      1. Diving In
      2. What Is Microdata?
      3. The Microdata Data Model
      4. Marking Up People
      5. Marking Up Organizations
      6. Marking Up Events
      7. Marking Up Reviews
      8. Further Reading
    13. A. The All-in-One Almost-Alphabetical Guide to Detecting Everything
      1. List of Elements
      2. Further Reading
    14. Index
    15. About the Author
    16. Colophon
    17. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

A Long Digression into How Standards Are Made

Why do we have an <img> element? I don’t suppose that’s a question you ask yourself very often. Obviously someone must have created it. These things don’t just appear out of nowhere. Every element, every attribute, every feature of HTML that you’ve ever used—someone created them, decided how they should work, and wrote it all down. These people are not gods, nor are they flawless. They’re just people. Smart people, to be sure. But just people.

One of the great things about standards that are developed “out in the open” is that you can go back in time and answer these kinds of questions. Discussions occur on mailing lists, which are usually archived and publicly searchable. So, I decided to do a bit of “email archaeology” to try to answer the <img> element question. I had to go back to before there was an organization called the World Wide Web Consortium (W3C). I went back to the earliest days of the Web, when you could count the number of web servers on the fingers of both hands, and maybe a couple of toes.

On February 25, 1993, Marc Andreessen wrote:[1]

I’d like to propose a new, optional HTML tag:

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.)

This tag can be embedded in an anchor like anything else; when that happens, it becomes an icon that’s sensitive to activation just like a regular text anchor.

Browsers should be afforded flexibility as to which image formats they support. Xbm and Xpm are good ones to support, for example. If a browser cannot interpret a given format, it can do whatever it wants instead (X Mosaic will pop up a default bitmap as a placeholder).

This is required functionality for X Mosaic; we have this working, and we’ll at least be using it internally. I’m certainly open to suggestions as to how this should be handled within HTML; if you have a better idea than what I’m presenting now, please let me know. I know this is hazy with regard to image format, but I don’t see an alternative than to just say “let the browser do what it can” and wait for the perfect solution to come along (MIME, someday, maybe).

This quote requires some explanation. Xbm and Xpm were popular graphics formats on Unix systems.

“Mosaic” was one of the earliest web browsers. (“X Mosaic” was the version that ran on Unix systems.) When he wrote this message in early 1993, Marc had not yet founded the company that made him famous, Mosaic Communications Corporation, nor had he started work on that company’s flagship product, “Mosaic Netscape.” (You may know them better by their later names, “Netscape Corporation” and “Netscape Navigator.”)

“MIME, someday, maybe” is a reference to content negotiation, a feature of HTTP where a client (like a web browser) tells the server (like a web server) what types of resources it supports (like image/jpeg) so the server can return something in the client’s preferred format. “The Original HTTP as defined in 1991” (the only version that was implemented in February 1993) did not have a way for clients to tell servers what kinds of images they supported, thus the design dilemma that Marc faced.

A few hours later, Tony Johnson replied:

I have something very similar in Midas 2.0 (in use here at SLAC, and due for public release any week now), except that all the names are different, and it has an extra argument NAME="name". It has almost exactly the same functionality as your proposed IMG tag. e.g.,

<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">

The idea of the name parameter was to allow the browser to have a set of “built in” images. If the name matches a “built in” image it would use that instead of having to go out and fetch the image. The name could also act as a hint for “line mode” browsers as to what kind of a symbol to put in place of the image.

I don’t much care about the parameter or tag names, but it would be sensible if we used the same things. I don’t much care for abbreviations, i.e., why not IMAGE= and SOURCE=. I somewhat prefer ICON since it implies that the IMAGE should be smallish, but maybe ICON is an overloaded word?

Midas was another early web browser, a contemporary of X Mosaic. It was cross-platform; it ran on both Unix and VMS. “SLAC” refers to the Stanford Linear Accelerator Center, now the SLAC National Accelerator Laboratory, which hosted the first web server in the United States (in fact, the first web server outside Europe). When Tony wrote this message, SLAC was an old-timer on the WWW, having hosted five pages on its web server for a whopping 441 days.

Tony continued:

While we are on the subject of new tags, I have another, somewhat similar tag, which I would like to support in Midas 2.0. In principle it is:

<INCLUDE HREF="...">

The intention here would be that the second document is to be included into the first document at the place where the tag occurred. In principle the referenced document could be anything, but the main purpose was to allow images (in this case arbitrary sized) to be embedded into documents. Again the intention would be that when HTTP2 comes along the format of the included document would be up for separate negotiation.

“HTTP2” is a reference to Basic HTTP as defined in 1992. At this point, in early 1993, it was still largely unimplemented. The draft known as “HTTP2” evolved and was eventually standardized as “HTTP 1.0”. HTTP 1.0 did include request headers for content negotiation, a.k.a. “MIME, someday, maybe.”

Tony went on:

An alternative I was considering was:

<A HREF="..." INCLUDE>See photo</A>

I don’t much like adding more functionality to the <A> tag, but the idea here is to maintain compatibility with browsers that can not honour the INCLUDE parameter. The intention is that browsers which do understand INCLUDE, replace the anchor text (in this case “See photo”) with the included document (picture), while older or dumber browsers ignore the INCLUDE tag completely.

This proposal was never implemented, although the idea of providing text if an image is missing is an important accessibility technique that was missing from Marc’s initial <IMG> proposal. Many years later, this feature was bolted on as the <img alt> attribute, which Netscape promptly broke by erroneously treating it as a tooltip.

A few hours after Tony posted his message, Tim Berners-Lee responded:

I had imagined that figures would be represented as

<a name=fig1 href="fghjkdfghj" REL="EMBED, PRESENT">Figure </a>

where the relationship values mean

EMBED    Embed this here when presenting it
PRESENT  Present this whenever the source document is presented

Note that you can have various combinations of these, and if the browser doesn’t support either one, it doesn’t break.

[I] see that using this as a method for selectable icons means nesting anchors. Hmmm. But I hadn’t wanted a special tag.

This proposal was never implemented, but the rel attribute is still around (see Friends and (Link) Relations).

Jim Davis added:

It would be nice if there was a way to specify the content type, e.g.

<IMG HREF="http://nsa.gov/pub/sounds/gorby.au" CONTENT-TYPE=audio/basic>

But I am completely willing to live with the requirement that I specify the content type by file extension.

This proposal was never implemented, but Netscape did later add support for arbitrary embedding of media objects with the <embed> element.

Jay C. Weber asked:

While images are at the top of my list of desired medium types in a WWW browser, I don’t think we should add idiosyncratic hooks for media one at a time. Whatever happened to the enthusiasm for using the MIME typing mechanism?

Marc Andreessen replied:

This isn’t a substitute for the upcoming use of MIME as a standard document mechanism; this provides a necessary and simple implementation of functionality that’s needed independently from MIME.

Jay C. Weber responded:

Let’s temporarily forget about MIME, if it clouds the issue. My objection was to the discussion of “how are we going to support embedded images” rather than “how are we going to support embedded objections in various media.”

Otherwise, next week someone is going to suggest “let’s put in a new tag <AUD SRC="file://foobar.com/foo/bar/blargh.snd">” for audio.

There shouldn’t be much cost in going with something that generalizes.

With the benefit of hindsight, it appears that Jay’s concerns were well founded. It took a little more than a week, but HTML5 did finally add new <video> and <audio> elements.

Responding to Jay’s original message, Dave Raggett said:

True indeed! I want to consider a whole range of possible image/line art types, along with the possibility of format negotiation. Tim’s note on supporting clickable areas within images is also important.

Later in 1993, Dave proposed HTML+ as an evolution of the HTML standard. The proposal was never implemented, and it was superseded by HTML 2.0. HTML 2.0 was a “retro-spec,” which means it formalized features already in common use: “This specification brings together, clarifies, and formalizes a set of features that roughly corresponds to the capabilities of HTML in common use prior to June 1994.”

Dave later wrote HTML 3.0, based on his earlier HTML+ draft. Outside of the W3C’s own reference implementation, Arena, HTML 3.0 was never implemented. It was superseded by HTML 3.2, which was also a “retro-spec”: “HTML 3.2 adds widely deployed features such as tables, applets and text flow around images, while providing full backward compatibility with the existing standard HTML 2.0.”

Dave later coauthored HTML 4.0, developed HTML Tidy, and went on to help with XHTML, XForms, MathML, and other modern W3C specifications.

Getting back to 1993, Marc replied to Dave:

Actually, maybe we should think about a general-purpose procedural graphics language within which we can embed arbitrary hyperlinks attached to icons, images, or text, or anything. Has anyone else seen Intermedia’s capabilities with regard to this?

Intermedia was a hypertext project from Brown University. It was developed from 1985 to 1991 and ran on A/UX, a Unix-like operating system for early Macintosh computers.

The idea of a “general-purpose procedural graphics language” did eventually catch on. Modern browsers support both SVG (declarative markup with embedded scripting) and <canvas> (a procedural direct-mode graphics API), although the latter started as a proprietary extension before being “retro-specced” by the WHAT Working Group.

Bill Janssen replied:

Other systems to look at which have this (fairly valuable) notion are Andrew and Slate. Andrew is built with _insets_, each of which has some interesting type, such as text, bitmap, drawing, animation, message, spreadsheet, etc. The notion of arbitrary recursive embedding is present, so that an inset of any kind can be embedded in any other kind which supports embedding. For example, an inset can be embedded at any point in the text of the text widget, or in any rectangular area in the drawing widget, or in any cell of the spreadsheet.

“Andrew” is a reference to the Andrew User Interface System, although at that time it was simply known as the Andrew Project.

Meanwhile, Thomas Fine had a different idea:

Here’s my opinion. The best way to do images in WWW is by using MIME. I’m sure postscript is already a supported subtype in MIME, and it deals very nicely with mixing text and graphics.

But it isn’t clickable, you say? Yes, you’re right. I suspect there is already an answer to this in display postscript. Even if there isn’t the addition to standard postscript is trivial. Define an anchor command which specifies the URL and uses the current path as a closed region for the button. Since postscript deals so well with paths, this makes arbitrary button shapes trivial.

Display PostScript was an onscreen rendering technology codeveloped by Adobe and NeXT.

This proposal was never implemented, but the idea that the best way to fix HTML is to replace it with something else altogether still pops up from time to time.

On March 2, 1993, Tim Berners-Lee commented:

HTTP2 allows a document to contain any type which the user has said he can handle, not just registered MIME types. So one can experiment. Yes I think there is a case for postscript with hypertext. I don’t know whether display postscript has enough. I know Adobe are trying to establish their own postscript-based “PDF” which will have links, and be readable by their proprietary brand of viewers.

I thought that a generic overlaying language for anchors (HyTime based?) would allow the hypertext and the graphics/video standards to evolve separately, which would help both.

Let the IMG tag be INCLUDE and let it refer to an arbitrary document type. Or EMBED if INCLUDE sounds like a cpp include which people will expect to provide SGML source code to be parsed inline—not what was intended.

HyTime was an early, SGML-based hypertext document system. It loomed large in many early discussions of HTML, and later XML.

Tim’s proposal for an <INCLUDE> tag was never implemented, although you can see echoes of it in <object>, <embed>, and the <iframe> element.

Finally, on March 12, 1993, Marc Andreessen revisited the thread:

Back to the inlined image thread again—I’m getting close to releasing Mosaic v0.10, which will support inlined GIF and XBM images/bitmaps, as mentioned previously. [...]

We’re not prepared to support INCLUDE/EMBED at this point. [...] So we’re probably going to go with <IMG SRC="url"> (not ICON, since not all inlined images can be meaningfully called icons). For the time being, inlined images won’t be explicitly content-type’d; down the road, we plan to support that (along with the general adaptation of MIME). Actually, the image reading routines we’re currently using figure out the image format on the fly, so the filename extension won’t even be significant.



[1] http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html. The thread described over the next several pages can be followed by clicking the “Next message” and “Previous message” links.

The best content for your career. Discover unlimited learning on demand for around $1/day.