MGA Logo

Web Development Tutorials



  
  

List Structures

Listing Elements

HTML 5 provides text structuring in the form of lists. You can produce lists of bulleted items, lists of numbered items, and lists of terms and definitions. The first two lists resemble single-spaced lines of text with the addition of prefixed bullets or numbers. The latter list is similar in display to a series of blockquoted paragraphs.

Unordered Lists

An unordered list is a series of items preceded by bullet characters and set off from surrounding text by blank lines. The list is single spaced and indented from the left margin. Unordered lists should be used when the order of each item in the list is not important. An example unordered list appears in the 3 browsers as shown in Figure 2-17.

  • List Item #1
  • List Item #2
  • List Item #3

Figure 2-17. Browser display of an unordered list.

An unordered list is created with the block-level <ul> container tag enclosing listed items identified with block-level <li> <ul> container tag enclosing listed items identified with block-level <li> (list item) container tags. The general format for an unordered list is shown in Figure 2-18.

<ul>
  <li>list item</li>
  <li>list item</li>
  ...
</ul>

Figure 2-18. General format for unordered list.

For example, the bulleted list shown above in Figure 2-17 is given by the following code.

<ul>
  <li>List Item #1</li>
  <li>List Item #2</li>
  <li>List Item #3</li>
</ul>

Listing 2-10. Code for an unordered list in Figure 2-17.

Items in the list are single spaced and preceded by a bullet character. If text for a list item is wider than the width of the page it is word wrapped and indented inside the bullet character. Items can be enclosed inside <p> tags or <br /> tags can be coded between items to increase line spacing between them. The following list, for example, surrounds list items with <p> tags to leave blank lines between entries. Browser output is shown in Figure 2-19.

<ul>
  <li><p>This is the first item in the list. Text following the bullet
  character is word wrapped inside the bullet. Paragraph tags are used to
  leave blank lines between items in the list.</p></li>
  
  <li><p>This is the second item in the list. Text following the bullet
  character is word wrapped inside the bullet. Paragraph tags are used to
  leave blank lines between items in the list.</p></li>
</ul>

Listing 2-11. Code for an unordered list of wrapped paragraphs.


  • This is the first item in the list. Text following the bullet character is word wrapped inside the bullet. Paragraph tags are used to leave blank lines between items in the list.

  • This is the second item in the list. Text following the bullet character is word wrapped inside the bullet. Paragraph tags are used to leave blank lines between items in the list.

Figure 2-19. Browser display of an unordered list of wrapped paragraphs.

Nested Unordered Lists

Unordered lists can be nested inside each other. For example, a bulleted list appearing inside a second bulleted list appearing inside a third bulleted list is produced by the following code and is displayed in the browser as shown in Figure 2-20. Note that a nested unordered list is part of the list items of its container list. That is, the <ul>...</ul> tags for the nested list appear inside a pair of <li>...</li> tags of <ul>...</ul> tags for the nested list appear inside a pair of <li>...</li> tags of the enclosing list.

<ul>
    <li>List Item 1</li>
    <li>List Item 2
        <ul>
        <li>List Item 2a</li>
        <li>List Item 2b
            <ul>
            <li>ListItem 2b1</li>
            <li>List Item 2b2</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>List Item 3</li>
</ul>

Listing 2-12. Code for nested unordered lists.


  • List Item 1
  • List Item 2
    • List Item 2a
    • List Item 2b
      • ListItem 2b1
      • List Item 2b2
  • List Item 3

Figure 2-20. Browser display of nested unordered lists.

Each nested list is further indented inside its container list. Also, different bullet characters are used for nested lists. By default, a disc character marks the outer-most list, a circle marks the next inner-most list, and a square marks the inner list. Notice that when lists are contained inside other lists that no blank lines surround the interior lists as they do when a single list appears within the normal flow of text on the page.

Deprecated type Attribute

The type="disc|circle|square" attribute can be coded inside the opening <ul> tag in order to specify the style of bullet character to use if different from the default disc character. HTML5 standards do not allow the use of the type attribute and suggest using CSS for specifying bullet characters.

Ordered Lists

An ordered list is a series of items preceded by sequence numbers and set off from surrounding text by single blank lines. By default, the list is numbered with decimal numbers beginning with 1 and numbered consecutively through the last item in the list. The list is single spaced and indented from the left margin in the same way as an unordered list. Ordered lists should be used when the order of each list item is important. An example ordered list is shown below in Figure 2-21.

  1. List Item #1
  2. List Item #2
  3. List Item #3

Figure 2-21. Browser display of an ordered list.

<ol>
    <li>list item</li>
    <li>list item</li>
    ...
</ol>

Figure 2-22. General format for ordered list.

For example, the ordered list shown above in Figure 2-21 is given by the following code.

<ol>
    <li>List Item #1</li>
    <li>List Item #2</li>
    <li>List Item #3</li>
</ol>

Listing 2-13. Code for an ordered list.

Items in the list are single spaced and word-wrapped inside the numbering character. <li> can contain other tags like <p>, <blockquote>, <h1>, and other tags. It is important to remember that <ol><li> and <ul><li> is a structure

Nested Ordered Lists

