1. UNORDERED LISTS
By J.R. Basham

2. The Three Types of Lists
Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online.
When we want to use a list on a website, HTML provides three different types to choose from: unordered, ordered, and description lists. Choosing which type of list to use—or whether to use a list at all—comes down to the content and the most semantically appropriate option for displaying that content.
Unordered Lists
<ul><li></li></ul>
Item
Ordered Lists
<ol><li></li></ol>
First Item
Second Item
Third Item
Fourth Item
Description Lists
<dl><dd></dd><dt></dt></dl>
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
Cat
- A small domesticated carnivorous mammal with soft fur, a short snout, and retractile claws. It is widely kept as a pet or for catching mice, and many breeds have been developed.   

3. Now that you know what the three types are… When do you use unordered lists?
An unordered list is a list in which the order of the list items does not matter.
Some common places you can use unordered lists
• When you create a navigation bar
• When you want to list out ideas
• When you are creating a image gallery
• Listing out a side bar with categories
• E-commerce stores use lists for products

4. Do’s and Don’ts
Do’s
Put the <ul> tag at the beginning and the </ul> closing tag at the end
Put the <li></li> tags inside the <ul> opening and closing tag
You can nest <ul><ol><dd> tags within a <li> tag to make additional sub menu lists
You can put <div> or <nav> opening and closing tags outside the <ul> tags
Don’ts
Lone wolf <li> tags default to <ul> tags
Do not put a <div> tag inside the list.
Example:
<ul>
<div>
<li></li>
</div>
</ul>

5. How do you do it? Result Grocery Lists Apples Oranges Bread Milk
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The ul element opens and closes an unordered list. The items on the list are contained between list item, li, tags.
The list items will be marked with bullets (small black circles) by default:
HTML
<h3>Grocery Lists</h3>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bread</li>
<li>Milk</li>
<li>Chicken</li>
</ul>
Result
Grocery Lists
Apples
Oranges
Bread
Milk
Chicken

6. How do you get rid or change the default black discs?
The CSS list-style-type property is used to define the style of the list item marker:
Here common style type options:
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: none;
For Full list of options go to the link below
US/docs/Web/CSS/list-style-type
< ul style="list-style-type: square" >
<li>Apples</li>
<li>Oranges</li>
<li>Grapes</li>
</ul>

7. Using an image for the marker
You may feel that you do not have enough options in the style types that are available. You can also create a marker using an image.
HTML
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS
<style>
li {
background: url("arrow.png") 0 no-repeat;
list-style-type: none;
padding-left: 12px; }
</style>
Result
NOTE: You can also use: “list-style-image: url("arrow.png ");” The difference is as soon as you display the list “inline” it disappears. In that case use “background: url()” instead.

8. List style position HTML <ul> <li>Cupcakes...</li>
<li>Sprinkles...</li>
</ul>
CSS
ul {
list-style-position: inside; }
Cupcakes – One of the
best desserts known to ever exist, especially when topped with cream cheese frosting
Sprinkles – One of the
most popular toppings for cupcakes, adding that extra bit of decoration and sugar

9. Displaying a List HTML <ul> <li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS
li {
display: inline-block;
margin: 0 10px; }
RESULT
Orange Green Blue

10. Floating Lists HTML <ul> <li>Home</li>
<li>Rivers</li>
<li>FAQ</li>
</ul>
CSS
li {
float: left;
margin: 0 10px;
list-style-image: url("img/phone.png"); }
footer {
clear: both;
RESULT

11. SOURCES
definitions