<ul>: The Unordered List element
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
| Flow content, and if the <ul> element's children include at least one <li> element, palpable content. |
| Zero or more <li>, <script> and <template> elements. |
| None, both the starting and ending tag are mandatory. |
| Any element that accepts flow content. |
| list |
| directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree |
| HTMLUListElement |
How to Make Lists in HTML
In HTML, we can list items either in an ordered or unordered fashion.
An ordered list uses numbers or some sort of notation that indicates a series of items.
For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.
Here is an example of an ordered list with students' names and marks.
On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.
There is one more type of list called a description list that we will learn as well below.
Now let's get into a bit more detail and see how to create each type of list in HTML.
HTML <ul> Tag
Example
An unordered HTML list:
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
More "Try it Yourself" examples below.
Unordered list
An unordered list is used when list items do not have any particular order. An unordered list is created with the <ul> tag. <ul> tag also is a two sided tag and closed with </ul> tag. Like an ordered-list, an item for unordered list is listed with the <li> tag. Suppose now we want to list the five classes in which Tom has received an "A" on mid-term for each class as:
- Biology
- Calculus
- Statistics
- History
- English
To create this list, we will list start with the <ul> tag. Next, we will use the <li> tag to list the first item and </li> to end the first item. Similarly, we will create the rest of the list items with the <li> and </li> tag. The following listing shows the code for creating the entire unordered list:
<li>Biology</li>
<li>Calculus</li>
<li>Statistics</li>
<li>History</li>
<li>English</li>
</ul>
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
- disc
- circle
- square
- none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
| Type "disc" | This is the default style. In this style, the list items are marked with bullets. |
| Type "circle" | In this style, the list items are marked with circles. |
| Type "square" | In this style, the list items are marked with squares. |
| Type "none" | In this style, the list items are not marked . |
<ul type=””>
In HTML Attributes