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.
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
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.
List Item 1
List Item 2
List Item 3
An ordered list is created with the <ol> tag enclosing
list items identifed with <li> (list item) tags.
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.
List Item 1
List Item 2
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.
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:
List Item A
List Item B
List Item C
List Item D
List Item E
This is a continuation of the list:
List Item F
List Item G
List Item H
List Item I
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.