Lists

Exercise

In the "index.html" file, write the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
</head>
<body>

</body>
</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
Create an unordered list by adding the following between the opening and closing tags of the body:

<h1>A couple of Lists</h1>
<!-- Unordered List -->
<h3>Things that I like to eat</h3>
<p>These are not in any particular order because I like all of them equally</p>
<ul>
  <li>Steak</li>
  <li>Thai Food</li>
  <li>Brocolini</li>
</ul>

Save.
You should an unordered list on the browser.
Create an ordered list by adding the following under the unordered list:

<!-- Ordered List -->
<h3>Winners of the competition</h3>
<p>These are in order. The number 1 person came in first in the competition</p>
<ol>
  <li>David</li>
  <li>Aaron</li>
  <li>Kiwi</li>
</ol>

Save.
You should see an ordered list on the browser.
Create a nested list by adding the following under the ordered list:

<!-- Nested List -->
<h3>People and their favorite foods</h3>
<p>These are the competitors and their favorite foods and drinks. The foods and drinks are listed in order of their
  preferences</p>
<ul>
  <li>David
    <ol>
      <li>Steak</li>
      <li>Thai Food</li>
      <li>Ginger Ale</li>
    </ol>
  </li>
  <li>Aaron
    <ol>
      <li>Chicken Marsala and Mushrooms</li>
      <li>Ramen</li>
      <li>Grape Soda</li>
    </ol>
  </li>
  <li>Kiwi
    <ol>
      <li>Burgers</li>
      <li>Pizza</li>
      <li>Coca Cola</li>
    </ol>
  </li>
</ul>

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`<ul></ul>`

The <ul> tag in HTML stands for "unordered list". It is used to create a list of items that are not ordered.

The <li> tag represents each individual item in the unordered list. The items within the <ul> tag will be displayed with bullet points (typically a small filled circle or square) in front of each item.

`<li></li>`

Unordered list are commonly used for items that don't need to be displayed in a specific order, such as in a list of items in a menu or list of ingredients in a recipe.

`<ol></ol>`

The <ol> tag in HTML stands for "ordered list". It is used to create a list of items where each item is numbered in a specific order, either alphabetically or numerically.

The <li> tag represents each individual item in the ordered list. The items within the <ol> tag will be displayed with a numeric prefix, such as 1, 2, 3, etc.

Lists can be nested within each other. The example above shows an example of an ordered list nested inside an unordered list.

Experiment with the Code

Try adding more items to each of the lists.
Try adding another unordered list.
Try adding another ordered list.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References

Learn2BuildApps