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 in the latest version of HTML4.
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.
To designate the bullet selection of DISC, SQUARE or CIRCLE use style sheets. Example: list-style : disc or list-style-type : disc.
To eliminate the bullet use the style sheet code: list-style : none or list-style-type : none.
The Basics
Unordered list:
- The unordered list
- The ordered list
- The definition list
The Code:
<ul style="list-style: disc; margin: 0 5%"> <li>The unordered list</li> <li>The ordered list</li> <li>The definition list</li> </ul>
Unordered list:
- The unordered list
- The ordered list
- The definition list
The Code: <ul style="list-style: square; margin: 0 5%"> <li>The unordered list</li> <li>The ordered list</li> <li>The definition list</li> </ul>
👉See Also: Nesting Lists to Create Drop Down Menus
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); margin: 0 4%"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
So can wingdings
- 🐞 First Item
- 🐞 Second Item
- 🐞 Third Item
<ul style="list-style:none; font-size:1.25rem; margin: 5%"> <li><span style="font-size:30px;">🐞</span> First Item</li> <li><span style="font-size:30px;">🐞</span> Second Item</li> <li><span style="font-size:30px;">🐞</span> Third Item</li> </ul>
NOTE: You can add text-shadow to most of them to make them stand out.🐞
<span style="font-size:40px;text-shadow: 1px 1px 1px #000">🐞</span>
Ordered Lists - OL
Ordered List Types:
The items of an ordered list are preceded by letters or numbers instead of bullets.
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....
Types of ordered lists are set using style sheets. Example: list-style : lower-alpha or list-style-type : integer Choices are: integer, lower-alpha, upper-alpha, lower-roman, upper-roman.