ID attribute in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the id attribute in HTML?

Choose the best explanation for what the id attribute does in an HTML element.

A It defines the type of content inside the element.

B It groups multiple elements together to apply the same style.

C It uniquely identifies an element on the page so it can be styled or accessed easily.

D It hides the element from the page.

💡 Hint

Think about how you can select one specific element in CSS or JavaScript.

The id attribute gives a unique name to an element. This helps CSS and JavaScript find exactly that element. Unlike classes, IDs must be unique on the page.

📝 Syntax

intermediate

Which HTML snippet correctly uses the id attribute?

Select the HTML code that correctly assigns an id to a div element.

A <div id=header"Welcome</div>

B <div id="header">Welcome</div>

C <div id='header'>Welcome</div>

D <div id=header>Welcome</div>

💡 Hint

Remember the correct way to write attribute values in HTML.

Attribute values should be enclosed in quotes. Option B uses double quotes correctly. Option B misses quotes, C has a missing quote, and D has misplaced quotes.

❓ rendering

advanced

What will be the visible result of this HTML and CSS code?

Given the code below, what color will the text inside the p tag appear as in the browser?

HTML

<style>
  #unique {
    color: blue;
  }
  p {
    color: red;
  }
</style>
<p id="unique">Hello World</p>

A The text will be blue.

B The text will be red.

C The text will be black (default).

D The text will be both red and blue, overlapping.

💡 Hint

Think about CSS specificity and which rule wins.

The CSS rule with the id selector (#unique) is more specific than the element selector (p), so the text color will be blue.

❓ accessibility

advanced

Why is it important to use unique id attributes for accessibility?

Choose the best reason why unique id values help users who rely on assistive technologies.

A They hide content from keyboard users.

B They make the page load faster.

C They automatically translate the page content.

D They allow screen readers to link labels and controls correctly.

💡 Hint

Think about how labels connect to form inputs.

Unique id attributes let assistive technologies like screen readers connect labels to form controls, improving navigation and understanding.

❓ selector

expert

Which CSS selector targets the element with id="main-content"?

Select the CSS selector that will style only the element with id="main-content".

A #main-content

B *main-content

C .main-content

D main-content

💡 Hint

Remember how CSS selects elements by ID.

The # symbol in CSS selects elements by their id. So #main-content targets the element with that exact ID.