HTML How to use lists
This lesson will go over how to use unordered, ordered, and description lists.
Github repo
https://github.com/EntryLevelDeveloperTraining/html-workshop
What is a list?
In HTML a list is a group of related items shown in a list. There are few ways to show lists. Unordered, ordered, and a description list.
Unordered list
This will show a list with a dot next to the item.
To create an unordered list we use the <ul> tag, which stands for unordered list and will begin our list. Then we use the <li> tags, which stands for list item and will define each item in our list.
<h2>Movies</h2>
<ul>
<li>Iron Man</li>
<li>Karate Kid</li>
<li>Star Wars</li>
<li>Thor</li>
</ul>
Ordered list
This will show a number next to the item.
To create an ordered list we use the <ol> tag, which stands for ordered list and will begin our list. Then we use the <li> tags, which stands for list item and will define each item in our list.
<h2>Books</h2>
<ol>
<li>Moby Dick</li>
<li>The Great Gatsby</li>
<li>The Lord Of The Rings</li>
<li>Next Movie</li>
</ol>
Description list
This will show an item definition and a description of that item.
To create an description list we use the <dl> tag, which stands for description list and will begin our list. Then we use the <dt> tag, which stands for description term and will define each term in our list. And we use the <dd> tag, which stands for description definition and will define each definition in our list.
<h2>Drinks</h2>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Creating a Table of Contents Menu
<h2>Table Of Contents</h2>
<ul>
<li>
<a href="/01-index.html">Index</a>
</li>
<li>
<a href="/01-about.html">About</a>
</li>
<li>
<a href="/02-headers.html">Header</a>
</li>
</ul>
Conclusion
Lists are a great way to group related items together. When you start learning CSS and JavaScript you will be able to create dynamic menus using lists.