Loading lesson path
Concept visual
Start at both ends
<ul> tag defines an unordered (bulleted) list.
<ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:
<ul>
Formula
< li > Coffee </li >
< li > Tea </li >
< li > Milk </li ></ul>
Formula
Unordered HTML List - Choose List Item MarkerFormula
list - style - type property is used to define the style of the list item marker. It can have one of the following values: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
Example - Disc
<ul style="list-style-type:disc;">Formula
< li > Coffee </li >
< li > Tea </li >
< li > Milk </li ></ul>
Example - Circle
<ul style="list-style-type:circle;">Formula
< li > Coffee </li >
< li > Tea </li >
< li > Milk </li ></ul>
Example - Square
<ul style="list-style-type:square;">Formula
< li > Coffee </li >
< li > Tea </li >
< li > Milk </li ></ul>
Example - None
<ul style="list-style-type:none;">Formula
< li > Coffee </li >
< li > Tea </li >
< li > Milk </li ></ul>
Lists can be nested (list inside list):
<ul>
Formula
< li > Coffee </li >
< li > Tea<ul>
Formula
< li > Black tea </li >
< li > Green tea </li ></ul> </li>
Formula
< li > Milk </li ></ul>
A list item ( <li> ) can contain a new list, and other HTML elements, like images and links, etc.
HTML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, to create a navigation menu:
<!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> </body> </html>
You can learn much more about CSS in our CSS Tutorial.
<ul> element to define an unordered list
Formula
list - style - type property to define the list item marker<li> element to define a list item
Use the CSS property float:left to display a list horizontally