Computer Science
Grade 6
20 min
Adding Links: The `<a>` Tag and Hyperlinks
Create hyperlinks to link to other webpages or sections within the same page.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define the terms hyperlink, `<a>` tag, and `href` attribute.
Construct a valid HTML hyperlink to an external website.
Use the `target` attribute to make a link open in a new browser tab.
Create a relative link to another page within the same project folder.
Explain the difference between an absolute URL and a relative URL.
Turn an image into a clickable hyperlink by nesting an `<img>` tag inside an `<a>` tag.
Ever wondered how you can jump from one website to another with just a single click? 🖱️ It's like a magic portal, and today you'll learn how to build them yourself!
In this lesson, we'll unlock the power of the anchor tag, `<a>`, which is the secret code behind every hyperlink on the internet. You'll learn...
2
Key Concepts & Vocabulary
TermDefinitionExample
HyperlinkA clickable piece of text or an image that acts as a portal, taking you to a new web page or a different spot on the same page.On a search results page, the blue, underlined text for each result is a hyperlink.
<a> Tag (Anchor Tag)The HTML tag used to create a hyperlink. It 'anchors' a link to a piece of text or an image.<a>This is the tag that makes links!</a>
href AttributeStands for 'Hypertext Reference'. It's a special instruction inside the `<a>` tag that tells the browser the destination URL (the web address) to go to when the link is clicked.<a href="https://www.nasa.gov">Visit NASA</a>
AttributeExtra information added inside an HTML opening tag to change its behavior or provide mo...
3
Core Syntax & Patterns
Basic External Link Syntax
<a href="ABSOLUTE_URL">Clickable Text</a>
Use this pattern to link to any other website on the internet. The `href` value must be the complete web address, and the text between the tags is what the user will see and click on.
New Tab Link Syntax
<a href="URL" target="_blank">Clickable Text</a>
Add the `target="_blank"` attribute inside the opening `<a>` tag when you want the link to open in a new tab. This is great for external links so users don't lose their place on your site.
Relative (Internal) Link Syntax
<a href="FILENAME.html">Clickable Text</a>
Use this to link between pages of your own website that are in the same folder. The `href` val...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A website's navigation menu uses relative links like `href="about.html"`. These links break when viewed from a page inside a subfolder (e.g., `products/item1.html`). Which of the following is the most robust solution to make the navigation work from anywhere on the site?
A.Using `href="../about.html"` on every page in a subfolder.
B.Using full absolute URLs (e.g., `https://...`) for all navigation links.
C.Using root-relative paths (e.g., `href="/about.html"`) for all navigation links.
D.Creating a different menu for each subfolder.
Challenging
Why is it better for accessibility to use descriptive link text like 'Read our company history' instead of 'Click here'?
A.'Click here' is too long for a screen reader to say.
B.Search engines like Google give a lower rank to pages that use 'Click here'.
C.The words 'Click here' use too much computer memory.
D.Screen readers can list all links on a page, and a list of 'Click here' links gives no context.
Challenging
You want to create a single link that does all of the following: uses an image named `cart.png`, links to `shopping_cart.html`, opens in a new tab, and shows the tooltip 'View your cart' on hover. Which code snippet correctly does this?
A.<a href="shopping_cart.html" target="_blank" title="View your cart"><img src="cart.png"></a>
B.<img src="cart.png" href="shopping_cart.html" target="_blank" title="View your cart">
C.<a href="shopping_cart.html" new_tab="true" tooltip="View your cart"><img src="cart.png"></a>
D.<a href="shopping_cart.html"><img src="cart.png" target="_blank" title="View your cart"></a>
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free