<MENU> With Stylesheet for HTML 2

The first version of Cascading style sheets (CSS1) contained as an appendix a "suggested" style sheet for HTML 2 as an indication of what the defaults should be as to how the various elements are to be displayed. This style sheet contains one of the very few indications of what is meant to be different about <MENU> from <UL>. The complete text of this stylesheet reads as follows:

BODY {
  margin: 1em;
  font-family: serif;
  line-height: 1.1;
  background: white;
  color: black;
}

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
  display: block }

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }

LI { display: list-item }

H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

B, STRONG { font-weight: bolder }  /* relative to the parent */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }

PRE { white-space: pre }

ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 }              /* tight formatting */
LI { margin-left: 3em }

DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }

HR { border-top: solid }        /* 'border-bottom' could also have been used */

A:link { color: blue }          /* unvisited link */
A:visited { color: red }        /* visited links */
A:active { color: lime }        /* active links */

/* setting the anchor border around IMG elements
   requires contextual selectors */

A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }

So let's see how <MENU> looks with this stylesheet difference:

And here, for comparison, is the same using <UL>:

• Italian Porcupine Meat Balls
• Philippine Style Chicken Adobo
• American Sugar Crisp Cookies

So, at least one can see a slight difference, though only in the margin positioning.

Of course, other user agents or different browsers could have given this a more different appearence to demark that this is meant to be a menu and not merely a list, for example the following:

Or even the following:

In the first "HTML 1" published draft (1993) it is mentioned that <MENU> could be used for a more compact form of listing, as for example as seen here (and also using the COMPACT attribute):

In order to be able to illustrate these various styles that <MENU> can take, this file was written in HTML 4.01 Transitional, so that in addition to the basic suggested stylesheet for HTML 2 the STYLE attribute could be used.

Next Level Up