0
0
HTMLmarkup~30 mins

Nested lists in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Creating a Nested List in HTML
📖 Scenario: You are building a simple webpage that shows a grocery list. Some items have sub-items to buy, so you want to show them as nested lists.
🎯 Goal: Create an HTML page with a nested list showing main grocery categories and their sub-items.
📋 What You'll Learn
Use semantic HTML5 structure with <main> and <section> tags
Create an unordered list <ul> with nested <ul> inside list items
Use proper indentation for readability
Include a page title inside <header>
Make sure the HTML is valid and renders correctly in a browser
💡 Why This Matters
🌍 Real World
Nested lists are common in menus, outlines, and categorized data on websites. Learning to create them helps you organize information clearly.
💼 Career
Web developers often build navigation menus and content lists that require nested lists. Understanding this helps in creating accessible and well-structured web pages.
Progress0 / 4 steps
1
Create the basic HTML structure with a main unordered list
Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> with charset UTF-8 and viewport meta tags, and <body>. Inside the <body>, add a <main> element containing an unordered list <ul> with three list items: Fruits, Vegetables, and Dairy.
HTML
Need a hint?

Start by typing the full HTML5 page structure. Inside the <body>, add a <main> tag and inside it an unordered list <ul> with three list items exactly named Fruits, Vegetables, and Dairy.

2
Add a header with the page title
Inside the <body> but before the <main>, add a <header> element containing an <h1> with the text Grocery List.
HTML
Need a hint?

Remember to place the <header> before the <main>. Inside the header, add an <h1> with the exact text Grocery List.

3
Add nested lists for sub-items under each main category
Inside each main list item (<li>) for Fruits, Vegetables, and Dairy, add a nested unordered list <ul> with these exact sub-items:

Fruits: Apples, Bananas, Oranges
Vegetables: Carrots, Broccoli
Dairy: Milk, Cheese
HTML
Need a hint?

Inside each main <li>, add a nested <ul> with the exact sub-items as <li> elements. Make sure to close all tags properly.

4
Add a footer with a small note
After the <main> element, add a <footer> element containing a <p> with the text List updated on 2024-06-01.
HTML
Need a hint?

Place the <footer> after the <main>. Inside the footer, add a paragraph <p> with the exact text List updated on 2024-06-01.