HTML IDs - Solved Practice Questions

Introduction

The id attribute uniquely identifies an HTML element on a webpage. Unlike the class attribute, an id should be used only once per page. It is commonly used with CSS for styling and JavaScript for selecting or manipulating a specific element. In this chapter, you’ll practice using the id attribute through simple solved questions.

Question 1

Problem Statement

Create a webpage that assigns the ID header to a heading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML ID Example</title>
</head>
<body>

    <h1 id="header">Welcome to HTML</h1>

</body>
</html>

Output

Welcome to HTML

Step-by-Step Explanation

id="header" assigns a unique ID to the heading.
An ID should be used only once on a webpage.
IDs help identify specific elements.

Question 2

Problem Statement

Create a webpage that assigns the ID about to a paragraph.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph ID</title>
</head>
<body>

    <p id="about">
        HTML is the standard language for creating webpages.
    </p>

</body>
</html>

Output

HTML is the standard language for creating webpages.

Step-by-Step Explanation

The paragraph has a unique ID named about.
IDs should not be repeated.
Each ID should clearly describe the element.

Question 3

Problem Statement

Create a webpage that assigns different IDs to two headings.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Different IDs</title>
</head>
<body>

    <h1 id="main-heading">HTML Course</h1>

    <h2 id="chapter-heading">Chapter 16</h2>

</body>
</html>

Output

HTML Course

Chapter 16

Step-by-Step Explanation

Each heading has its own unique ID.
No two elements should share the same ID.
IDs make elements easy to identify.

Question 4

Problem Statement

Create a webpage that assigns the ID logo to an image.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image ID</title>
</head>
<body>

    <img id="logo" src="logo.png" alt="Company Logo" width="150">

</body>
</html>

Output

[Company Logo]

Step-by-Step Explanation

The image is assigned a unique ID.
IDs can be used with any HTML element.
This makes it easier to style or access the image later.

Question 5

Problem Statement

Create a webpage that assigns the ID contact to a contact section.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Contact Section</title>
</head>
<body>

    <div id="contact">

        <h2>Contact Us</h2>

        <p>Email: info@example.com</p>

    </div>

</body>
</html>

Output

Contact Us

Email: info@example.com

Step-by-Step Explanation

The <div> has a unique ID named contact.
IDs are commonly used for webpage sections.
Navigation links can point to these IDs.

Question 6

Problem Statement

Create a webpage that assigns the ID footer to the footer section.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Footer ID</title>
</head>
<body>

    <div id="footer">

        <p>© 2026 My Website. All Rights Reserved.</p>

    </div>

</body>
</html>

Output

© 2026 My Website. All Rights Reserved.

Step-by-Step Explanation

The <div> has a unique ID named footer.
IDs help identify important webpage sections.
The same ID should not be used again.

Question 7

Problem Statement

Create a webpage that assigns unique IDs to three different sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple IDs</title>
</head>
<body>

    <div id="home">
        <h2>Home</h2>
    </div>

    <div id="services">
        <h2>Services</h2>
    </div>

    <div id="contact">
        <h2>Contact</h2>
    </div>

</body>
</html>

Output

Home

Services

Contact

Step-by-Step Explanation

Each section has its own unique ID.
IDs make it easy to identify individual sections.
Every ID name must be different.

Question 8

Problem Statement

Create a webpage with a navigation link that jumps to the Contact section using an ID.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Jump to Section</title>
</head>
<body>

    <a href="#contact">Go to Contact</a>

    <h2>Home</h2>
    <p>Welcome to our website.</p>

    <h2>About</h2>
    <p>We provide web development training.</p>

    <div id="contact">
        <h2>Contact</h2>
        <p>Email: info@example.com</p>
    </div>

</body>
</html>

Output

Go to Contact

Home

About

Contact

Step-by-Step Explanation

href="#contact" creates an internal link.
id="contact" marks the destination.
Clicking the link jumps directly to that section.

Concepts Used: id, Anchor Links

Question 9

Problem Statement

Create a webpage that assigns an ID to a button.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Button ID</title>
</head>
<body>

    <button id="submit-btn">
        Submit
    </button>

</body>
</html>

Output

[ Submit ]

Step-by-Step Explanation

The button has a unique ID.
JavaScript often uses button IDs for events.
Each button ID should be unique.

Concepts Used: id

Question 10

Problem Statement

Create a webpage that uses unique IDs for the Header, Main Content, and Footer sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Website Structure</title>
</head>
<body>

    <div id="header">
        <h1>My Website</h1>
    </div>

    <div id="main">
        <p>Welcome to my HTML practice website.</p>
    </div>

    <div id="footer">
        <p>© 2026 My Website</p>
    </div>

</body>
</html>

Output

My Website

Welcome to my HTML practice website.

© 2026 My Website

Step-by-Step Explanation

Every section has a different ID.
IDs uniquely identify webpage sections.
This structure is commonly used in websites.
CSS and JavaScript can target these IDs individually.

Key Takeaways

The id attribute uniquely identifies an HTML element.
An ID should be used only once on a webpage.
IDs can be assigned to any HTML element.
IDs are commonly used with CSS and JavaScript.
Internal page links use IDs with the # symbol.
Choose meaningful and unique ID names.

Frequently Asked Questions (FAQs)

1. What is the `id` attribute in HTML?

The id attribute uniquely identifies an HTML element.

2. Can two elements have the same ID?

No. Every ID must be unique on a webpage.

3. What is the difference between `class` and `id`?

class can be used on multiple elements.
id should be used only once.

4. Can any HTML element have an ID?

Yes. Almost every HTML element can use the id attribute.

5. Why are IDs used?

IDs help CSS style specific elements, JavaScript access elements, and HTML create internal page links.

6. How do I create an internal page link using an ID?

Use href="#section-name" and assign id="section-name" to the target element.

7. What are good practices for naming IDs?

Use meaningful, unique names such as header, footer, contact, main, or profile.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Introduction

Question 1

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 2

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 3

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 4

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 5

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 6

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 7

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 8

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 9

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 10

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Key Takeaways

Frequently Asked Questions (FAQs)

1. What is the id attribute in HTML?

2. Can two elements have the same ID?

3. What is the difference between class and id?

4. Can any HTML element have an ID?

5. Why are IDs used?

6. How do I create an internal page link using an ID?

7. What are good practices for naming IDs?

Related Posts

1. What is the `id` attribute in HTML?

3. What is the difference between `class` and `id`?