XHTML Free Tutorial

Web based School

List Structure

Previous Next


XHTML 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.

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

An unordered list is created with the <ul> tag enclosing listed items identifed with <li> (list item) tags.

<ul>
  <li>list item</li>
  <li>list item</li>
  ...
</ul>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

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.

<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>
  • 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.

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

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

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 or outer-most 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. Current XHTML standards do not promote use of the type attribute and provide other means shown later 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.

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

An ordered list is created with the <ol> tag enclosing list items identifed with <li> (list item) tags.

<ol [start=n]>
  <li>list item</li>
  <li>list item</li>
  ...
</ol>
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

Items in the list are single spaced and word wrapped inside the numbering character. List items can be enclose within <p> tags or separated by <br/> tags to increase line spacing between items.


Deprecated type Attribute

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 type="1" for decimal numerals (the default), type="A" for upper-case letters, type="a" for lower-case letters, type="I" for upper-case Roman numerals, and type="i" for lower-case Roman numerals. The tag <ol type="A"<, for example, produces the following list of alphabetically ordered items.

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

Under XHTML standards the type attribute is deprecated and replaced by a different character styling method described later.


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.

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

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.

The start Attribute

When using decimal numbers for an ordered list you can choose the beginning sequence number by coding the optional start="n" attribute for the <ol> tag. A starting sequence number is needed when an ordered list is interruped by other elements on the page.

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 default numbering beginning with decimal 1 and ending with 5. The second list overrides this default numbering by specifying start="6" in its opening <ol> tag. Thus, the second list is numbered consecutively from 6 through 10.

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

<ol>
  <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 start="6">
  <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>

Note that a start value for an ordered list only works when items are numbered using decimal values. It is not recognized for alphabetic or Roman numeral characters.

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; definitions are indented and word wrapped on the following lines.

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.
<dl>
  <dt>Term 1</dt>
    <dd>Definition text for Term 1</dd>
  <dt>Term 2</dt>
    <dd>Definition text for Term 2</dd>
  ...
</dl>

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.

<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> 

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 time you need a list of items (terms), each followed by an indented paragraph (definitions), you can use a definition list.


Previous Next