W3C HTML predefined icon-like symbols

W3C Working Draft 29 Jul 1996

Bert Bos <bert@w3.org>

This document:
http://www.w3.org/pub/WWW/TR/WD-wwwicn-960729
Latest version:
http://www.w3.org/pub/WWW/TR/WD-wwwicn

Status of this document

This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C tech reports can be found at: http://www.w3.org/pub/WWW/TR/

Note: since working drafts are subject to frequent change, you are advised to reference the above URL, rather than the URLs for working drafts themselves.


Abstract

One of the features of HTML is that it allows authors to include characters and symbols in the text that cannot be typed in. In HTML2, these so-called character entities are limited to letters with accents and some typographic symbols. HTML doesn't yet allow character entities for mathematical symbols and other common signs. Authors have to resort to inline images for these. This document defines a list of some of those `other' symbols for use in future versions of HTML.

Contents

  1. Introduction
  2. Rationale
  3. What is standardized and what isn't?
  4. Detailed description of the entities
  5. DTD fragment
  6. Acknowledgments
  7. Copyright

Introduction

HTML is a simple markup language for creating hypertext documents that are portable between platforms. A document that is marked-up with HTML consists of a mix of data characters (the text that appears on the screen) and mark-up (information for the application about the function and relation of the various data parts).

