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.