HTML Lists

HTML has 3 types of lists: unordered-lists <ul>, ordered lists <ol> and definition lists <dl>. <ul> and <ol> lists share the same syntax, as follows:

Syntax

<list-type>
 <li>text</li>
</list-type>

The list-type is either <ul> or <ol>. <li> means list-item.

Unordered Lists

Unordered lists by default appear as bullet points.

Example

<ul>

<li>Audi</li>
<li>BMW</li>
<li>Lexus</li>
<li>Ferrari</li>

</ul>

Output

Ordered Lists

Ordered lists by default will appear as numbers starting from 1. Ordered lists can be useful for giving simple instructions. The following shows how to log off your computer using CMD (only try it if you want to log off).

Example

<ol>

<li>Click Start</li>
<li>In the search box type CMD</li>
<li>Click CMD</li>
<li>Type <b>shutdown /l</b> </li>

</ol>

Output

Definition Lists

Definition lists are slightly different; instead of having one element they have two. By default, the definition will be indented.

Syntax

<dl>
<dt> Text </dt>
<dd> text </dd>
</dl>

<dt> means definition term and <dd> is definition.

Example

<dl>

  <dt>Iphone 5</dt>
  <dd>Iphone 5 is a smartphone developed by Apple Inc, it was released in September 2012</dd>

  <dt>Samsung Galaxy S2</dt>
  <dd>Samsung Galaxy S2 is a smartphone developed by Samsung, it was released in 2011.</dd>

</dl>

Output

Formatting Lists

You can format lists in several ways, and lists have these CSS properties:

Property	Values
list-style-type	Any of these values: armenian | circle | decimal | decimal-leading-zero | disc | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | square | upper-alpha | upper-roman | none | inherit | initial
list-style-image	Any of these values: url(url to image) | none | inherit | initial
list-style-position	Any of these values: inside | outside | hanging | inherit | initial

Example

<ul style="list-style-type:armenian; list-style-position:inside;">
<li>This</li>
<li>is</li>
<li>a</li>
<li>list</li>
</ul>

Output

Nested Lists

It is also possible to have nested lists, which are very useful for drop-down menus. You can mix the list type and have an unordered list nested in a ordered list, or vice-versa.

Example

<ul>
<li>This</li>
    <li>is</li>
    <li>a<li>
    <ol>
    <li>Nested</li>
        <li>List</li>
        <li>Item</li>   
    </ol>
</ul>

Output