10. Lists10.1 Introduction to listsHTML offers authors several mechanisms for specifying lists of information. Alllists must contain one or more list elements. Lists may contain: - Unordered information.
- Ordered information.
- Definitions.
The previous list, for example, is an unordered list, created with the ULelement: <UL><LI>Unordered information. <LI>Ordered information. <LI>Definitions. </UL> An ordered list, created using the OL element, should contain informationwhere order should be emphasized, as in a recipe: - Mix dry ingredients thoroughly.
- Pour in wet ingredients.
- Mix for 10 minutes.
- Bake for one hour at 300 degrees.
Definition lists, created using the DL element, generally consist of aseries of term/definition pairs (although definition lists may have otherapplications). Thus, when advertising a product, one might use a definitionlist: - Lower cost
- The new version of this product costs significantly less than the previousone!
- Easier to use
- We've changed the product so that it's much easier to use!
- Safe for kids
- You can leave your kids alone in a room with this product and they won'tget hurt (not a guarantee).
defined in HTML as: <DL><DT><STRONG>Lower cost</STRONG><DD>The new version of this product costs significantly less than theprevious one!<DT><STRONG>Easier to use</STRONG><DD>We've changed the product so that it's much easier to use!<DT><STRONG>Safe for kids</STRONG><DD>You can leave your kids alone in a room with this product andthey won't get hurt (not a guarantee).</DL> Lists may also be nested and different list types may be used together, asin the following example, which is a definition list that contains an unorderedlist (the ingredients) and an ordered list (the procedure): - The ingredients:
- 100 g. flour
- 10 g. sugar
- 1 cup water
- 2 eggs
- salt, pepper
- The procedure:
- Mix dry ingredients thoroughly.
- Pour in wet ingredients.
- Mix for 10 minutes.
- Bake for one hour at 300 degrees.
- Notes:
- The recipe may be improved by adding raisins.
The exact presentation of the three list types depends on the user agent. Wediscourage authors from using lists purely as a means of indenting text. Thisis a stylistic issue and is properly handled by style sheets. 10.2 Unordered lists (UL), ordered lists (OL), and list items (LI)Start tag: required, End tag: required Start tag: required, End tag: optional Attribute definitions - type = style-information [CI]
- Deprecated. Thisattribute sets the style of a list item. Currently available values areintended for visual user agents. Possible values aredescribed below (along with case information).
- start = number [CN]
- Deprecated. ForOLonly. This attribute specifies the starting number of the first item in anordered list. The default starting number is "1". Note that while the value ofthis attribute is an integer, the corresponding label may be non-numeric. Thus,when the list item style is uppercase latin letters (A, B, C, ...), start=3 means "C". When the style is lowercase roman numerals, start=3 means "iii", etc.
- value = number [CN]
- Deprecated. ForLIonly. This attribute sets the number of the current list item. Note that whilethe value of this attribute is an integer, the corresponding label may benon-numeric (see the start attribute).
- compact [CI]
- Deprecated. Whenset, this boolean attribute gives a hint to visual user agents to render thelist in a more compact way. The interpretation of this attribute depends on theuser agent.
Attributes defined elsewhere - id, class (document-wide identifiers)
- lang (languageinformation), dir (textdirection)
- title (element title)
- style (inlinestyle information)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
Ordered and unordered lists are rendered in an identical manner except thatvisual user agents number ordered list items. User agents may present thosenumbers in a variety of ways. Unordered list items are not numbered. Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may beomitted). This example illustrates the basic structure of a list. <UL> <LI> ... first list item... <LI> ... second list item... ...</UL> Listsmay also be nested: DEPRECATED EXAMPLE:
<UL> <LI> ... Level one, number one... <OL> <LI> ... Level two, number one... <LI> ... Level two, number two... <OL start="10"> <LI> ... Level three, number one... </OL> <LI> ... Level two, number three... </OL> <LI> ... Level one, number two...</UL> Details about number order. In orderedlists, it is not possible to continue list numbering automatically from aprevious list or to hide numbering of some list items. However, authors canreset the number of a list item by setting its valueattribute. Numbering continues from the new value for subsequent list items.For example: <ol><li value="30"> makes this list item number 30.<li value="40"> makes this list item number 40.<li> makes this list item number 41.</ol> 10.3 Definition lists: the DL, DT, and DDelements<!-- definition lists - DT for term, DD for its definition --><!ELEMENT DL - - (DT|DD)+ -- definition list --><!ATTLIST DL %attrs; -- %coreattrs, %i18n, %events -- > Start tag: required, End tag: required Start tag: required, End tag: optional Attributes defined elsewhere - id, class (document-wide identifiers)
- lang (languageinformation), dir (textdirection)
- title (element title)
- style (inlinestyle information)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
Definition lists vary only slightly from other types of lists in that listitems consist of two parts: a term and a description. The term is given by theDTelement and is restricted to inline content. The description is given with a DDelement that contains block-level content. Here is an example: <DL> <DT>Dweeb <DD>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM> <DT>Hacker <DD>a clever programmer <DT>Nerd <DD>technically bright but socially inept person</DL> Here is an example with multiple terms and descriptions: <DL> <DT>Center <DT>Centre <DD> A point equidistant from all points on the surface of a sphere. <DD> In some field sports, the player who holds the middle position on the field, court, or forward line.</DL> Another application of DL, for example, is for marking up dialogues, witheach DT naming a speaker, and each DD containing his or her words. 10.3.1 Visual rendering of listsNote. The following is an informative description ofthe behavior of some current visual user agents when formatting lists. Stylesheets allow better control of list formatting (e.g., for numbering,language-dependent conventions, indenting, etc.). Visual user agents generally indent nested lists with respect to the currentlevel of nesting. For both OL and UL, the type attribute specifies rendering optionsfor visual user agents. For the UL element, possible values for the type attribute are disc, square, andcircle. The default value depends on the level of nesting of thecurrent list. These values are case-insensitive. How each value is presented depends on the user agent. User agents shouldattempt to present a "disc" as a small filled-in circle, a "circle" as a smallcircle outline, and a "square" as a small square outline. A graphical user agent might render this as: for thevalue "disc" forthe value "circle" forthe value "square" For the OL element, possible values for the typeattribute are summarized in the table below (they are case-sensitive): Type | Numbering style |
---|
1 | arabic numbers | 1, 2, 3, ... | a | lower alpha | a, b, c, ... | A | upper alpha | A, B, C, ... | i | lower roman | i, ii, iii, ... | I | upper roman | I, II, III, ... |
Note that the type attribute is deprecated and list styles should be handled through stylesheets. For example, using CSS, one may specify that the style of numbers for listelements in a numbered list should be lowercase roman numerals. In the excerptbelow, every OL element belonging to the class "withroman" will have romannumerals in front of its list items. <STYLE type="text/css">OL.withroman { list-style-type: lower-roman }</STYLE><BODY><OL class="withroman"><LI> Step one ... <LI> Step two ...</OL></BODY> The rendering of a definition list also depends on the user agent. Theexample: <DL> <DT>Dweeb <DD>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM> <DT>Hacker <DD>a clever programmer <DT>Nerd <DD>technically bright but socially inept person</DL> might be rendered as follows: Dweeb young excitable person who may mature into a Nerd or GeekHacker a clever programmerNerd technically bright but socially inept person 10.4 The DIR and elementsDIR and MENU are deprecated. See the Transitional DTD for theformal definition. Attributes defined elsewhere - id, class (document-wide identifiers)
- lang (languageinformation), dir (textdirection)
- title (element title)
- style (inlinestyle information)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
The DIR element was designed to be used for creating multicolumndirectory lists. The MENU element was designed to be used for single column menulists. Both elements have the same structure as UL, just different rendering. Inpractice, a user agent will render a DIR or MENU list exactly as a UL list. We strongly recommend using UL instead of these elements. |