Many data characters can be typed in directly: an `a' is just the `a' key on the keyboard; for others the editor or word-processor may have a special method to insert them: " + a = ä. If the editor doesn't offer such a method, it may be possible to replace the character with a bit of mark-up: type the six characters `&auml;' instead of `ä' Any application that understands HTML should be able to translate this back to the appropriate character. A keyword like `&auml;' is called a character entity (or more precise: `character entity reference')

HTML2 defines a list of such character entities. That lists consists of all the characters from the so-called ISO Added Latin 1 set, plus a few of its own. This is enough for texts in most Western languages, but it doesn't help with other languages or mathematics. It is expected that the set will be extended with all the characters in the ISO 10646 (a.k.a. Unicode) set, but even then there are many common symbols that are missing.

Rationale

HTML documents often contain small icons to draw attention to interesting links or to special types of information. For example, the existence of a sound could be indicated by an icon of a loudspeaker. Gopher and FTP menus also use icons to indicate the types of links they contain.

Such icons could be created with inline images, but there are several advantages to incorporating them into future levels of the HTML language in the form of SGML entities. In that way, they are defined on a par with other predefined entities, such as the ISO-defined sets of accented characters or the mathematical and Greek symbols.

One advantage is that authors do not have to hunt around for suitable images and create hyperlinks to them. Instead, they can write &audio; and be assured that all browsers will do their best to print some likeness of a loudspeaker.

Since the entity defines only the general shape, not the exact pixel-for-pixel image, the browser is free to choose a size and color that matches the rest of the display. The best browsers will have symbols in several sizes, appropriate for use in 12, 14 or 17 point text, for example.

Using entities instead of inlined images is also faster (depending on the implementation, of course). The browser will always use the same image for an entity, independent of the document's origin. After a while, there will even be browsers that come with the symbols already built-in.

Authors are free to use any symbol for whatever purpose they choose, but like Humpty Dumpty, they will be better understood if they do not make a symbol mean what they choose it to mean, but use it for its commonly accepted value. The descriptions below suggest possible semantics, but only frequent usage by many people can make the true intention clear.

What is standardized and what isn't?

First of all, of course, the names of the entities are standardized.

Their intended use is also standardized, but the definitions are kept somewhat vague on purpose. As stated above, the meaning of a symbol is likely to evolve when it comes into common usage, until some universally accepted meaning emerges.

The shapes are not standardiazed, but the images in this document are provided as suggestions, to give consistency across implementations. Developers of products on specific platforms are encouraged to use the conventional icons on that platform where they exist.

The alternative glyphs below are there mainly to show that the shapes can be varied.

Detailed description of the entities

Desriptions of the entites, with suggested renderings. The part `[test: xxx]' shows the entity in actual use.

[test: &archive;]
&archive; - archive server. A collection of (related) documents, that can be manipulated as a single unit. When it is used in a link, it retrieves either the whole archive or its table of contents. Example: Tar files, Zip files, database files.
(or: , or: ) [test: &audio;]
&audio; - audio sequence. A sound fragment, such as a piece of music or speech. When used in a link, it will play the sound. Example: links to audio files in Gopher menus; the current time in a synthesized voice.
(or: ) [test: &binary.document;]
&binary.document; - binary data. A document that contains data that is unreadable by humans, and of which the precise type is not known or not important. When used in a link, the data is downloaded, but not displayed. Example: binary files in Gopher menus.
(or: ) [test: &uuencoded.document;]
&uuencoded.document; - uuencoded document
(or: ) [test: &binhex.document;]
&binhex.document; - binhex format. A document that is encoded in Macintosh hexadecimal coding. Hopefully this symbol can be phased out in the future, as servers and client become smarter, since this is not information that normal users are interested in. Example: Binhex files in Gopher menus.
(or: ) [test: &compressed.document;]
&compressed.document; - compressed document. A file that is compressed with compress, gzip, or equivalent utilities. Normally part of a link to such a file. Example: a compressed file in an FTP directory.
(or: , or: ) [test: &text.document;]
&text.document; - text/plain, html, etc.. A document containing primarily text. This includes text with markup instructions, if the browser is (expected to be) able to interpret them. A part of a link, it will retrieve and display the document. Example: a plain text file, an HTML document, a TeX DVI file.
(or: ) [test: &document;]
&document; - unspecified document type. Some document, the exact type of which is unimportant (contrast this with &unknown.document; below). Example: a directory listing showing files and subdirectories (folders); a list of titles of articles, with document symbols replacing bullet marks.
(or: ) [test: &unknown.document;]
&unknown.document; - unrecognized document type
[test: &calculator;]
&calculator; - calculator. This symbol should give access to some sort of interactive calculator. Example: a calculator could be included in a form to allow people to do some computations before they fill in the requested numbers.
(or: , or: ) [test: &caution;]
&caution; - warning sign. Draws attention to an important piece of information. It is normally not used in a link. Example: `Warning: the next video fragment contains scenes of extreme cruelty.'
[test: &clock;]
&clock; - clock or time. A clock should give access to the current time or to the elapsed time since some event. Example: selecting the clock returns the simulated time in a multi-user strategy game.
[test: &disk.drive;]
&disk.drive; - removable media type. Gives access to whatever disk is in the indicated drive. The fact that it is removable means that the contents can change or may be absent altogether. Example: a link to the disk on the machine of a colleague.
[test: &diskette;]
&diskette; - floppy disk. Represents a collection of files stored on a floppy disk. In contrast to the &disk.drive; above, this is a specific disk. Usually, access is slow. Example: a disk in a jukebox, a disk in a mail-order catalogue.
[test: &display;]
&display; - computer screen. The computer's display as an output device. Could be used together with the fax and the printer to let the user select where he want something to be printed. Example: when a document is available in different resolutions, the display symbol indicates that one of them version is suitable for computer screens.
[test: &fax;]
&fax; - facsimile machine. A fax machine as an output device. Like the display and printer symbols, this can be used to indicate the destination of some output. Example: forwarding a message to somebody without an e-mail address can be done by selecting the fax symbol and entering a phone number.
[test: &filing.cabinet;]
&filing.cabinet; - filing cabinet. A container for documents and folders. It is usually larger than a folder, and the contents are more divers. Example: a link to an FTP server.
(or: ) [test: &film;]
&film; - film or animation, such as MPEG movie. A timed sequence of images, optionally with a sound track, such as a video sequence, a computer animation, a slide show, or a live video link. Example: a video clip on a CD-I.
[test: &fixed.disk;]
&fixed.disk; - fixed media drive. Either a container for folders and documents, or the destination of some data. In the first case, there must be a reason why the device is important (and therefore why the symbols for folder or filing cabinet are not applicable). Example: a link to the local files on the user's own machine.
(or: , or: ) [test: &folder;]
&folder; - folder or directory. A container for documents and maybe other folders. As part of a link, it should retrieve a listing of the folder's contents. Example: a gopher menu, a directory.
[test: &form;]
&form; - fill-out form. Gives access to a fill-out form, normally coded as an HTML document. Example: links to different types of tax forms.
(or: ) [test: &ftp;]
&ftp; - ftp server. Represents a connection using the FTP protocol, when for some reason it is important that the user is aware of the server's type. Example: information that is available over a number of channels, one of which is an FTP connection.
[test: &glossary;]
&glossary; - glossary of terms, etc. Gives access to a glossary of terms. Example: a link to a technical dictionary.
[test: &gopher;]
&gopher; - gopher server. A connection using the Gopher protocol. Example: an information provider might list alternative addresses, indicating with the gopher symbol that some of them are Gopher connections.
[test: &home;]
&home; - home document. Represents the `home page' of a collection of related nodes (not necessarily the user's own home page). Normally part of a hyperlink. Example: each node in somebody's personal collection could contain a link to his `Welcome' page.
(or: , or: , or: ) [test: ℑ]
&image; - photograph, drawing or graphic of any kind. Represents a photograph, drawing, etc. When used in a link, it retrieves the image and displays it. Example: a link of type I in a Gopher menu; a `submit' button in a form that sets image parameters.
(or: ) [test: &index;]
&index; - searchable index. Represents an interactive index. When used in a link, it gives access to a searchable document, which allows at least keywords to be entered. Example: a link to a WAIS index over some collection of documents; a link of type 7 in a Gopher menu.
[test: &mail;]
&mail; - e-mail messages . Represents either a single mail message or the mail sub-system. If the context is clear, it can also be used as a label in front of someone's address (cf. the telephone symbol). As part of a hyperlink, it respectively retrieves that message or starts a (possibly integrated) mail agent. Example: in a view of a mailbox, each message can be prefixed with a mail icon.
[test: &mail.in;]
&mail.in; - mail-in tray. A special mail folder (viz. the one in which the mail system deposits new messages). As a hyperlink, it displays the contents of the folder, in the form of an index.
[test: &mail.out;]
&mail.out; - mail-out tray. A special mail folder (viz. the one in which the user stores messages that are to be sent out). Note that this is not the folder that keeps copies of messages that have been sent. Example: a link to a special directory in which the user's composed messages are collected, until he exits the mail system (at which point the messages are sent and the directory is emptied.)
[test: ↦]
&map; - geographical or schematic map. A document that consists of a map of some kind. In a link, it retrieves the map and displays it. Example: a road map with instructions how to reach some building; a schematic representation of some production process.
[test: &mouse;]
&mouse; - mouse/pointing device. The mouse as an input device. Example: label in front of instructions that are only applicable if you have a mouse.
[test: ¬ebook;]
&notebook; - notes or annotations. Indicates the presence of notes or annotations, presumably related to the context of the icon. When part of a link, it displays the notes. Example: an annotated classical text linking the commentary by means of symbols in the margin.
[test: &parent;]
&parent; - parent of current document. In a more or less hierarchical collection of nodes, this represents the parent of the current node. Should be used as a link to that node. Example: a link to the parent directory of an FTP directory.
(or: ) [test: &next;]
&next; - next document in current sequence. The next document of a collection that is meant to be read in order. Example: each chapter of a book could end with a link to the next chapter.
(or: ) [test: &previous;]
&previous; - previous document in current sequence. The previous document of a collection that is meant to be read in order. Example: each chapter of a book could start with a link to the previous chapter.
[test: &printer;]
&printer; - hardcopy device. A printer as an output device. (Compare with the display and fax symbols.) Example: ???
[test: &summary;]
&summary; - summary. A summary of a document or of a collection of documents. In a link, it retrieves the text of the summary. Example: the table of contents of a book could include a link to a summary.
(or: , or: ) [test: &telnet;]
&telnet; - telnet connection. A terminal-based connection to some service, using the Telnet protocol. When part of a link, it should start a terminal-emulator and a telnet connection to the indicated service. Example: a link to a library's on-line catalogue that still uses its own user-interface.
[test: &tn3270;]
&tn3270; - tn3270 terminal session. A terminal-based connection to some service, that requires a TN3270 terminal (-emulator) to work (cf. the telnet symbol). When part of a link, it should start a terminal-emulator and a telnet connection to the indicated service. Example: a link to a database manager running on an IBM mainframe.
[test: &toc;]
&toc; - table of contents. A table of contents over one or more documents. As a link, it should display the table of contents associated with the current document. Example: each chapter of a hyper-book could start with a link to the book's table of contents.
[test: &trash;]
&trash; - waste paper basket
[test: &telephone;]
&telephone; - telephone number. Next to a number, it indicates that the number represents a telephone number (cf. the third meaning of the mail symbol).
[test: &cd.rom;]
&cd.rom; - CD ROM. A collection of documents contained on a read-only CD, including music CDs. (cf. the fixed disk, disk drive, and diskette symbols).
[test: &cd.i;]
&cd.i - CD-I. An interactive session with a CD-I.
[test: &keyboard;]
&keyboard; - keyboard device. The keyboard as an input device (cf. mouse).
[test: &stop;]
&stop; - error sign. A more severe warning then the &caution; symbol.
[test: &network;]
&network; - computer network

[test: &smiley;]
&smiley; - happy face. Used as postfix adjective/adverb, meaning `for fun', `ironic', `half-serious', etc.
[test: &sadsmiley;]
&sadsmiley; - sad face. Used as postfix adverb, meaning `unfortunately'
(or: ) [test: &new;]
&new; - new! Draws attention to something in the document that has recently been changed and that the reader has probably not seen before.
[test: &play.start;]
&play.start; - play. Play button for starting a movie or sound, as on cassette or CD player (cf. play.stop, play.pause, play.fast.forward, play.fast.reverse).
[test: &play.stop;]
&play.stop; - stop play. Stop button for stopping a movie or sound, as on cassette or CD player (cf. play.start, play.pause, play.fast.forward, play.fast.reverse).
[test: &play.pause;]
&play.pause; - pause. Pause button for pausing a movie or sound, as on cassette or CD player (cf. play.start, play.stop, play.fast.forward, play.fast.reverse).
[test: &play.fast.forward;]
&play.fast.forward; - fast forward. fast-forward button for skipping along a movie or sound, as on cassette or CD player (cf. play.stop, play.pause, play.start, play.fast.reverse).
[test: &play.fast.reverse;]
&play.fast.reverse; - fast reverse. fast reverse button for going back in a movie or sound, as on cassette or CD player (cf. play.stop, play.pause, play.start, play.fast.reverse).
(or: ) [test: &work;]
&work; - work in progress/under construction. Often added to a document that is in a very preliminary state. (The icon is based on the traffic sign of a road worker and a heap of sand. In countries where the sign is unknown or looks different, the entity may have to be displayed with a different icon.)
[test: &www;]
&www; - The World-Wide Web. To refer to the WWW as a whole, to mark a URL, etc.
[test: &html;]
&html; - HTML. Information about HTML, mark a document as being in HTML, link to an HTML version, etc.

