Home » Exercises » HTML Exercises » HTML Lists

HTML Lists

Write an HTML program to create an unordered list of fruits

Description: Create a web page with a bullet list of 5 fruits.

Hint:

  • Use <ul> for the list and one <li> for each fruit.

HTML program for an unordered list

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fruits</title>
</head>
<body>
  <h2>My favourite fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
    <li>Orange</li>
    <li>Grapes</li>
  </ul>
</body>
</html>

Output in the browser:

Output in the browser

My favourite fruits

  • Apple
  • Banana
  • Mango
  • Orange
  • Grapes

How it works

  • ul means unordered list. The browser shows bullet points.
  • Every item must be inside an li tag.
  • Add style="list-style-type: square;" to the ul to change the bullet type.

Read HTML Lists.

Write an HTML program to create an ordered and a nested list

Description: Create a numbered list of three steps that starts from number 5. Then create a nested list of Fruits and Vegetables with two sub items each.

Hint:

  • Use <ol start="5"> to start from 5.
  • For a nested list, put a new <ul> inside an <li>.

HTML program for ordered and nested lists

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lists</title>
</head>
<body>
  <ol start="5">
    <li>Open the editor</li>
    <li>Write the code</li>
    <li>Save the file</li>
  </ol>

  <ul>
    <li>Fruits
      <ul>
        <li>Apple</li>
        <li>Mango</li>
      </ul>
    </li>
    <li>Vegetables
      <ul>
        <li>Potato</li>
        <li>Tomato</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Output in the browser:

Output in the browser
  1. Open the editor
  2. Write the code
  3. Save the file
  • Fruits
    • Apple
    • Mango
  • Vegetables
    • Potato
    • Tomato

How it works

  • The start attribute sets the first number of an ordered list.
  • The inner <ul> is inside the <li> of its parent item, so it shows as a sub list.

Read HTML Lists.