← HTML & CSS

Links (a and href)

An attribute on the <a> element that specifies the URL destination of the hyperlink. Without href, the link has no destination to navigate to.

Part of: HTML and CSS Journey — Module 16

What it does: href="guide.html" is the destination. The <a> element sits inline inside the paragraph. <a> is the anchor element for hyperlinks. <link> is a head element used to attach stylesheets - it does not create clickable links. href holds the URL destination on <a> elements. src is used on <img> and <script> to specify a file path. Relative URLs like about.html point to pages within the same site. Absolute URLs include the full protocol: https://example.com. The text between <a href="..."> and </a> is what the user sees and clicks. The URL goes inside the href attribute. HTML tag names must be lowercase. <A> is non-standard - use <a>.

Common mistakes: The href attribute is missing its value. It must be href="url" with a destination URL in double quotes. The href value is missing its closing double quote. It should be href="index.html".

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 Links (a and href) (PDF)

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which element is used to create a hyperlink in HTML?
<a><link>
Matches
<a href>Click here</a>
↓
href must have a value - href="url" with a destination URL in double quotes
Applying
Meanings
Term
href
Meaning
An attribute on the <a> element that specifies the URL destination of the hyperlink. Without href, the link has no destination to navigate to.
Practice
<a href="index.html">Home</a>
Testing
Gaps
<a ="about.html">About</a>
Check Answer
Spots
1<a href>Click here</a>
2<p>Some text.</p>

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

The 'Seal' badge — Smooth Formatter, one of Cloodit's 106 collectible badges
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. Which element is used to create a hyperlink in HTML?
A. <a> ✓
B. <link>
<a> is the anchor element for hyperlinks. <link> is a head element used to attach stylesheets - it does not create clickable links.
2. Which attribute on <a> sets the link destination?
A. href ✓
B. src
href holds the URL destination on <a> elements. src is used on <img> and <script> to specify a file path.
3. True or false: href="about.html" is a relative URL.
A. True ✓
B. False
Relative URLs like about.html point to pages within the same site. Absolute URLs include the full protocol: https://example.com.
4. What goes between the opening and closing <a> tags?
A. The visible link text the user clicks ✓
B. The href URL value
The text between <a href="..."> and </a> is what the user sees and clicks. The URL goes inside the href attribute.
5. True or false: <a> without an href attribute is invalid HTML.
A. False ✓
B. True
<a> without href is valid HTML - it renders as text with no destination. It may be used as a placeholder or targeted by JavaScript.

Match the Pairs

<a href="about.html">About us</a> → A link that navigates to about.html when clicked - 'About us' is the visible clickable text
<a href="https://bbc.com">BBC</a> → An absolute URL link - includes the full protocol https:// to navigate to an external site
href specifies the URL destination - without it the anchor has no link to follow → <p>Read the <a href="guide.html">guide</a>.</p>
<a> is an inline element - it wraps text inside block elements like <p> or <li> → <li><a href="shop.html">Shop</a></li>
<a href>Click here</a> → href must have a value - href="url" with a destination URL in double quotes
<href="page.html">Go</href> → <href> is not an HTML element - use <a href="page.html">Go</a> instead

Key Term

href
An attribute on the <a> element that specifies the URL destination of the hyperlink. Without href, the link has no destination to navigate to.

Fill in the Blanks

1. <a href="about.html">About</a>
Hint: Type the attribute name that sets the link destination URL
2. <a href="contact.html">Contact</a>
Hint: Type the element name used to create a hyperlink
3. <p>See the <a href="faq.html">FAQ</a> page.</p>
Hint: Type the attribute that provides the URL destination for this link
4. <a href="https://example.com">Visit</a>
Hint: Type the attribute name that holds the full URL for an external link
5. <a href="home.html">Home</a>
Hint: Type the element name for the closing tag of a hyperlink

Spot the Error

Question 1
A <a href>Click here</a>
B <p>Some text.</p>
C <p>More text.</p>
Line A — The href attribute is missing its value. It must be href="url" with a destination URL in double quotes.
Question 2
A <p>Visit our site:</p>
B <a href="index.html>Home</a>
C <p>Thanks for visiting.</p>
Line B — The href value is missing its closing double quote. It should be href="index.html".
Question 3
A <nav>
B <a href="home.html">Home</a>
C <href="about.html">About</href>
D <a href="contact.html">Contact</a>
E </nav>
Line C — <href> is not an HTML element. Links use the <a> element: <a href="about.html">About</a>.
Question 4
A <ul>
B <li><a href="one.html">One</a></li>
C <li><a href="two.html">Two</a></li>
D <li><A href="three.html">Three</A></li>
E </ul>
Line D — HTML tag names must be lowercase. <A> and </A> are non-standard - use <a> and </a>.
Question 5
A <p>Links below:</p>
B <a href="news.html">News</a>
C <a href="sport.html">Sport</a>
D <a href="weather.html">Weather</a>
E <a>Travel</a>
Line E — The anchor element is missing the href attribute. Without href, the link has no destination. Add href="url".
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?