DTD fragment

As is usual with SGML entities defined as system data, the part after `system' is arbitrary and should be redefined as appropriate by implementations.

<!entity archive                system "[archive                ]">
<!entity audio                  system "[audio                  ]">
<!entity binary.document        system "[binary.document        ]">
<!entity binhex.document        system "[binhex.document        ]">
<!entity calculator             system "[calculator             ]">
<!entity caution                system "[caution                ]">
<!entity cd.i                   system "[cd.i                   ]">
<!entity cd.rom                 system "[cd.rom                 ]">
<!entity clock                  system "[clock                  ]">
<!entity compressed.document    system "[compressed.document    ]">
<!entity disk.drive             system "[disk.drive             ]">
<!entity diskette               system "[diskette               ]">
<!entity document               system "[document               ]">
<!entity fax                    system "[fax                    ]">
<!entity filing.cabinet         system "[filing.cabinet         ]">
<!entity film                   system "[film                   ]">
<!entity fixed.disk             system "[fixed.disk             ]">
<!entity folder                 system "[folder                 ]">
<!entity form                   system "[form                   ]">
<!entity ftp                    system "[ftp                    ]">
<!entity glossary               system "[glossary               ]">
<!entity gopher                 system "[gopher                 ]">
<!entity home                   system "[home                   ]">
<!entity html                   system "[html                   ]">
<!entity image                  system "[image                  ]">
<!entity index                  system "[index                  ]">
<!entity keyboard               system "[keyboard               ]">
<!entity mail                   system "[mail                   ]">
<!entity mail.in                system "[mail.in                ]">
<!entity mail.out               system "[mail.out               ]">
<!entity map                    system "[map                    ]">
<!entity mouse                  system "[mouse                  ]">
<!entity new                    system "[new                    ]">
<!entity next                   system "[next                   ]">
<!entity notebook               system "[notebook               ]">
<!entity parent                 system "[parent                 ]">
<!entity play.fast.forward      system "[play.fast.forward      ]">
<!entity play.fast.reverse      system "[play.fast.reverse      ]">
<!entity play.pause             system "[play.pause             ]">
<!entity play.start             system "[play.start             ]">
<!entity play.stop              system "[play.stop              ]">
<!entity previous               system "[previous               ]">
<!entity printer                system "[printer                ]">
<!entity sadsmiley              system "[sadsmiley              ]">
<!entity smiley                 system "[smiley                 ]">
<!entity stop                   system "[stop                   ]">
<!entity summary                system "[summary                ]">
<!entity telephone              system "[telephone              ]">
<!entity telnet                 system "[telnet                 ]">
<!entity text.document          system "[text.document          ]">
<!entity tn3270                 system "[tn3270                 ]">
<!entity toc                    system "[toc                    ]">
<!entity trash                  system "[trash                  ]">
<!entity unknown.document       system "[unknown.document       ]">
<!entity uuencoded.document     system "[uuencoded.document     ]">
<!entity work                   system "[work                   ]">
<!entity www                    system "[www                    ]">

Acknowledgments

The following people contributed in some way: William M. Perry <wmperry@indiana.edu> (additions), Kevin Hughes <kevinh@eit.com> (several shapes, color icons), Dave Raggett <dsr@w3.org> (integration into HTML3), Roy Fielding <fielding@ics.uci.edu> (cleaning up some of the bitmaps), Andy Polyakov (color icons).


W3C: World-Wide Web Consortium
Bert Bos, 31 Jan 1996