The id attribute
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. True or false: two elements on the same page can share the same id value.
2. Which of these is a valid id value?
3. True or false: id="Header" and id="header" are the same id value.
4. Where is the id attribute written?
5. True or false: id=intro without quotes is valid HTML.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<h1 id="main-title">Welcome</h1> | A<section id="about-us">About.</section> | |
| 2<p id="intro">First paragraph.</p> | BGives the h1 element the unique identifier 'main-title' - no other element on the page may use this id | |
| 3id values must be unique - no two elements on the same page may share the same id | CThe paragraph has the unique id 'intro' - it can be selected with #intro in CSS or getElementById in JavaScript | |
| 4id values cannot contain spaces - use hyphens or underscores to separate words | DThe id value 'intro' is used twice - every id must be unique across the entire page | |
| 5<p id="intro">First.</p> <p id="intro">Second.</p> | Eid values must not contain spaces - use id="my-section" or id="my_section" instead | |
| 6<div id="my section">Content.</div> | F<div id="wrapper"> <p id="content">Text.</p> </div> |
C
Definitions
id
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<h1 ___="main-title">Welcome</h1>
2.
<section ___="about"><p>About us.</p></section>
3.
<p ___="intro">First paragraph.</p>
4.
<body>
<div ___="wrapper">Content here.</div>
</body>
5.
<footer ___="site-footer"><p>Copyright 2024.</p></footer>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<h1 id="main title">Page Title</h1>
B
<p id="intro">Introduction.</p>
C
<p id="body-text">Content.</p>
Question 2
A
<header id="site-header">
B
<nav ID="main-nav">
C
</nav>
D
</header>
Question 3
A
<section id="about">
B
<h2>About Us</h2>
C
<p id="about">Our story.</p>
D
</section>
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>
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>
Answer Key
The id attribute
Section A: Quick Questions
Q1
A — False
Q2
B — main-heading
Q3
A — False
Q4
B — Inside the opening tag
Q5
A — False
Section B: Match the Pairs
Q1
<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
Q2
<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
Q3
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>
Q4
id values cannot contain spaces - use hyphens or underscores to separate words → <section id="about-us">About.</section>
Q5
<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
Q6
<div id="my section">Content.</div> → id values must not contain spaces - use id="my-section" or id="my_section" instead
Section C: Definitions
Q1
id — An HTML attribute that gives an element a unique identifier on the page. No two elements may share the same id value.Section D: Fill in the Blanks
Q1
<h1 id="main-title">Welcome</h1>Q2
<section id="about"><p>About us.</p></section>Q3
<p id="intro">First paragraph.</p>Q4
<body>
<div id="wrapper">Content here.</div>
</body>Q5
<footer id="site-footer"><p>Copyright 2024.</p></footer>Section E: Spot the Error
Q1
A — id values cannot contain spaces. Use a hyphen or underscore instead: id="main-title" or id="main_title".
Q2
B — HTML attribute names must be lowercase. ID with a capital letter is non-standard. The correct form is id="main-nav".
Q3
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".
Q4
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".
Q5
D — The id value "lead" appears twice. id values must be unique across the entire page - the second paragraph needs a different id.