Ordered lists can be nested inside each other, with subordinate lists indented from the next outer-most list. All nested ordered lists use the same decimal numbering system beginning with decimal 1. For example, the following code produces the numbered lists shown in Figure 2-23.

<ol>
    <li>List Item 1</li>
    <li>List Item 2
        <ol>
        <li>List Item 2.1</li>
        <li>List Item 2.1</li>
        </ol>
    </li>
    <li>List Item 3</li>
</ol>

Listing 2-14. Code for nested ordered lists.


  1. List Item 1
  2. List Item 2
    1. List Item 2.1
    2. List Item 2.2
  3. List Item 3

Figure 2-23. Browser display of nested ordered lists.

Note that when ordered lists are contained inside other ordered lists that no blank lines surround the interior lists as they do when a list appears within the normal flow of page text.

Ordered List Attributes

A type attribute can be coded inside the opening <ol> tag in order to specify one of five different numbering characters. The attribute value can be <ol type='1'> for decimal numerals (the default), <ol type='A'> for upper-case letters, <ol type='a'> for lower-case letters, <ol type='I'> for upper-case Roman numerals, and <ol type='i'> for lower-case Roman numerals. The tag <ol type='A'>, for example, produces the following list of alphabetically ordered items.

<ol type='A'>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

Listing 2-12. Code for changing ordered list numbering.

  1. List Item 1
  2. List Item 2
  3. List Item 3

Figure 2-24. Browser display of <ol type='A'>

You can choose the beginning sequence value of an ordered list by coding the optional <ol start='n'> attribute for the <ol> tag. Here, n must be a valid integer. For instance, a starting sequence value is needed, when an ordered list is interrupted by other elements on the page.

As shown in the output below, two consecutively sequenced lists are separated by a paragraph. The first list begins with "A" and is sequenced through "E" since there are five items in the list. The second list needs to begin its sequence with the sixth letter "F". If a starting value is not specified, sequencing begins anew with "A".

This is the beginning of the list:

  1. List Item A
  2. List Item B
  3. List Item C
  4. List Item D
  5. List Item E

This is a continuation of the list:

  1. List Item F
  2. List Item G
  3. List Item H
  4. List Item I
  5. List Item J

Code for the above lists is shown below. The first ordered list uses upper-case letters (type="A") beginning with "A" and ending with "E". The second list overrides this default sequencing by specifying start="6" in its opening <ol> tag. Thus, the second list is (type="A") beginning with "A" and ending with "E". The second list overrides this default sequencing by specifying start="6" in its opening <ol> tag. Thus, the second list is ordered consecutively from "F" through "J".

<p>This is the beginning of the list.</p>

<ol type='A'>
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
  <li>List Item D</li>
  <li>List Item E</li>
</ol>>

<p>This is a continuation of the list.</p>

<ol type='A' start='5'>
  <li>List Item F</li>
  <li>List Item G</li>
  <li>List Item H</li>
  <li>List Item I</li>
  <li>List Item J</li>
</ol>>

You can reverse the order of the sequence of list markers through the use of the reversed attribute. This is a boolean attribute that can be applied to an <ol> tag in multiple ways. For instance, you could reverse the order of markers through adding the attribute itself without a value, such as in <ol reversed>. Optionally, you could also add a value to the attribute, and set it equal to either "reversed" or a blank string "". For example, <ol reversed='reversed'> and <ol reversed=''> also accomplishes the same effect. This is true of other boolean attributes you may come across in future elements. All of these forms are valid under HTML5. Below is an example of ordered list with the attribute reversed.

  1. List Item 1
  2. List Item 2
  3. List Item 3

Definition Lists

A definition list is a series of terms and definitions offset from surrounding text by blank lines. The terms in the list are blocked at the left margin, and definitions are indented and word wrapped on the following lines. An example definition list is shown in Figure 2-24.

Term 1
This is the Term 1 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.
Term 2
This is the Term 2 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

Figure 2-24. Browser display of a definition list.


<dl>
    <dt>Term 1</dt>
        <dd>Definition text for Term 1</dd>
    <dt>Term 2</dt>
        <dd>Definition text for Term 2</dd>
    ...
</dl>

Figure 2-25. General formats for definition list tags.

A definition list is enclosed inside <dl> tags and contains one or more <dt> (definition term) tags listing the items to be defined. Each definition term has an associated <dd> (definition description) tag enclosing the definition for the term.

The definition list shown above in Figure 2-24 is produced with the following code.

<dl> 
    <dt>Term 1</dt> 
        <dd>This is the Term 1 definition. The definition term appears on 
        a line by itself and is followed by a definition text block.
        The definition is indented and word wrapped.</dd> 
    <dt>Term 2</dt> 
        <dd>This is the Term 2 definition. The definition term appears on 
        a line by itself and is followed by a definition text block.
        The definition is indented and word wrapped.</dd> 
</dl>

Listing 2-15. Code for a definition list.

When displayed in the browser, items in the list are single spaced with no blank lines appearing between the terms. If you wish to include additional line spacing, you can code <p> tags surrounding the definitions or <br /> tags between them.

A definition list, of course, can be used for purposes other than defining terms. Any situation where you have a name and value relationship among content you can employ a definition list. Another example where a definition list might be appropriate is for a frequently asked questions, or FAQ, section of a web site.


TOP | NEXT: Linking Pages