Unordered Lists
The HTML <ul> tag defines an unordered list.
Unordered HTML List
A list that is not sorted begins with the <ul> tag. The <li> tag comes first on every list item.
By default, the list elements will be indicated with bullets, which are tiny black circles:
Example
<ul>
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ul>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:
| 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 |
Example - Disc
<ul style="list-style-type:disc;">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ul>
Example - Circle
<ul style="list-style-type:circle;">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ul>
Example - Square
<ul style="list-style-type:square;">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ul>
Example - None
<ul style="list-style-type:none;">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Water</li>
<li>Ice
<ul>
<li>Hot tea</li>
<li>Cold tea</li>
</ul>
</li>
<li>Air</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Water</li>
<li>Ice
<ul>
<li>Hot tea</li>
<li>Cold tea</li>
</ul>
</li>
<li>Air</li>
</ul>
Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.
Horizontal List with CSS
With CSS, HTML lists may be styled in a variety of ways.
One common method for creating a navigation menu is to style a list horizontally:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Chapter Summary
- Use the HTML <ul> element to define an unordered list
- Use the CSS list-style-type property to define the list item marker
- Use the HTML <li> element to define a list item
- Lists can be nested
- List items can contain other HTML elements
- Use the CSS property float:left to display a list horizontally
unordered list
HTML
ul tag
li tag
list item marker
list-style-type
disc
circle
square
none
nested list
horizontal list
CSS
navigation menu
float:left
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML Unordered Lists: A Fundamental Building Block
When it comes to structuring content on web pages, the unordered list (HTML tag) is a fundamental element. Unordered lists are used to display a collection of items, typically denoted by bullet points or other list item markers.
The tag is paired with the ` (list item) tag to create individual list items. By default, unordered lists use a disc-shaped marker, but you can customize the list item marker using the CSS `list-style-type` property, with options like circle, square, or even removing the marker entirely.
Unordered lists can also be nested, allowing you to create hierarchical structures. This is particularly useful for building navigation menus or displaying complex information in a structured way.
To create a horizontal list, you can float the list items using CSS `float:left`. This is a common technique for designing navigation bars and other inline list-based layouts.
Understanding the proper use of unordered lists is a crucial skill for any web developer or designer. They provide a semantic and organized way to present information, making your HTML more accessible and easier to style with CSS.
