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
- Click Start
- In the search box type CMD
- Click CMD
- 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
- Nested
- List
- Item