Unordered List in HTML
Working with List
In this lesson, we will learn how to create and use the unordered list in HTML.
What is Unordered List in HTML
The unordered list is an HTML element that creates a list of items without any particular order. It is commonly used to create navigation menus, lists of items, and other similar content. The <ul> tag is used to create an unordered list. Each list item in the unordered list is defined by the <li> tag and is represented by a bullet point or a symbol, depending on the style chosen.
To create an unordered list in HTML, we first need to open the <ul> tag and add our list items within the <li> tags.
Here's an example of how to create an unordered list in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unordered List Example</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Styles of Bullets in Unordered List
The default style for unordered lists is bullet points (solid circles). You can easily change the style of the bullet using the type attribute to specify a different style. The following are the different types of bullets that are supported:
Disc (Default Style)
The type attribute can be set to "disc" to create solid circle bullets, which is the default bullet style for an unordered list. Here is an example:
Example
<ul type="disc">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>Circle
The type attribute can be set to "circle" to create empty circle bullets for an unordered list. Here is an example:
Example
<ul type="circle">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>Square
The type attribute can be set to "square" to create solid square bullets for an unordered list. Here is an example:
Example
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>None
The type attribute can be set to "none" to create an unordered list without bullets. Here is an example:
Example
<ul type="none">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>Nested Unordered Lists
Unordered lists can also be nested inside an existing list item. It is useful when there are multiple levels of information to present. To nest an unordered list, we simply add another <ul> tag inside an existing <li> tag. Here is an example:
Example
<ul>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>The id Attribute
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <ul> tag and use it to apply a specific style to that particular tag.
Example
<ul id="mylist">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>In the above example, we assign an id attribute to the ul tag with a value mylist. In CSS and JavaScript, we can use the name mylist to access the specific ul tag whose id value is set to the name mylist.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
The class Attribute
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the ul tags and use it to apply a specific style to all the ul tags that belong to a particular class.
Example
<ul class="info">
<li>Cat</li>
<li>Dog</li>
<li>Goat</li>
</ul>
<ul class="info">
<li>India</li>
<li>Australia</li>
<li>Africa</li>
</ul>In the above example, both ul tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both ul tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
The style Attribute
The style attribute can be used to apply inline css styles to both ul and li tags. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<ul style="color: red">
<li>India</li>
<li>Australia</li>
<li>Africa</li>
</ul>The style="color: red" will change the font color of all the list items of the ul tag to red.
The title Attribute
The title attribute can be used to add a tooltip or additional information to the ul tag, which will only appear when the user places the mouse cursor on the unordered list.
Example
<ul title="List of Countries">
<li>India</li>
<li>Australia</li>
<li>Africa</li>
</ul>