List Tag - UL, OL, DL

Lists can be great tools for presenting data on a webpage.

Their various types can be used separately or they can be nested within each other to present complicated data displays in an organized manner.

Lists can be used for other purposes like creating drop down menus like the one used on the top of this page.

There are 3 different kinds of lists which can be displayed using HTML. They are: Unordered, Ordered and Definition lists.

Most inline attributes for setting list types are deprecated.

Use style sheets to set types and attributes.

Note: Items in a list do require a closing tag for w3c compliance. </li>

Unordered Lists - UL

List items in an unordered list are preceded by a bullet.

Bullet options:
disc
square
circle
none

Examples:
list-style : disc
list-style-type : circle

To remove the bullet:
list-style : none
list-style-type : none

👉See Also: Nesting Lists to Create Drop Down Menus

The Basics

Unordered list:

The unordered list
The ordered list
The definition list

The Code:


<ul style="list-style: circle">
<li>The unordered list</li>
<li>The ordered list</li>
<li>The definition list</li>
</ul>

The unordered list
The ordered list
The definition list

Using Images and WingDings

Bullet images can be used to dress up your unordered lists.

Item 1
Item 2
Item 3

The code is very simple.


<ul style="list-style-image: url(bullets/starviolet.gif);">   
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Using wingdings

First Item
Second Item
Third Item

👉NOTE: You can add text-shadow to most of them to make them stand out.🐞

How to Copy

To place the wingding in your style sheet hold down the left mouse button and run it over the wingding to highlight it.

Then Right click while highlighted, copy and then paste it into the style sheet.

👉See: Our WingDing Collection

HTML
<ul id="ladybug">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

CSS
#ladybug li::marker { content: "🐞 "; font-size: 2rem; }

#ladybug li::marker { content: "🐞 "; font-size: 2rem; text-shadow: 1px 1px 2px #000}

Ordered Lists - OL

Ordered List Types:
The items of an ordered list are preceded by letters or numbers instead of bullets.

Types of ordered lists are set using style sheets.

Examples:
list-style : lower-alpha
list-style-type : integer
Types of ols
integer
lower-alpha
upper-alpha,
lower-roman
upper-roman

The Start attribute used in earlier versions of HTML is Deprecated.

You designate the starting letter or number in an ordered list using the value attribute in the list item tag as shown.

The choices are:
Integers
1,2,3..... 
Letters
Upper Case
A,B,C... 
Lower Case
a,b,c.... 
Roman Numerals 
Upper Case I,II,III...
Lower Case i,ii,iii....

Ordered list (Integer):

Business Plan
Obtain Licensing
Obtain Financing


The Code:
<ol style="list-style-type: integer; ">
<li value="5">Business Plan</li>
<li>Obtain Licensing</li>
<li>Obtain Financing</li>
</ol>

Ordered list (Lower alpha):

Business Plan
Obtain Licensing
Obtain Financing

The Code:
<ol style="list-style-type: lower-alpha">
<li value="5">Business Plan</li>
<li>Obtain Licensing</li>
<li>Obtain Financing</li>
</ol>

Definition Lists - DL

The definition list is handy for displaying a list of terms and their definitions. The definition <dd> is automatically indented below its associated term <dt>.

Definition list:

Aardvark: An anteater. Animal with a very long snout.
Orangutan: A monkey with very long arms.
Zebra: A pony with stripes.

An easy way to remember which tag goes where: <dt> = Define Term <dd> = Define Definition

The Code:

<dl>
<dt>Aardvark</dt>
<dd>An anteater.  Animal with a very long snout.</dd>
<dt>Orangutan</dt>
<dd>A monkey with very long arms.</dd>
<dt>Zebra</dt>
<dd>A pony with stripes.</dd>
</dl>

The </dt> closing tag is not required but considered good practice to use it.

Nesting Lists

Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.

Nested lists are often used to make Drop Down Menus using CSS.

🔺