HTML attributes
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Where are HTML attributes written?
2. Which of these is correct attribute syntax?
3. True or false: an element can have more than one attribute.
4. True or false: spaces are allowed around the = sign in an attribute.
5. Which attribute is used to link an anchor element to another page?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<p class="intro">Welcome</p> | AAttribute values must be in double quotes - class="intro" not class=intro | |
| 2<a href="about.html">About</a> | B<h1 id="main-title">Welcome</h1> | |
| 3An attribute is written as name="value" inside the opening tag | CAttributes must go in the opening tag only - never in the closing tag | |
| 4Multiple attributes on one element are separated by spaces | DThe class attribute assigns a CSS class name to the element - used to style multiple elements together | |
| 5<p class=intro>Text</p> | EThe href attribute on an anchor element specifies the URL the link goes to when clicked | |
| 6<p>Text</p class="footer"> | F<p class="note" id="p1" style="color: red;">Text</p> |
C
Definitions
attribute
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<p ___="intro">Hello</p>
2.
<a ___="contact.html">Contact</a>
3.
<h2 ___="section-one">Introduction</h2>
4.
<img src="photo.jpg" ___="A cat sitting">
5.
<p ___="color: blue;">Blue text.</p>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<p class=intro>Hello there.</p>
B
<p id="note">A note here.</p>
C
<p>Normal text.</p>
Question 2
A
<h1>Page Title</h1>
B
<p class = "main">Content here.</p>
C
<p>More text.</p>
Question 3
A
<h2>Heading</h2>
B
<p id="first">First.</p>
C
<a Contact us</a>
D
<p>Footer text.</p>
Question 4
A
<p>Normal paragraph.</p>
B
<p class="note">A note.</p>
C
<p style="color: red;">Red text.</p>
D
<p class="note" class="highlight">Two classes.</p>
Question 5
A
<a href="index.html">Home</a>
B
<a href="about.html">About</a>
C
<a href="contact.html">Contact</a>
D
<a href="blog.html">Blog</a>
E
</a href="shop.html">Shop</a>
Answer Key
HTML attributes
Section A: Quick Questions
Q1
B — Inside the opening tag
Q2
B — class="header"
Q3
A — True
Q4
A — False
Q5
A — href
Section B: Match the Pairs
Q1
<p class="intro">Welcome</p> → The class attribute assigns a CSS class name to the element - used to style multiple elements together
Q2
<a href="about.html">About</a> → The href attribute on an anchor element specifies the URL the link goes to when clicked
Q3
An attribute is written as name="value" inside the opening tag → <h1 id="main-title">Welcome</h1>
Q4
Multiple attributes on one element are separated by spaces → <p class="note" id="p1" style="color: red;">Text</p>
Q5
<p class=intro>Text</p> → Attribute values must be in double quotes - class="intro" not class=intro
Q6
<p>Text</p class="footer"> → Attributes must go in the opening tag only - never in the closing tag
Section C: Definitions
Q1
attribute — Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".Section D: Fill in the Blanks
Q1
<p class="intro">Hello</p>Q2
<a href="contact.html">Contact</a>Q3
<h2 id="section-one">Introduction</h2>Q4
<img src="photo.jpg" alt="A cat sitting">Q5
<p style="color: blue;">Blue text.</p>Section E: Spot the Error
Q1
A — The attribute value must be wrapped in double quotes. The correct form is class="intro" not class=intro without quotes.
Q2
B — There must be no spaces around the equals sign in an attribute. The correct form is class="main" not class = "main" with spaces.
Q3
C — The anchor element is missing the closing > on the opening tag. It should be <a href="...">Contact us</a> with a properly formed opening tag.
Q4
D — An element cannot have the same attribute listed twice. To apply multiple classes, use a single class attribute with space-separated values: class="note highlight".
Q5
E — The closing tag must not contain attributes. The opening tag should be <a href="shop.html"> and the closing tag simply </a>.