ID attribute in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the id attribute in HTML?

The id attribute gives a unique identifier to an HTML element. It helps to target that element with CSS, JavaScript, or links.

beginner

Can two elements have the same id value on one HTML page?

No, each id value must be unique on a page. Using the same id twice can cause errors in styling and scripting.

beginner

How do you select an element with a specific id in CSS?

Use the hash symbol (#) followed by the id value. For example, #header { color: blue; } styles the element with id="header".

beginner

How can the id attribute be used in HTML for navigation?

You can link to an element with an id by using a URL with a hash (#) and the id value. For example, <a href="#section1">Go to Section 1</a> jumps to the element with id="section1".

intermediate

Why is it important for id values to be unique and descriptive?

Unique id values prevent conflicts in CSS and JavaScript. Descriptive names make code easier to read and maintain, like naming id="main-header" instead of id="h1".

What symbol is used in CSS to select an element by its id?

A .

B #

C *

D @

In CSS, the hash symbol (#) is used to select elements by their id.

Which of the following is true about the id attribute?

A An <code>id</code> must be unique on the page.

B <code>id</code> is only used for styling.

C <code>id</code> values can contain spaces.

D Multiple elements can share the same <code>id</code>.

Each id must be unique on the page. It cannot contain spaces and is used for styling, scripting, and navigation.

How would you link to a section with id="contact" in an HTML page?

A <code>&lt;a src="#contact"&gt;Contact&lt;/a&gt;</code>

B <code>&lt;a href="contact"&gt;Contact&lt;/a&gt;</code>

C <code>&lt;a id="contact"&gt;Contact&lt;/a&gt;</code>

D <code>&lt;a href="#contact"&gt;Contact&lt;/a&gt;</code>

To link to an element with an id, use href="#idValue".

Which is a valid id value?

A main-header

B 123 header

C my id

D header 1

Valid id values cannot contain spaces and should start with a letter. 'main-header' is valid.

What happens if two elements share the same id?

A The browser ignores both elements.

B Only the first element is styled or targeted.

C It causes errors or unexpected behavior in CSS and JavaScript.

D It is allowed and works fine.

Duplicate id values can cause errors or unexpected behavior in styling and scripting.

Explain what the id attribute is and why it must be unique in an HTML document.

Think about how you find a specific person in a crowd by their unique name.

Describe how you can use the id attribute to create a link that jumps to a specific part of a webpage.

Imagine a table of contents that takes you directly to a chapter.

Practice

1. What is the main purpose of the id attribute in HTML?

easy

A. To uniquely identify one element on the page

B. To add a class to multiple elements

C. To create a hyperlink to another page

D. To add inline styles to an element

Solution

1. Step 1: Understand the role of the id attribute

   The id attribute is used to give a unique name to one element on the page.

2. Step 2: Compare with other attributes

   Unlike classes, which can be shared by many elements, id must be unique and identifies only one element.

3. Final Answer:

   To uniquely identify one element on the page -> Option A

4. Quick Check:

   ID attribute = unique element identifier [OK]

Hint: ID is for one unique element only [OK]

Common Mistakes:

• Thinking ID can be used on multiple elements
• Confusing ID with class attribute
• Using ID to add styles to many elements

2. Which of the following is the correct way to add an ID to a div element?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check correct syntax for ID attribute

   The ID attribute must be written as id='value' with quotes around the value.

2. Step 2: Identify the correct option

   <div id='header'></div> uses correct syntax with quotes and equals sign. <div id header></div> misses equals sign, and D uses wrong colon syntax.

3. Final Answer:

   <div id='header'></div> -> Option D

4. Quick Check:

   ID attribute syntax = id='value' [OK]

Hint: ID attribute needs quotes and equals sign [OK]

Common Mistakes:

• Omitting quotes around ID value
• Using colon instead of equals sign
• Confusing class and ID syntax

3. What will be the visible result in the browser for this HTML snippet?

<style>#title { color: red; }</style>
<h1 id='title'>Welcome</h1>
<h1 id='title'>Hello</h1>

medium

A. Only the second heading appears in red

B. Neither heading appears in red

C. Both headings appear in red

D. Only the first heading appears in red

Solution

1. Step 1: Understand ID uniqueness and CSS application

   The CSS targets the element with id='title'. IDs should be unique, but here two elements share the same ID.

2. Step 2: Browser behavior with duplicate IDs

   Browsers apply styles to all elements matching the selector, even if IDs are duplicated, so both headings get red color.

3. Final Answer:

   Both headings appear in red -> Option C

4. Quick Check:

   CSS applies styles to all matching elements regardless of ID uniqueness [OK]

Hint: Duplicate IDs style all matching elements in CSS [OK]

Common Mistakes:

• Assuming all elements with same ID get styled differently
• Thinking IDs prevent CSS styling on duplicates
• Ignoring browser behavior on duplicates

4. Identify the error in this HTML snippet:

<div id='main'>Content</div>
<div id='main'>More Content</div>

medium

A. Missing closing tags

B. Using the same ID on multiple elements

C. Incorrect attribute name

D. ID value should be a number

Solution

1. Step 1: Check for ID uniqueness

   The snippet uses id='main' on two different div elements, which breaks the rule that IDs must be unique.

2. Step 2: Verify other syntax

   Tags are properly closed, attribute names are correct, and ID values can be any string, so no other errors apply.

3. Final Answer:

   Using the same ID on multiple elements -> Option B

4. Quick Check:

   ID must be unique per element [OK]

Hint: Each ID must be unique on the page [OK]

Common Mistakes:

• Reusing same ID on multiple elements
• Confusing ID with class for multiple elements
• Thinking ID values must be numeric

5. You want to create a navigation menu where each link scrolls to a different section on the same page. Which is the correct way to use the id attribute to achieve this?

hard

A. Assign unique IDs to each section and use <a href='#id'> to link

B. Use the same ID on all sections and link with <a href='#id'>

C. Use classes on sections and link with <a href='.class'>

D. Use inline styles to scroll to sections

Solution

1. Step 1: Understand linking with IDs

   To link to a part of the page, each target section must have a unique id attribute.

2. Step 2: Use anchor links with href='#id'

   The links use href='#id' to jump to the section with that ID. Using unique IDs ensures correct navigation.

3. Final Answer:

   Assign unique IDs to each section and use <a href='#id'> to link -> Option A

4. Quick Check:

   Unique IDs + href='#id' = page section links [OK]

Hint: Unique IDs + href='#id' create page anchors [OK]

Common Mistakes:

• Using same ID on multiple sections
• Trying to link with classes in href
• Using styles instead of IDs for navigation