The id attribute

An HTML attribute that gives an element a unique identifier on the page. No two elements may share the same id value.

Part of: HTML and CSS Journey — Module 14

What it does: Both elements have different id values: wrapper and content. This is correct - every id on the page must be unique. about-us uses a hyphen to separate words. This is valid. A space like id="about us" would be invalid. id values cannot contain spaces. Use hyphens or underscores to separate words: main-heading or main_heading. id values are case-sensitive. Header and header are treated as different identifiers. Like all attributes, id goes in the opening tag only. Closing tags must not contain attributes. id is used by CSS (#id-name) and JavaScript (getElementById) to select and manipulate a specific element. Spaces are not allowed in id values. Use a hyphen or underscore instead: id="my-id" or id="my_id".

Common mistakes: id values cannot contain spaces. Use a hyphen or underscore instead: id="main-title" or id="main_title". HTML attribute names must be lowercase. ID with a capital letter is non-standard. The correct form is id="main-nav".

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of The id attribute (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

True or false: two elements on the same page can share the same id value.

FalseTrue

Matches

<p id="intro">First.</p> <p id="intro">Second.</p>

↓

The id value 'intro' is used twice - every id must be unique across the entire page

Applying

Meanings

Term

Meaning

An HTML attribute that gives an element a unique identifier on the page. No two elements may share the same id value.

Practice

Testing

Gaps

<h1 ="main-title">Welcome</h1>

Check Answer

Spots

1<h1 id="main title">Page Title</h1>

2<p id="intro">Introduction.</p>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. True or false: two elements on the same page can share the same id value.

A. False ✓

B. True

id values must be unique across the entire page. Using the same id twice is invalid HTML.

2. Which of these is a valid id value?

A. main-heading ✓

B. main heading

id values cannot contain spaces. Use hyphens or underscores to separate words: main-heading or main_heading.

3. True or false: id="Header" and id="header" are the same id value.

A. False ✓

B. True

id values are case-sensitive. Header and header are treated as different identifiers.

4. Where is the id attribute written?

A. Inside the opening tag ✓

B. Inside the closing tag

Like all attributes, id goes in the opening tag only. Closing tags must not contain attributes.

5. True or false: id=intro without quotes is valid HTML.

A. False ✓

B. True

Attribute values must be wrapped in double quotes. The correct form is id="intro".

Match the Pairs

<h1 id="main-title">Welcome</h1> → Gives the h1 element the unique identifier 'main-title' - no other element on the page may use this id

<p id="intro">First paragraph.</p> → The paragraph has the unique id 'intro' - it can be selected with #intro in CSS or getElementById in JavaScript

id values must be unique - no two elements on the same page may share the same id → <div id="wrapper"> <p id="content">Text.</p> </div>

id values cannot contain spaces - use hyphens or underscores to separate words → <section id="about-us">About.</section>

<p id="intro">First.</p> <p id="intro">Second.</p> → The id value 'intro' is used twice - every id must be unique across the entire page

<div id="my section">Content.</div> → id values must not contain spaces - use id="my-section" or id="my_section" instead

Key Term

id

An HTML attribute that gives an element a unique identifier on the page. No two elements may share the same id value.

Fill in the Blanks

1. <h1 id="main-title">Welcome</h1>

Hint: Type the attribute name that gives an element a unique identifier

2. <section id="about"><p>About us.</p></section>

Hint: Type the attribute that uniquely identifies this section element

3. <p id="intro">First paragraph.</p>

Hint: Type the attribute name used to uniquely identify this paragraph

4. <body> <div id="wrapper">Content here.</div> </body>

Hint: Type the attribute that gives this div a unique name on the page

Hint: Type the attribute name that uniquely identifies this footer element

Spot the Error

Question 1

A <h1 id="main title">Page Title</h1>

B <p id="intro">Introduction.</p>

C <p id="body-text">Content.</p>

Line A — id values cannot contain spaces. Use a hyphen or underscore instead: id="main-title" or id="main_title".

Question 2

A <header id="site-header">

B <nav ID="main-nav">

C </nav>

D </header>

Line B — HTML attribute names must be lowercase. ID with a capital letter is non-standard. The correct form is id="main-nav".

Question 3

A <section id="about">

B <h2>About Us</h2>

C <p id="about">Our story.</p>

D </section>

Line C — The id value "about" is used twice on the same page. Every id must be unique - change one of them, for example to id="about-text".

Question 4

A <p id="intro">First.</p>

B <p id="body">Second.</p>

C <p id="outro">Third.</p>

D <p id>Fourth.</p>

Line D — The id attribute on the fourth paragraph is missing its value. An id attribute must always have a value in double quotes: id="unique-name".

Question 5

A <body>

B <div id="wrapper">

C <p id="lead">Lead paragraph.</p>

D <p id="lead">Second paragraph.</p>

E </div>

F </body>

Line D — The id value "lead" appears twice. id values must be unique across the entire page - the second paragraph needs a different id.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?