HTML How to use 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.