HTML Tutorial – 12 – Lists

HTML offer three types of lists: ordered, unordered and definition.

Ordered list

The ordered, or numbered, list <ol> uses the list item element <li> to specify each item.

<ol>
 <li>First item</li> 
 <li>Second item</li> 
</ol>

The end tag for the list item is optional.

<ol>
 <li>First item 
 <li>Second item
</ol>

The numerals for the ordered list can be changed using the type attribute. Arabic numbers (“1″) are used by default, but the type can also be set to for example lower or uppercase letters (“a”, “A”) or roman numerals (“i”, “I”).

<ol type="i">
 <li>First item</li> 
 <li>Second item</li> 
</ol>

The start attribute sets the initial value for the list. Likewise, the value attribute can be used to set the value for a specific list item.

<ol start="10"> 
 <li>First item</li> 
 <li value="20">Second item</li>
</ol>

Unordered list

The unordered, or bulleted, list <ul> uses the list item element <li> just as the ordered list.

<ul>
 <li>First item</li> 
 <li>Second item</li>
</ul>

Its default marker is a disc, which can be changed to either a circle or square using the type attribute.

<ul type="circle">
 <li>First item</li> 
 <li>Second item</li>
</ul>

Definition list

The definition, or description, list <dl> consists of a series of definition terms <dt> paired with definition data <dd>.

<dl>
 <dt>Definition term</dt>
 <dd>Definition data</dd>
</dl>

Nesting lists

Lists may be nested and different list types can be mixed together.

<ol>
 <li>First item
  <ul type="square">
   <li>First Subitem
   <li>Second Subitem
  </ul>
 <li>Second item
</ol>

Recommended reading:
Sams - Teach Yourself HTML and CSS in 24 Hours

PVT book:
Handbook of C++ Syntax