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

  • Audi
  • BMW
  • Lexus
  • Ferrari

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

  1. Click Start
  2. In the search box type CMD
  3. Click CMD
  4. Type shutdown /l

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

Iphone 5
Iphone 5 is a smartphone developed by Apple Inc, it was released in September 2012
Samsung Galaxy S2
Samsung Galaxy S2 is a smartphone developed by Samsung, it was released in 2011.

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

  • This
  • is
  • a
  • list

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

  • This
  • is
  • a
    1. Nested
    2. List
    3. Item