There are three types of lists you can use in HTML. Each has a specific purpose and can be styled up to look like anything but a typical list.
Unordered List
A set of related items where the order is not important.
- Socks
- Pants
- Shoes
Out side of page content these are used for site navigation. The navigation on this site is all one unordered list.
- <ul>
- Starts the and stops the list.
- <li>
- List item, can contain multiple elements, <p>, <h’s>, even other lists!
- Pro tips
- To make a list, start off with each item in a paragraph tag.
Highlight all the text and click the list button icon on your toolbar. Blogs, Word, web editing software all have a list button.
To indent, also know as nesting a list, highlight the items and click the increase indent button. Again, just about every editor has one of these buttons.
Ordered List
A set of related item where order is important.
- First
- Second
- Third
The numbering can be set in CSS to Roman numerals, Arabic numerals, lower-case letters, upper-case letters, and a few other options. You can even choose not to display a symbol because the content already conveys order. Presentations and publications on a profile page already provide a year to denote chronology so no symbol is needed.
- <ol>
- Starts the and stops the list.
- <li>
- List item, can contain multiple elements, <p>, <h’s>, even other lists!
- Pro tips
- To make a list, start off with each item in a paragraph tag.
Highlight all the text and click the list button icon on your toolbar. Blogs, Word, web editing software all have a list button.
To indent, also know as nesting a list, highlight the items and click the increase indent button. Again, just about every editor has one of these buttons.
Definition List
Seriously cool. These couple a term to a definition and use a totally different set of elements. Can be styled up to look like a chart, table, or even tabbed content. Notice they have been used on this page above and below!
- <dl>
- Starts and stops the definition list.
- <dt>
- The term, can only contain text.
- <dd>
- The definition, can contain multiple elements, <p>, <h’s>, even other lists!