HTMLmarkup~15 mins

Title attribute in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using the Title Attribute in HTML

📖 Scenario: You are creating a simple webpage that shows a list of fruits. You want to add helpful tooltips that appear when users hover over each fruit name.

🎯 Goal: Build an HTML page with a list of fruits where each fruit name has a title attribute that shows a short description when hovered.

📋 What You'll Learn

Create an unordered list with three fruit names: Apple, Banana, Cherry

Add a title attribute to each fruit with a short description

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

Ensure the page has a <header> with a heading

Make sure the page has a <footer> with a note about tooltips

Make sure the HTML is valid and accessible

💡 Why This Matters

🌍 Real World

Using the title attribute helps users understand elements better by showing extra information on hover, improving user experience.

💼 Career

Web developers often add tooltips with the title attribute to make interfaces more user-friendly and accessible.

Progress0 / 4 steps

Create the basic HTML structure with a header and main section

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> including <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Inside the <body>, add a <header> containing an <h1> with the text Fruit List and a <main> element.

HTML




    
    
    Fruit List

Need a hint?

Start with the basic HTML5 page structure. Add a header with a heading and an empty main section.

Add an unordered list inside the main section with fruit names

Inside the existing <main> element, add a <section>. Inside this section, create an unordered list <ul> with three list items: Apple, Banana, and Cherry.

HTML




    
    
    Fruit List


    
        Fruit List

Need a hint?

Wrap the list inside a section element. Use <ul> and three <li> items with the exact fruit names.

Add title attributes to each fruit list item

Add a title attribute to each <li> element with these exact values: Apple gets "A sweet red or green fruit", Banana gets "A long yellow fruit", and Cherry gets "A small red stone fruit".

HTML




    
    
    Fruit List


    
        Fruit List
    
    
        
            
                Apple
                Banana
                Cherry

Need a hint?

Add the title attribute inside each <li> tag with the exact text given.

Add a footer with a small note about tooltips

Add a <footer> element after the <main> section. Inside the footer, add a <p> with the text Hover over a fruit name to see a description.

HTML




    
    
    Fruit List


    
        Fruit List
    
    
        
            
                Apple
                Banana
                Cherry

Need a hint?

Place the footer after the main section. Add a paragraph with the exact text inside the footer.