You are Here: HTML Home - HTML List

HTML List

Unordered Lists (ul)
ordered list (ol)
Nested Lists
Definition Lists

Unordered Lists (ul)    Top^

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

Result
  • List Item 1
  • List Item 2
  • List Item 3
Property: Value    
list-style-type disc
  • List Item 1
 type="disc"
circle
  • List Item 1
 type="circle"
square
  • List Item 1
 type="square"
none
  • List Item 1
 style="list-style-type:none;"
list-style-image url(url)
  • List Item 1
 style=" list-style-image:url(../img/g.gif)"

Ordered Lists (ol)    Top^

An ordered list is a series of items preceded by sequence numbers and set off from surrounding text by single blank lines.
Code
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Result
  1. List Item 1
  2. List Item 2
  3. List Item 3
Property: Value    
list-style-type decimal
  1. List Item 1
 style="list-style-type:decimal;"
upper-alpha
  1. List Item 1
 style="list-style-type:upper-alpha;"
lower-alpha
  1. List Item 1
 style="list-style-type:lower-alpha;"
upper-roman
  1. List Item 1
 style="list-style-type:upper-roman;"
lower-roman
  1. List Item 1
 style="list-style-type:lower-roman;"
none
  1. List Item 1
 style="list-style-type:none;"

Nested Lists    Top^

Ordered & unordered lists can be nested inside each other with each list having its own numbering scheme. In the following example an outer list is numbered with upper-case Roman numerals and an inner list is numbered with lower-case Roman numerals. Numbering characters are assigned to particular lists by using ID selectors.

<style type="text/css">
  ol#List1 {list-style-type:upper-roman}
  ol#List2 {list-style-type:lower-roman}
</style>

<ol id="List1">
  <li>List Item 1</li>
  <li>List Item 2
      <ol id="List2">
        <li>List Item 2a</li>
        <li>List Item 2b</li>
      </ol>
  </li>
  <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
    1. List Item 2a
    2. List Item 2b
  3. List Item 3

Definition Lists    Top^

A definition list is a series of terms and definitions offset from surrounding text by a single blank line. The terms in the list are blocked at the left margin; definitions are indented and word wrapped on the following lines.

Recall that a definition list is enclosed inside <dl> tags and contains one or more <dt> tags listing the terms to be defined. Each term has an associated <dd> tag surrounding its definition. An example definition list is coded below

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

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





web counter