A list is an arrangement of text about usually related items, and usually arranged vertically. The items may, or may not be arranged in a specific order. Each item in a list may be marked, or prefaced by a number, letter, or a graphic bullet or icon. Readers like lists because a list is more readable than a block of text and provides order in a more easily understandable way.
- bread
- milk
- eggs
- potatoes
- broccoli
In html, an entire list would be contained within the <ul> and </ul> tags. Each list item would be contained within <li> and </li> tags. Shown below is example code for a list.
<ul> <li>bread</li> <li>milk</li> <li>eggs</li> <li>potatoes</li> <li>broccoli</li> </ul>
- bread
- milk
- eggs
- potatoes
- broccoli
If the order of the items in the list IS NOT important, use the <ul> and </ul> tags to create an unordered list. When you define an unordered list, the list items are automatically bulleted. Example code for an unordered list is shown above.
Ordered List
- bread
- milk
- eggs
- potatoes
- broccoli
If the order of the items in the list IS important, use the <ol> and </ol> tags to create an ordered list. When you define an ordered list, the list items are automatically numbered. Example code for an ordered list is shown below.
<ol> <li>bread</li> <li>milk</li> <li>eggs</li> <li>potatoes</li> <li>broccoli</li> </ol>
Nested Lists
- bread
- butter Vegetables:
- broccoli
- carrots
- potatoes
- onions
- eggs
- milk
You can nest a list within a list. Example code for an ordered list nested within an ordered list is shown below.
<ol> <li>bread</li> <li>butter</li> Vegetables: <ol> <li>broccoli</li> <li>carrots</li> <li>potatoes</li> <li>onions</li> </ol> <li>eggs</li> <li>milk</li> </ol>
Example code for an unordered list nested within an unordered list is shown below.
<ul> <li>bread</li> <li>butter</li> Vegetables: <ul> <li>broccoli</li> <li>carrots</li> <li>potatoes</li> <li>onions</li> </ul> <li>eggs</li> <li>milk</li> </ul>
- bread
- butter Vegetables:
- broccoli
- carrots
- potatoes
- onions
- eggs
- milk
Note that when you nest an unordered list within an unordered list, the type of bullet is used for each list is alternated.
And, of course, you can nest an ordered list within an unordered list or, an unordered list within an ordered list. Example code for an unordered list nested within an ordered list is shown below.
<ol> <li>bread</li> <li>butter</li> Vegetables: <ul> <li>broccoli</li> <li>carrots</li> <li>potatoes</li> <li>onions</li> </ul> <li>eggs</li> <li>milk</li> </ol>
Definition List
The definition list is defined by the <dl> </dl> tag pair. The definition list is used to display a list of terms and descriptions or definitions of each term. In a definition list, the terms are defined by <dt> </dt> tag pairs and the related definitions are defined by <dd> </dd> tag pairs. The definitions are automatically indented by the browser.
- Term 1
- Definition for term 1
- Term 2
- Definition for term 2
- Term 3
- Definition for term 3
Shown below is code for a definition list.
<dl> <dt>Term 1</dt> <dd>Definition for term 1</dd> <dt>Term 2</dt> <dd>Definition for term 2</dd> <dt>Term 3</dt> <dd>Definition for term 3</dd> </dl>
A definition list can have multiple terms for a single definition. Shown below is a defintion list with multiple terms for a single definition.
- Division
- Part
- Section
- One of the portions into which something is divided
- Amaze
- Astonish
- Astound
- To surprise or affect with great wonder
Shown below is code for a definition list with multiple terms for a single definition.
<dl> <dt>Division</dt> <dt>Part</dt> <dt>Section</dt> <dd>One of the portions into which something is divided</dd> <dt>amaze</dt> <dt>astonish</dt> <dt>astound</dt> <dd>To surprise or affect with great wonder</dd> </dl>
A definition list can have multiple definitions for a single term. Shown below is a definition list with multiple definitions for each term.
- Center
- To position in the middle
- Political view between right and left
- Equal distance from circumference
- Even
- Flat
- Smooth
- Uniform
<dl> <dt>Center</dt> <dd>To position in the middle</dd> <dd>Political view between right and left</dd> <dd>Equal distance from circumference</dd> <dt>Even</dt> <dd>Flat</dd> <dd>Smooth</dd> <dd>Uniform</dd> </dl>
Shown above is code for a definition list with multiple definitions for each term.
There are many more ways you can define a list, for example you can define your own graphic to use for the bullet in an unordered list, or you can define your ordered list to use letters rather than numbers for the items in your list. Unfortunately, the attributes to do these things are not supported in HTML5, you'll need to use CSS.
More HTML Code:
• When to Use the nofollow Attribute value
• How to Make a Table Scroll
• Changing the Size of an Image on Your Webpage
• The Font Tag
• Aligning an Image on Your Web Page
• HTML Definition List
• Using col and colgroup to Apply Attributes to a Table Column
• Providing Alternate and Title Text for an Image
• Radio Button Basics
• HTML dfn Tag