Title attribute in HTML - Mini Project: Build & Apply

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.

1

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


    

Hint

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

2

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
    
    
        
    

Hint

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

3

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
            
        
    

Hint

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

4

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
            
        
    
    

Hint

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

Practice

1. What does the title attribute do in HTML?

easy

A. Changes the font size of the element

B. Shows extra text when you hover over an element

C. Adds a clickable link to the element

D. Makes the element invisible

Solution

1. Step 1: Understand the purpose of the title attribute

   The title attribute is used to provide additional information about an element, which appears as a tooltip when the mouse hovers over it.

2. Step 2: Compare options with the attribute's function

   Only Shows extra text when you hover over an element describes showing extra text on hover, which matches the title attribute's behavior.

3. Final Answer:

   Shows extra text when you hover over an element -> Option B

4. Quick Check:

   title attribute = hover text [OK]

Hint: Hover over elements to see title text in browser [OK]

Common Mistakes:

• Thinking title changes style or visibility
• Confusing title with link or font attributes
• Assuming title is always visible without hover

2. Which of the following is the correct way to add a title attribute to a paragraph?

easy

A. <p title='This is a paragraph'>Hello</p>

B. <p 'This is a paragraph' title>Hello</p>

C. <p title=Hello>This is a paragraph</p>

D. <p title=>This is a paragraph</p>

Solution

1. Step 1: Check correct syntax for title attribute

   The title attribute must be inside the opening tag with an equals sign and quoted text, like title='text'.

2. Step 2: Evaluate each option's syntax

   <p title='This is a paragraph'>Hello</p> uses correct syntax: title='This is a paragraph'. Options B, C, and D have syntax errors or missing quotes.

3. Final Answer:

   <p title='This is a paragraph'>Hello</p> -> Option A

4. Quick Check:

   Attribute syntax = name='value' [OK]

Hint: Always quote attribute values in HTML [OK]

Common Mistakes:

• Missing quotes around attribute value
• Placing attribute value before attribute name
• Leaving attribute value empty without quotes

3. What will the user see when they hover over this link?

<a href='https://example.com' title='Go to example'>Example</a>

medium

A. The link opens automatically

B. The link text changes to 'Go to example'

C. The text 'Go to example' appears as a tooltip

D. Nothing happens on hover

Solution

1. Step 1: Understand the title attribute on a link

   The title attribute on an anchor tag shows a tooltip with the given text when hovered.

2. Step 2: Predict the hover behavior

   Hovering over the link will show the tooltip 'Go to example' as specified in the title attribute.

3. Final Answer:

   The text 'Go to example' appears as a tooltip -> Option C

4. Quick Check:

   title attribute = tooltip text on hover [OK]

Hint: Hover over links to see title tooltips in browser [OK]

Common Mistakes:

• Expecting link text to change on hover
• Thinking title triggers automatic navigation
• Ignoring the tooltip display on hover

4. Find the error in this code snippet:

<button title=Click me>Press</button>

medium

A. The title attribute should be after the button text

B. Button tag cannot have a title attribute

C. The text 'Press' should be inside quotes

D. Missing quotes around the title value

Solution

1. Step 1: Check attribute syntax rules

   HTML attributes must have their values in quotes if they contain spaces.

2. Step 2: Identify the problem in the code

   The title value 'Click me' has a space but is not quoted, causing invalid HTML.

3. Final Answer:

   Missing quotes around the title value -> Option D

4. Quick Check:

   Attribute values with spaces need quotes [OK]

Hint: Quote attribute values with spaces to avoid errors [OK]

Common Mistakes:

• Leaving attribute values unquoted with spaces
• Thinking title attribute is invalid on buttons
• Placing attributes after element content

5. You want to add a title attribute to an image that says 'Company Logo'. Which is the best way to do this while keeping the page accessible?

hard

A. <img src='logo.png' alt='Company Logo' title='Company Logo'>

B. <img src='logo.png' title='Company Logo'>

C. <img src='logo.png' alt='' title='Company Logo'>

D. <img src='logo.png' alt='Logo'>

Solution

1. Step 1: Understand accessibility for images

   The alt attribute provides text for screen readers and must describe the image meaningfully.

2. Step 2: Use title for extra info without replacing alt

   The title attribute adds hover text but does not replace the need for a descriptive alt.

3. Step 3: Evaluate options

   <img src='logo.png' alt='Company Logo' title='Company Logo'> has both descriptive alt and matching title, which is best for accessibility and user info.

4. Final Answer:

   <img src='logo.png' alt='Company Logo' title='Company Logo'> -> Option A

5. Quick Check:

   Use alt for screen readers + title for hover text [OK]

Hint: Always use alt for accessibility, title for extra hover info [OK]

Common Mistakes:

• Omitting alt attribute or leaving it empty
• Using title instead of alt for screen readers
• Using vague alt text that doesn't describe image