Ordered lists in HTML - Mini Project: Build & Apply

Creating an Ordered List in HTML

📖 Scenario: You want to create a simple webpage that shows a list of your top 3 favorite fruits in order.

🎯 Goal: Build a webpage with an ordered list showing exactly three fruits in the correct order.

📋 What You'll Learn

Use semantic HTML5 structure with <main> and <section> tags

Create an ordered list with exactly three items

Each list item must contain the exact fruit names: Apple, Banana, Cherry

Ensure the HTML document includes lang, charset, and viewport meta tags for accessibility and responsiveness

💡 Why This Matters

🌍 Real World

Ordered lists are used on websites to show steps, rankings, or any information that needs to be in a specific order, like instructions or top lists.

💼 Career

Knowing how to create accessible and semantic ordered lists is essential for web developers to build user-friendly and well-structured websites.

1

Set up the basic HTML structure

Create a basic HTML5 document structure with lang="en" in the <html> tag, and include <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Add an empty <body> section.

HTML

Hint

Remember to start with <!DOCTYPE html> and set the language attribute in the <html> tag.

2

Add main and section elements

Inside the <body>, add a <main> element. Inside <main>, add a <section> element with a heading <h1> that says "My Favorite Fruits".

HTML

    
    
    Favorite Fruits


     and  with  here -->

Hint

Use semantic tags to organize your content. The heading should be inside the section.

3

Create the ordered list

Inside the <section>, add an ordered list <ol> with three list items <li>. The items must be exactly: Apple, Banana, and Cherry in that order.

HTML

    
    
    Favorite Fruits


    
        
            My Favorite Fruits
            
        
    

Hint

Use <ol> for ordered lists and <li> for each item.

4

Add accessibility and finalize

Add an aria-label="Favorite fruits list" attribute to the <ol> element to improve accessibility. Make sure the entire HTML document is complete and well-structured.

HTML

    
    
    Favorite Fruits


    
        
            My Favorite Fruits
             element here -->
            
                Apple
                Banana
                Cherry
            
        
    

Hint

Adding aria-label helps screen readers understand the list better.

Practice

1. What HTML tag is used to create a numbered list?

easy

A. <ol>

B. <ul>

C. <li>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   There are two main list types: ordered (<ol>) and unordered (<ul>).

2. Step 2: Identify the tag for numbered lists

   The <ol> tag creates numbered (ordered) lists, while <ul> creates bullet lists.

3. Final Answer:

   <ol> -> Option A

4. Quick Check:

   Numbered list tag = <ol> [OK]

Hint: Numbered lists always use <ol> tag [OK]

Common Mistakes:

• Confusing <ol> with <ul>
• Using <li> as the list container
• Trying to use a non-existent <list> tag

2. Which of the following is the correct syntax to start an ordered list in HTML?

easy

A. <orderedlist>

B. <list type='number'>

C. <ol>

D. <ul type='1'>

Solution

1. Step 1: Recall standard HTML tags for lists

   The standard tag for ordered lists is <ol>. Other tags like <orderedlist> or attributes on <ul> are not valid HTML.

2. Step 2: Confirm correct syntax

   The correct way to start an ordered list is simply <ol> without extra attributes or incorrect tag names.

3. Final Answer:

   <ol> -> Option C

4. Quick Check:

   Correct ordered list tag = <ol> [OK]

Hint: Ordered lists start with <ol>, no extra attributes needed [OK]

Common Mistakes:

• Using non-standard tags like <orderedlist>
• Adding type attribute to <ul> for numbers
• Confusing <ul> and <ol> tags

3. What will be the visual output of this HTML code?

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

medium

A. A bulleted list with items: First, Second, Third

B. An error because <li> tags are not allowed inside <ol>

C. Plain text showing the tags and items

D. A numbered list with items: 1. First 2. Second 3. Third

Solution

1. Step 1: Understand the <ol> and <li> relationship

   The <ol> tag creates a numbered list, and each <li> is a list item.

2. Step 2: Predict the rendered output

   The browser will show a numbered list: 1. First, 2. Second, 3. Third.

3. Final Answer:

   A numbered list with items: 1. First 2. Second 3. Third -> Option D

4. Quick Check:

   Ordered list with
5. items = numbered list [OK]

Hint: Ordered lists show numbers before each <li> item [OK]

Common Mistakes:

• Thinking <ol> creates bullets instead of numbers
• Expecting raw HTML code to show on page
• Believing <li> tags are invalid inside <ol>

4. Identify the error in this HTML snippet:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</ol>
</li>

medium

A. The closing </li> tag is misplaced after the closing </ol> tag

B. The <ol> tag should be <ul>

C. Missing <li> tags for each item

D. No errors, this is valid HTML

Solution

1. Step 1: Check tag nesting order

   Each <li> must open and close inside the <ol>. Here, the last </li> is after </ol>, which breaks proper nesting.

2. Step 2: Identify correct closing order

   The last list item should close before the ordered list closes. The misplaced closing tag causes invalid HTML.

3. Final Answer:

   The closing </li> tag is misplaced after the closing </ol> tag -> Option A

4. Quick Check:

   List items must close before the list closes [OK]

Hint: Close all <li> tags before closing <ol> [OK]

Common Mistakes:

• Closing <li> after
• Mixing <ul> and <ol> tags incorrectly
• Forgetting to close <li> tags

5. You want to start an ordered list at number 5 instead of 1. Which attribute should you add to the <ol> tag to do this?

hard

A. value="5"

B. start="5"

C. number="5"

D. count="5"

Solution

1. Step 1: Recall the attribute to set starting number

   The start attribute on <ol> sets the first number in the list.

2. Step 2: Confirm correct attribute usage

   Using start="5" will make the list begin numbering at 5.

3. Final Answer:

   start="5" -> Option B

4. Quick Check:

   Use start attribute to set list start number [OK]

Hint: Use start="number" on <ol> to begin numbering there [OK]

Common Mistakes:

• Using value or number attributes which don't exist on <ol>
• Trying to set start on <li> instead of <ol>
• Confusing with CSS counters