10 Lists
Contents
- Introduction to lists
- Unordered lists (UL), ordered lists (OL), and list items (LI)
- Definition lists: the DL, DT, and DD elements
- Visual rendering of lists
- The DIR and MENU elements
<li>: The List Item element
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
| None. |
| Flow content. |
| The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element. |
| An <ul>, <ol>, or <menu> element. Though not a conforming usage, the obsolete <dir> can also be a parent. |
| listitem when child of an ol, ul or menu |
| menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem |
| HTMLLIElement |
Three Types of Lists in HTML
HTML offers three use cases for listing content on a page.
- Ordered Lists: These are sometimes called numbered lists because, by default, thelist items contained in that list have a specific numerical order or ranking. Ordered lists are appropriate where the exact ordering of items are important to the meaning of the content. For example, a recipe would likely use an ordered list because the steps occur in sequence. Any step-by-step process is best presented as an ordered list.
- Unordered Lists: These are sometimes called bulleted lists because the default visual appearance of an unordered list is tohave small bullet icons in front of the list items. This type of list is best used when the order of the items isn't salient.The list items will appear in whatever order you code them in for the HTML, but you are determining that order and, unlike a recipe or step-by-step process, the order could be changed and the meaning of the content would not suffer.
- Definition Lists: These are lists of items that have two parts, a term to be defined and the definition. They are commonly used to display a definition/description pair like you would find in a dictionary, but definition lists can also be used for many other kinds of content.
How to Make Lists in HTML
In HTML, we can list items either in an ordered or unordered fashion.
An ordered list uses numbers or some sort of notation that indicates a series of items.
For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.
Here is an example of an ordered list with students' names and marks.
On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.
There is one more type of list called a description list that we will learn as well below.
Now let's get into a bit more detail and see how to create each type of list in HTML.