HTMLmarkup~30 mins

Ordered lists in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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 -->

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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