Lists are a part of everyday life. To- do lists determine what to get done. nautical routes give turn- by- turn lists of directions. fashions give lists of constituents and lists of instructions. With a list for nearly everything, it’s easy to understand why they're also popular online.
If we want to use a list on a website, HTML provides us three different types unordered, ordered, and description lists. Choosing which type of list to use — or whether to use a list at all — comes down to the content and the most semantically applicable option for displaying that content. In addition to the three different types of lists available within HTML, there are multiple ways to term these lists with CSS. For illustration, we can choose what type of marker to use on a list. The marker could be square, round, numeric, alphabetical, or maybe absent. You can also decide if a list should displayed horizontally or vertically. All of these choices play significant places in the styling of our web runners.
Unordered List
A list of related items whose order does not matter. Creating an unordered list in HTML is accomplished using the unordered list block-level element, <ul>. Each item within an unordered list is individually marked up using the list item element, <li>.
Graphical Examples:
By default, most browsers add a vertical margin and left padding to the <ul> element and precede each <li> element with a solid dot. This solid dot is called the list item marker, and it can be changed using CSS.
HTML CODE
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
Output:
- Orange
- Green
- Blue
Ordered Lists
The ordered list element, <ol>, works very much like the unordered list element; individual list items are created in the same manner. The main difference between an ordered list and an unordered list is that with an ordered list, the order in which items are presented is important. Because the order matters, instead of using a dot as the default list item marker, an ordered list uses numbers.
Graphical Examples:
HTML CODE
<ol>
<li>The One</li>
<li>The Two</li>
<li>Last One</li>
</ol>
Output:
1. The One
2. The Two
3. Last One
2. The Two
3. Last One
Start Attribute in Ordered List
The start attribute defines the number from which an ordered list should start. By default, ordered lists start at 1. However, there may be cases where a list should start at 30 or another number. When we use the start attribute on the <ol> element, we can identify exactly which number an ordered list should begin counting from.
The start attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.
HTML CODE
<ol start="15">
<li>The One</li>
<li>The Two</li>
<li>Last One</li>
</ol>
Output:
15. The One
16. The Two
17. Last One
Reversed Attribute in Ordered List
The reversed attribute, when used on the <ol> element, allows a list to appear in reverse order. An ordered list of five items numbered 1 to 5 may be reversed and ordered from 5 to 1.
The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. It is either true or false. False is the default value; the value becomes true when the attribute name reversed appears on the <ol> element.
HTML CODE
<ol reversed>
<li>The One</li>
<li>The Two</li>
<li>Last One</li>
</ol>
Output:
3. The One
2. The Two
1. Last One
Value Attribute in Lists
The value attribute may be used on an individual <li> element within an ordered list to change its value within the list. The number of any list item appearing below a list item with a value attribute will be recalculated accordingly.
As an example, if the second list item has a value attribute value of 9, the number on that list item marker will appear as if it is the ninth item. All subsequent list items will be numbered upwards from 9.
HTML CODE
<ol >
<li>The One</li>
<li value="9">The Two</li>
<li>Last One</li>
</ol>
Output:
1. The One
9. The Two
10. Last One
Description Lists
Another type of list seen online (but not as often as unordered or ordered lists) is the description list. Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example.
Creating a description list in HTML is accomplished using the description list block-level element, <dl>. Instead of using a <li> element to mark up list items, the description list requires two block-level elements: the description term element, <dt>, and the description element, <dd>.
A description list may contain numerous terms and descriptions, one after the other. Additionally, a description list may have multiple terms per description, as well as multiple descriptions per term. A single term may have multiple meanings and warrant multiple descriptions. Conversely, a single description may be suitable for multiple terms.
When adding a description list, the <dt> element must come before the <dd> element. The definition term and the description that directly follows it correspond to one another; thus, the order of these elements is important.
By default, the <dl> element will include vertical margins, just like the <ul> and <ol> elements. Additionally, the <dd> element includes a left margin by default.
Graphical Examples:
HTML CODE
<dl>
<dt>study</dt>
<dd>The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books</dd>
<dt>design</dt>
<dd>A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
<dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>
<dt>business</dt>
<dt>work</dt>
<dd>A person's regular occupation, profession, or trade</dd>
</dl>
Output:
study
The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books
design
A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or madePurpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
business
work
A person's regular occupation, profession, or trade
Nesting Lists
One feature that makes lists extremely powerful is their ability to be nested. Every list may be placed within another list; they can be nested continually. But the potential to nest lists indefinitely doesn’t provide free rein to do so. Lists should still be reserved specifically for where they hold the most semantic value.
One trick with nesting lists is to know where to begin and end each list and list item. Speaking specifically about unordered and ordered lists, as that is where most nesting will occur, the only element that may reside directly within the <ul> and <ol> elements is the <li> element. To repeat, the only element we can place as a direct child of the <ul> and <ol> elements is the <li> element.
That said, once inside the <li> element, the standard set of elements may be added, including any <ul> or <ol> elements.
To nest a list rather than closing a list item, begin a new list. Once the nested list is complete and closed, close the wrapping list item and continue on with the original list.
Graphical Examples:
HTML CODE
<ol>
<li>Go on Walk</li>
<li>Laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Eggs</li>
<li>Bread</li>
<li>Juice</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Dinner</li>
</ol>
Output:
1. Go on Walk
2. Laundry
3.Go to the grocery and buy:
Eggs
Bread
Juice
4. Mow the lawn
5. Dinner
Because nesting lists can be a little tricky—and unwanted styles will appear if it’s done incorrectly—let’s quickly review. The <ul> and <ol> elements may contain only <li> elements. The <li> element may contain any normal element as desired; however, the <li> element has to be a direct child of either a <ul> or <ol> element.
It’s also worth noting that as lists are nested inside of other lists, their list item markers will change according to how deeply the list is nested. In the previous example, the unordered list nested within the ordered list uses hollow circles instead of solid discs as the list item marker. This change happens because the unordered list is nested one level into the ordered list.