Creating Lists -
Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online.
In addition to the three different types of lists available within HTML, there are multiple ways to style these lists with CSS. For example, we can choose what type of marker to use on a list. The marker could be square, round, numeric, alphabetical, or perhaps nonexistent. Also, we can decide if a list should be displayed vertically or horizontally. All of these choices play significant roles in the styling of our web pages.
When we want to use a list on a website, HTML provides three different types to choose from: 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 appropriate option for displaying that content.
Unordered Lists -
An unordered list is simply 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>.
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.
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>Unordered Lists Demo
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.
<ol>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>Ordered lists also have unique attributes available to them including start and reversed.
Ordered Lists Demo
Head north on N Halsted St
Turn right on W Diversey Pkwy
Turn left on N Orchard St
Start Attribute -
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.
<ol start="30">
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>Start Attribute Demo
Head north on N Halsted St
Turn right on W Diversey Pkwy
Turn left on N Orchard St
Reversed Attribute -
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.
<ol reversed><li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>Reversed Attribute Demo
Head north on N Halsted St
Turn right on W Diversey Pkwy
Turn left on N Orchard St
Value Attribute -
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.
<ol><li>Head north on N Halsted St</li><li value="9">Turn right on W Diversey Pkwy</li><li>Turn left on N Orchard St</li></ol>Value Attribute Demo
Head north on N Halsted St
Turn right on W Diversey Pkwy
Turn left on N Orchard St
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.
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.
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>.
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.
<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> Description Lists Demo
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 made Purpose, 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.