HTMLmarkup~20 mins

Data attributes in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using Data Attributes in HTML

📖 Scenario: You are creating a simple product list for an online store. Each product needs to store extra information like its ID and category without showing it directly on the page.

🎯 Goal: Build an HTML page with a list of products. Each product item should use data- attributes to store its id and category. This helps keep extra info in the HTML that can be used later by scripts or styles.

📋 What You'll Learn

Create an unordered list with three product items.

Each product item must have data-id and data-category attributes with exact values.

Use semantic HTML5 elements.

Ensure the HTML is valid and accessible.

💡 Why This Matters

🌍 Real World

Data attributes are used in real websites to store extra info on elements that JavaScript or CSS can use without cluttering the visible content.

💼 Career

Knowing how to use data attributes helps you build interactive and maintainable web pages, a common skill needed for front-end web development jobs.

Progress0 / 4 steps

Create the HTML skeleton with a product list

Write the basic HTML5 structure with lang="en" in the <html> tag. Inside the <body>, create a <main> element containing an unordered list <ul> with three list items <li>. Each list item should have the product names: "Laptop", "Smartphone", and "Headphones" exactly as text content.

HTML




    
    
    Product List

Need a hint?

Remember to use the <ul> tag for the list and <li> tags for each product name inside the <main> section.

Add data attributes for product ID

Add a data-id attribute to each <li> with these exact values: "101" for Laptop, "102" for Smartphone, and "103" for Headphones.

HTML




    
    
    Product List

Need a hint?

Use the data-id attribute inside each <li> tag with the exact numbers given.

Add data attributes for product category

Add a data-category attribute to each <li> with these exact values: "computers" for Laptop, "phones" for Smartphone, and "audio" for Headphones.

HTML




    
    
    Product List

Need a hint?

Add the data-category attribute next to data-id inside each <li> tag with the exact category names.

Add an accessible heading and finalize the page

Add a heading <h1> inside the <main> before the product list with the exact text "Available Products". This helps screen readers understand the page content.

HTML




    
    
    Product List





    Laptop
    Smartphone
    Headphones

Need a hint?

Place the <h1> heading inside <main> before the <ul> list with the exact text.