HTML attributes

Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".

Part of: HTML and CSS Journey — Module 13

What it does: id="main-title" follows the name="value" format. It is placed inside the <h1> opening tag. Three attributes are listed in the opening tag, each separated by a space - no commas or other separators. Attributes always go in the opening tag, never in the closing tag. For example: <p class="note"> not </p class="note">. Attribute values must be wrapped in double quotes. class="header" is correct; class=header without quotes is invalid. href is used on <a> elements to specify the destination URL. src is used on <img> and <script> elements. class="intro" is an attribute that assigns the CSS class 'intro' to the paragraph element.

Common mistakes: The attribute value must be wrapped in double quotes. The correct form is class="intro" not class=intro without quotes. There must be no spaces around the equals sign in an attribute. The correct form is class="main" not class = "main" with spaces.

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 HTML attributes (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

Where are HTML attributes written?

Inside the opening tagInside the closing tag

Matches

↓

Attribute values must be in double quotes - class="intro" not class=intro

Applying

Meanings

Term

attribute

Meaning

Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".

Practice

<h1 class="title">Welcome</h1>

Testing

Gaps

<p ="intro">Hello</p>

Check Answer

Spots

1<p class=intro>Hello there.</p>

2<p id="note">A note here.</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. Where are HTML attributes written?

A. Inside the opening tag ✓

B. Inside the closing tag

Attributes always go in the opening tag, never in the closing tag. For example: <p class="note"> not </p class="note">.

2. Which of these is correct attribute syntax?

A. class="header" ✓

B. class=header

Attribute values must be wrapped in double quotes. class="header" is correct; class=header without quotes is invalid.

3. True or false: an element can have more than one attribute.

A. True ✓

B. False

An element can have multiple attributes separated by spaces, such as <p class="note" id="intro" style="color: red;">.

4. True or false: spaces are allowed around the = sign in an attribute.

A. False ✓

B. True

Attribute syntax must not have spaces around the equals sign. The correct form is name="value" not name = "value".

5. Which attribute is used to link an anchor element to another page?

A. href ✓

B. src

href is used on <a> elements to specify the destination URL. src is used on <img> and <script> elements.

Match the Pairs

<p class="intro">Welcome</p> → The class attribute assigns a CSS class name to the element - used to style multiple elements together

<a href="about.html">About</a> → The href attribute on an anchor element specifies the URL the link goes to when clicked

An attribute is written as name="value" inside the opening tag → <h1 id="main-title">Welcome</h1>

Multiple attributes on one element are separated by spaces → <p class="note" id="p1" style="color: red;">Text</p>

<p class=intro>Text</p> → Attribute values must be in double quotes - class="intro" not class=intro

<p>Text</p class="footer"> → Attributes must go in the opening tag only - never in the closing tag

Key Term

attribute

Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".

Fill in the Blanks

1. <p class="intro">Hello</p>

Hint: Type the attribute name that assigns a CSS class to an element

2. <a href="contact.html">Contact</a>

Hint: Type the attribute name used on anchor elements to specify the link destination

3. <h2 id="section-one">Introduction</h2>

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

4. <img src="photo.jpg" alt="A cat sitting">

Hint: Type the attribute name that provides alternative text for an image

5. <p style="color: blue;">Blue text.</p>

Hint: Type the attribute name used to apply inline CSS to an element

Spot the Error

Question 1

A <p class=intro>Hello there.</p>

B <p id="note">A note here.</p>

C <p>Normal text.</p>

Line A — The attribute value must be wrapped in double quotes. The correct form is class="intro" not class=intro without quotes.

Question 2

A <h1>Page Title</h1>

B <p class = "main">Content here.</p>

C <p>More text.</p>

Line B — There must be no spaces around the equals sign in an attribute. The correct form is class="main" not class = "main" with spaces.

Question 3

A <h2>Heading</h2>

B <p id="first">First.</p>

C <a Contact us</a>

D <p>Footer text.</p>

Line 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.

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>

Line 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".

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>

Line E — The closing tag must not contain attributes. The opening tag should be <a href="shop.html"> and the closing tag simply </a>.

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?