UNORDERED LISTS By J.R. Basham

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.   

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

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>  

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

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 https://developer.mozilla.org/en- US/docs/Web/CSS/list-style-type < ul style="list-style-type: square" > <li>Apples</li> <li>Oranges</li> <li>Grapes</li> </ul>

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.

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

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

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  

SOURCES https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type http://www.w3schools.com/html/html_lists.asp http://html.com/lists/ http://www.google.com definitions http://learn.shayhowe.com/html-css/creating-lists/