HTML Unordered Lists
In this article, we’ll examine HTML unordered lists and how they work. This lesson will cover the syntax of creating unordered lists, including how to add and customize bullet styles.
<ul> HTML tag represents an unordered list in HTML.
HTML Unordered List displays elements in bulleted format. It is possible to display items in an unordered list when we do not need to present them in a specific order. An unordered list is created using the HTML <ul > tag.
Unordered HTML List
HTML unordered lists begin with the <ul> tag. <li> tags are used to start each list item.
HTML unordered lists are marked with bullets (small black circles) by default:
Example
Unordered HTML List – Choose List Item Marker
The style of the list item marker is specified using the CSS list-style-type property. Any of the following values may be present:
| Value | Overview |
|---|---|
| disc | Marks the list item with a bullet (default) |
| circle | Creates a circle for the list item marker. |
| square | A square is set as the list item marker. |
| none | There will be no marking of the items on the list. |
Square
Example:
Disc
Example:
Circle
Example:
None
Example:
Here is the combined list of all the unodered types:
Example
Nested HTML Lists
Nested lists (lists within lists) are as follows:
Example
HTML Lists CSS
CSS can also be applied on the unordered list here is how:
Example
Horizontal List with CSS
There are many different methods CSS can be used to style HTML lists.
The following is an example of how to create a navigation menu by styling a list horizontally:
Example:
HTML List Tags
| Tag | Overview |
|---|---|
| <li> | Specifies a list item in HTML Unordered List |
| <ol> | This tag represents an ordered list. |
| <ul> | An unordered list is determined when it comes to HTML Unordered List. |
| <dd> | Defines the term in a description list |
| <dt> | Represents a term in a description list |
| <dl> | A description list is specified as it comes to HTML Unordered List. |
This concludes our discussion of HTML unordered lists. Our HTML Tag Reference contains a complete list of all HTML tags.
Chapter Summary
- To create an unordered list, utilise the HTML <ul> element.
- To specify the list item marker, use the CSS list-style-type property.
- To determine a list item, operate the HTML <li> element.
- Nesting lists are possible.
- Other HTML elements may be included in list items.
- To portray a list horizontally, operate the CSS attribute float:left.
