HTML Lists: Types and Usage in Web Development
☰Fullscreen
Table of Content:
- Unordered lists
- <ul> Element to Create Unordered Lists
- Live Preview
- Live Preview
- Live Preview
- Live Preview
- Live Preview
- Unordered HTML List - Choose List Item Marker
- Ordered lists
- Live Preview
- Live Preview
- Live Preview
- Live Preview
- Live Preview
- Live Preview
- Using the start Attribute to Change the Starting Number in Ordered Lists (Deprecated)
- Live Preview
- Definition Lists
- Live Preview
- Nesting Lists
- Live Preview
- Live Preview
- Related Questions
- Related Assignment
- Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.
There are many reasons you might want to add a list to your pages, from putting your five favorite albums on your homepage to including a numbered set of instructions for visitors to follow:
You can create four types of lists in HTML:Unordered lists: which are like lists of bullet points.
Ordered lists: which use a sequence of numbers or letters instead of bullet points.
Definition lists: which allow you to specify a term and its definition.
Nested Lists: which allow you to specify a lists inside lists.
Unordered lists
<ul> Element to Create Unordered Lists
<ul> element: which stands for unordered list.
<li> element: the li stands for list item.
<span class="pln"> </span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Bullet point number one </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Bullet point number two </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Bullet point number three </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span>
Live Preview
Example - Disc
<span class="pln"> </span><span class="tag"><h3></span><span class="pln">List of Language:</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">-</span><span class="pln">type</span><span class="pun">:</span><span class="pln">disc</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">HTML</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">C Programming</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Java Programming</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span>
Live Preview
Example - Circle
<span class="pln"> </span><span class="tag"><h3></span><span class="pln">List of Books:</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">-</span><span class="pln">type</span><span class="pun">:</span><span class="pln">circle</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Solution of Life</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Mother</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Education life and achievemens</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span>
Live Preview
Example - Square
<span class="pln"> </span><span class="tag"><h3></span><span class="pln">List of Reason to live life:</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">-</span><span class="pln">type</span><span class="pun">:</span><span class="pln">square</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">smile</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">help</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">love</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">sacrifice</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">forgiveness</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span>
Live Preview
Example - None
<span class="pln"> </span><span class="tag"><h3></span><span class="pln">Steps to Change Your Life</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">-</span><span class="pln">type</span><span class="pun">:</span><span class="pln">none</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Define success</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Visualize that success</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Forget entitlement</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Think small to think big</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Consistency is key</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Prioritize</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Delegate</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Find collaborators</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Stay motivated</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Take stock and try again tomorrow</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span>
Live Preview
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Ordered lists
Sometimes, you want your lists to be ordered. In an ordered list, rather than prefixing each point with a
bullet point, you can use either numbers (1, 2, 3), letters (A, B, C), or Roman numerals (i, ii, iii) to prefix
the list item.
An ordered list is contained inside the <ol> element. Each item in the list should then be nested inside
the <ol> element and contained between opening <li> and closing </li> tags
Example - None
<span class="pln"> </span><span class="tag"><ol></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Point number one </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Point number two </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Point number three </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
| Type | Description | Example |
|---|---|---|
| type="1" | The list items will be numbered with numbers (default) | 1, 2, 3, 4, 5 |
| type="A" | The list items will be numbered with uppercase letters | A, B, C, D, E |
| type="a" | The list items will be numbered with lowercase letters | a, b, c, d, e |
| type="I" | The list items will be numbered with uppercase roman numbers | I, II, III, IV, V |
| type="i" | The list items will be numbered with lowercase roman numbers | i, ii, iii, iv, v |
Example - Numbers:
<span class="pln"> </span><span class="tag"><h4></span><span class="pln">List of Bad habits:</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Swearing</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Trichotillomania</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Picking Your Nose</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Smoking Cigarettes</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Biting Fingernails</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Drinking Coffee</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Drinking Tea</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Hair picking</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Watching Reality Television</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Fast Food</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Example - Uppercase Letters:
<span class="pln"> </span><span class="tag"><h4></span><span class="pln">List of Bad habits:</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"A"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Alcohol (if you think you may be an alcoholic, please get professional help)</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Emotional Shopping</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Spending On Credit Cards</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Facebook</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Twitter</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Reddit</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Candy</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating White Sugar</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Chocolate</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Drinking Soda/Pop</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Example - Lowercase Letters:
<span class="pln"> </span><span class="tag"><h4></span><span class="pln">List of Bad habits:</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"a"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Obsessively Checking iPhone/iPad</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Meat</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Video Games</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Cracking Your Knuckles</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Speaking With Your Mouth Full</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Talking To Yourself</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Using Slang</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Dairy</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Gluten</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Picking Your Teeth In Public</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Example - Uppercase Roman Numbers:
<span class="pln"> </span><span class="tag"><h4></span><span class="pln">List of Bad habits:</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"I"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Forgetting To Shave</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Going To The Club</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Using Your Maiden Name</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Humming To Yourself</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Excessive Salt</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">All Work And No Play</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Chewing Gum</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Smoking cigarettes</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Biting Your Pen</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Nibbling While Cooking</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Example - Lowercase Roman Numbers:
<span class="pln"> </span><span class="tag"><h4></span><span class="pln">List of Bad habits:</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"i"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Overspending</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Overeating</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Snacking</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Hair Picking </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Skin Picking</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Not Holding Eye Contact</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Interrupting Someone</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Sleeping-in</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Skipping The Gym</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Smoking</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Using the start Attribute to Change the Starting Number in Ordered Lists (Deprecated)
If you want to specify the number that a numbered list should start at, you can use the start attribute
on the <ol> element. The value of this attribute should be the numeric representation of that point in the
list, so a E in a list that is ordered with capital letters would be represented by the value 5
Example
<span class="pln"> </span><span class="tag"><h4></span><span class="pln">List of Bad habits:</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"A"</span><span class="pln"> </span><span class="atn">start</span><span class="pun">=</span><span class="atv">"5"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Saying &ldquo;Ummm&rdquo; And &ldquo;Ahhh&rdquo;</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Saying Lie</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Staying Up Late</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Sleeping With Makeup</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Lying</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Overmedicating</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Playing Kingdom Rush</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Eating Too Fast / Not Chewing</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Skipping Breakfast</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Not Protecting Yourself From The Sun</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Definition Lists
The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the
<dl> element. The <dl> element then
contains alternating <dt> and <dd> elements. The content of the <dt> element is the term you will be
defining. The <dd> element contains the definition of the previous <dt> element. For example, here is a
definition list that describes the different types of lists in HTML.
Example
<span class="pln"> </span><span class="tag"><dl></span><span class="pln"> </span><span class="tag"><dt></span><span class="pln"> Unordered List </span><span class="tag"></dt></span><span class="pln"> </span><span class="tag"><dd></span><span class="pln"> A list of bullet points. </span><span class="tag"></dd></span><span class="pln"> </span><span class="tag"><dt></span><span class="pln"> Ordered List </span><span class="tag"></dt></span><span class="pln"> </span><span class="tag"><dd></span><span class="pln"> An ordered list of points, such as a numbered set of steps. </span><span class="tag"></dd></span><span class="pln"> </span><span class="tag"><dt></span><span class="pln"> Definition List </span><span class="tag"></dt></span><span class="pln"> </span><span class="tag"><dd></span><span class="pln"> A list of terms and definitions. </span><span class="tag"></dd></span><span class="pln"> </span><span class="tag"></dl></span><span class="pln"> </span>
Live Preview
Nesting Lists
List can be nested (lists inside lists):
Example
<span class="pln"> </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"A"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item one </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item two </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item three </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item four </span><span class="tag"><ol</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"a"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item 4.1 </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item 4.2 </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item 4.3 </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln"> Item Five </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ol></span><span class="pln"> </span>
Live Preview
Note: List items can contain new list, and other HTML elements, like images and links, etc.
Example
<span class="pln"> </span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Coffee</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Tea </span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Black tea</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Green tea</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li></span><span class="pln">Milk</span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span>
Live Preview
- Question 1: What are some of the common lists that can be used when designing a page?
- Question 2: Is there any way to keep list elements straight in an HTML file?
- Question 3: How do you change the number type in the middle of a list?
- Question 4: State bullet types available in HTML
- Question 5: What is the difference between the directory and menu lists and the unordered list?
- Question 6: Can you change the color of bullets?
- Question 7: What happens if the list-style-type property is used on a non-list element like a paragraph?
Related Questions
- Assignment 1: Write HTML code for the following list