HTML Lists

HTML Lists

(Scroll Down for more List Examples)

Below is a One Column Unordered List

• Item 1
• Item 2
• Item 3

<ul style="list-style: none; "> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ul>

<ul style="list-style: none; "> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ul>

Below is an Unordered list without using list-style: none.
If you do not use list-style: none, you will get bullets in front of each item.

• Item 1
• Item 2
• Item 3

<ul> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ul>


Below is a 2 Column Unordered List using Divs

• Left Item 1
• Left Item 2
• Left Item 3
• Left Item 4
• Left Item 5

• Right Item 1
• Right Item 2
• Right Item 3
• Right Item 4
• Right Item 5

<div style="float: left; width: 50%;"><ul style="list-style: none; "><li>Left Item 1</li><li>Left Item 2</li><li>Left Item 3</li><li>Left Item 4</li><li>Left Item 5</li></ul></div><div style="float: right; width: 50%;"><ul style="list-style: none; "><li>Right Item 1</li><li>Right Item 2</li><li>Right Item 3</li><li>Right Item 4</li><li>Right Item 5</li></ul></div>

Below is a One Column Ordered List using ol instead of ul, which numbers your list items

1. Item 1
2. Item 2
3. Item 3

<ol> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ol>