10 Lists

10.1 Introduction to lists

• Unordered information.
• Ordered information.
• Definitions.

The previous list, for example, is not ordered, it was created by an element the UL :

  <UL>
 <LI> A random information. 
 <LI> Ordered information. 
 <LI> Definitions. 
 </ UL>

An ordered list created by using the element OL , may contain information which is important in order, for example, the recipe:

1. Thoroughly blend dry ingredients.
2. Pour the liquid.
3. Mix 10 minutes.
4. Bake for one hour at 300 degrees.

Definition lists, created using the element of the DL , may contain a number of pairs of term / definition (although definition lists may have other applications). For example, a list of definitions can be used in product advertising:

Low price

The new model of this product is much cheaper than the previous one!

Simply work

We've changed the product so that it is now easy to work with!

Safe for children

You can leave your children in the room, and the product will not cause them harm (not guaranteed).

it is defined in HTML as follows:

  <DL>
 <DT> <STRONG> Low price </ STRONG>
 <DD> The new model of this product is much cheaper than the previous one!
 <DT> <STRONG> Easier work </ STRONG>
 <DD> We've changed the product so that it is now easy to work with!
 <DT> <STRONG> Safe for kids </ STRONG>
 <DD> You can leave your children in the room, and the product will not cause them harm (not guaranteed).
 </ DL>

Lists can be nested, different types of lists can be used together, as in the following example, where a list of definitions contains an unordered list (the ingredients) and an ordered list (the procedure):

Ingredients:

• 100 g flour
• 10g sugar
• 1 cup water
• 2 eggs
• salt pepper

Procedure:

1. Thoroughly mix the dry ingredients.
2. Pour liquid ingredients.
3. Mix 10 minutes.
4. Bake for one hour at 300 degrees.

Remarks:

You can add raisins.

The exact representation of the three list types depends on the user agent. Do not use the lists to indent text. This is done using stylesheets.

10.2 Unordered lists ( the UL ), ordered lists ( the OL ), and list items ( the LI )

  <The ELEMENT! The UL - - (the LI) + - unordered list ->
 <! ATTLIST UL
  % attrs;
  - % Coreattrs , % the i18n , % events -
  >
 <The ELEMENT! The OL - - (the LI) + - ordered list ->
 <! ATTLIST OL
  % attrs;
  - % Coreattrs , % the i18n , % events -
  >

Start tag: required, End tag: required

  <The ELEMENT! The LI - About ( % flow; ) * - list item ->
 <! ATTLIST LI
  % attrs;
  - % Coreattrs , % the i18n , % events -
  >

Start tag: required, End tag: optional

Ordered and unordered lists generated identically except that visual user agents numbered ordered lists. User agents may present those numbers in several ways. Unordered list items are not numbered.

Both types of lists are made up of elements of the list sequences defined element the LI (whose end tag may be omitted).

  <UL>
  <LI> ... first list item ... <LI> ... second list item ...

  ...
 </ UL>

Lists can be nested:

  <UL>
  <LI> ... Level one, number one ... <OL>
 
  <LI> ... Level two, number one ... <LI> ... Level two, number two ... <OL start = "10">
 
  <LI> ... The level three, number one ... </ OL>
 
  <LI> ... Level two, number three ... </ OL>
 
  <LI> ... Level one, number two ...

 </ UL>

 <Ol>
 <Li value = "30"> element number 30 of the list.
 <Li value = "40"> list item number 40.
 <Li> element number 41 of the list.
 </ Ol>

10.3 Definition lists : the elements of the DL , the DT and DD

  <! - List of definitions - the DT - term, DD - its definition ->
 <The ELEMENT! The DL - - (the DT | the DD) + - definition list ->
 <! ATTLIST DL
  % attrs;
  - % Coreattrs , % the i18n , % events -
  >

Start tag: required, End tag: required

  <The ELEMENT! The DT - About ( % the inline; ) * - the term ->
 <The ELEMENT! The DD - About ( % flow; ) * - determination ->
 <ATTLIST (DT | DD)!
  % attrs;
  - % Coreattrs , % the i18n , % events -
  >

Start tag: required, End tag: optional

lists definitions differ slightly from other types of lists - that the elements consist of two parts: the terms and definitions. The term is denoted by an element DT and can only have a built-in content. Description of the element indicated by DD , having a block-level contents.

 
 <DL>
  <DT> Dweeb
  <DD> young excitable person who may mature
  into a <EM> Nerd </ EM> or <EM> Geek </ EM>

  <DT> Cracker
  <DD> hacker on the Internet

  <DT> Nerd
  <DD> male so into the Net that he forgets
  his wife's birthday
 </ DL>

 <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 use for the element DL , for example, counting may be dialogs where each element DT is the speaker, and each element DD contains the words.

10.3.1 Visual display lists

Visual user agents generally shift the nested lists according to the level of nesting.

For elements OL and UL attribute type determines the generation options for visual user agents.

For element UL possible values of the attribute type are disc, square, and circle. The default value used depends on the level of nesting of the current list. These values ​​are not case sensitive.

Each value is dependent on the user agent. User agents should attempt to present "disc" as a small filled circle, "circle" - a circle, a "square" as a small square.

Graphical user agents can generate them as:

for the value "disc"
for the value "circle"
for the value of "square"

For the element OL possible values of the attribute type are shown in the table below (they are case-sensitive):

Remember that using the attribute type is undesirable , and list styles should be determined by a style sheet.

  <STYLE type = "text / css">
 OL.withroman {list-style-type: lower-roman}
 </ STYLE>
 <BODY>
 <OL class = "withroman">
 <LI> One Step ... 
 <LI> Step two ...
 </ OL>
 </ BODY>

Generation of a definition list also depends on the user agent. For example, list:

 <DL>
  <DT> Dweeb
  <DD> young excitable person who may mature
  into a <EM> Nerd </ EM> or <EM> Geek </ EM>

  <DT> Cracker
  <DD> hacker on the Internet

  <DT> Nerd
  <DD> male so into the Net that he forgets
  his wife's birthday
 </ DL>

It may be generated as follows:

 Dweeb young excitable person who may mature into a Nerd or Geek Cracker hacker on the Internet Nerd male so into the Net that he forgets his wife's birthday 

10.4 The elements DIR and MENU

Using elements DIR and MENU undesirable .

The formal definition of cm. In DTD Transitional .

Element DIR was designed to create a multi-page directory listings. Element MENU intended to be used in the menu lists, consisting of a single column. Both of these elements have the same structure as the element UL , differing only in the generation. In practice, user agents generate lists DIR or MENU in the same way as the list of the UL .

It is strongly recommended that you use instead of these elements is an element of the UL .