Lesson 1, Topic 1

In Progress

Lesson 2.7: Hyperlinks and Advanced Link Types

Lesson 2.7 – Hyperlinks & Advanced Link Types | Knowledge Pillars HCCS

Lesson Objectives

Create hyperlinks using the <a> anchor tag and href attribute
Build all six link types: external, internal, anchor/jump, email, phone, and download
Use target="_blank" and rel="noopener noreferrer" safely
Create anchor (jump) links to specific sections of the same page using id
Write descriptive, accessible link text — never "click here"
Understand the mailto:, tel:, and download advanced link attributes

Part 1: The <a> Tag — How Every Link Works

Every hyperlink on the web is built with the same element: the <a> tag (short for anchor). Unlike most HTML elements, the anchor tag wraps around the clickable content — which can be text, an image, or even a whole section — and uses the href attribute to define where clicking it takes the user.

<a href="https://www.example.com" ← destination URL or resource

target="_blank" ← optional: open in a new tab

rel="noopener noreferrer"> ← security requirement with _blank

Visit Example.com ← the visible, clickable text

</a>

href — where the link goes (required)

target="_blank" — opens new tab

rel="noopener noreferrer" — required security pair

Link text — visible, clickable; must be descriptive

The <a> Tag Attributes Reference
Attribute	Required?	Purpose
`href`	Yes	The destination — a URL, file path, email, phone number, or section ID
`target="_blank"`	No	Opens the link in a new browser tab instead of the current one
`rel="noopener noreferrer"`	With `_blank`	Security: prevents the new tab from accessing or controlling the original page
`title`	No	Tooltip text shown on hover — adds extra context for users
`download`	No	Triggers a file download instead of navigating to the resource

Part 2: The Six Link Types You Need to Know

The href attribute is more powerful than it looks. Depending on what you put inside it, the same <a> tag can navigate to a website, jump to a section, open an email app, dial a phone, or trigger a file download. Here are all six types:

External Link

Links to another website. Always use the full URL starting with https://. Use target="_blank" to open in a new tab — and always pair it with rel="noopener noreferrer".

<a href="https://wikipedia.org"
   target="_blank"
   rel="noopener noreferrer">
  Visit Wikipedia
</a>
          

Internal Link

Links to another page within your own website. Use a relative file path — no full URL needed. The path is relative to the current file's location.

<a href="about.html">
  About Me
</a>

<!-- In a subfolder: -->
<a href="pages/contact.html">
  Contact
</a>
          

Anchor / Jump Link

Scrolls to a specific section on the same page by targeting an element's id. The link's href starts with # followed by the target ID. Essential for long-page navigation.

<!-- The link: -->
<a href="#contact">Jump to Contact</a>

<!-- The target section: -->
<section id="contact">
  ...
</section>
          

Email Link Exam 2.8

Opens the user's default email application with your address pre-filled in the "To" field. Uses the mailto: prefix. A must-have for any contact section.

<a href="mailto:you@email.com">
  Send me an email
</a>

<!-- With subject pre-filled: -->
<a href="mailto:you@email.com
?subject=Hello!">
  Send a message
</a>
          

Phone Link Exam 2.8

On mobile devices, tapping a tel: link automatically opens the phone dialer with the number ready to call. Use international format with + and country code for best compatibility.

<a href="tel:+15551234567">
  Call: (555) 123-4567
</a>
          

Download Link Exam 2.8

The download attribute forces the browser to download the linked file instead of opening it. You can optionally give the downloaded file a custom name. Perfect for résumés, PDFs, or resources.

<a href="files/resume.pdf"
   download="Jordan-Resume.pdf">
  Download My Resume (PDF)
</a>
          

Part 3: Building Page Navigation with Anchor Links

Anchor links are one of the most useful tools for long webpages. By giving each major section an id attribute and linking to it with href="#section-id", you can create a navigation menu at the top of the page that jumps users directly to what they want to read.

<!-- Navigation menu at the top of the page -->
<nav>
  <a href="#about">About Me</a>
  <a href="#hobbies">Hobbies</a>
  <a href="#contact">Contact</a>
</nav>

<!-- Sections further down the page -->
<section id="about">
  <h2>About Me</h2>
  <p>Hi! I'm Jordan...</p>
</section>

<section id="hobbies">
  <h2>My Hobbies</h2>
</section>

<section id="contact">
  <h2>Contact Me</h2>
</section>
      

💡 ID Naming Rules: Section IDs must be unique on the page, use lowercase letters, and replace spaces with hyphens — e.g., id="about-me", not id="About Me". The href in your link must match the id exactly, including the # prefix.

Part 4: Writing Accessible Link Text

The text inside your <a> tags is called link text. It's the most important part of any link — it tells users (and screen readers) exactly where the link goes before they click it. Screen readers often read links out of the context of the surrounding paragraph, so link text must make sense on its own.

❌ Vague — Never Use These

<a href="...">Click here</a> <a href="...">Read more</a> <a href="...">Here</a> <a href="...">Link</a> /* Meaningless out of context. A screen reader announces: "Click here... link" ← useless */

✅ Descriptive — Always Use These

<a href="...">Visit Wikipedia</a> <a href="...">Read my blog post on HTML</a> <a href="...">Download Resume (PDF)</a> <a href="...">Send me an email</a> /* Meaningful on its own. Screen reader announces: "Visit Wikipedia... link" ✓ */

♿ WCAG Requirement: Descriptive link text is not just good practice — it's required by WCAG 2.4.4 (Link Purpose). All links must clearly communicate their destination or function from the link text alone or in combination with surrounding context.

🖼️ Image Links: If your link contains only an image (no text), the image's alt attribute becomes the link text for screen readers. Make sure it describes the link's destination — e.g., alt="Visit our Facebook page", not just alt="Facebook logo".

Part 5: New Tabs & Security — `target` and `rel`

Opening external links in a new tab (target="_blank") is a common pattern — it keeps your page open while the user browses away. But it comes with a subtle security risk: by default, the new tab can access and manipulate the originating page through JavaScript. The fix is simple and must always be paired together.

❌ Unsafe — Missing rel

<a href="https://example.com" target="_blank"> Visit Example </a> /* The new tab can access window.opener and potentially redirect your page. Risky! */

✅ Safe — Always Add rel

<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Visit Example </a> /* noopener blocks access to window.opener. noreferrer hides the referrer URL. */

⚠️ Rule to Memorize: Whenever you write target="_blank", you must also write rel="noopener noreferrer" on the same tag. They are always a pair. Omitting rel is a known security vulnerability called "reverse tabnapping."

💡 When Should You Use target="_blank"? Use it for external links to other websites — it keeps your page open in its own tab. For internal links (other pages on your own site) or anchor links (same-page jumps), you generally do not need target="_blank".

🖥️ Code Skills Lab Reminder

💾 Save to Compile! As you work through today's activity in the Knowledge Pillars Code Skills Lab, press Ctrl + S (Windows) or Cmd + S (Mac) after each step. The Lab compiles on every save — click each link you add to verify it navigates correctly!

Student Activity

🔗 Link It

Add All Six Link Types to Your Webpage — Code Skills Lab

Open your index.html in the Code Skills Lab. You're going to add a complete set of links to your personal webpage — covering every type. Work through each step and save after every change. Test every link you add!

Add a page navigation menu using anchor links. At the top of your <body>, add a <nav> element with jump links to your main sections. Then add matching id attributes to each section.
 <nav> <a href="#about">About Me</a> | <a href="#interests">Interests</a> | <a href="#contact">Contact</a> </nav>  <section id="about">...</section> <section id="interests">...</section> <section id="contact">...</section>
💾 Save — clicking the nav links should jump down the page!
Add an external link. In one of your paragraphs, link to a website you actually use. Use target="_blank" and rel="noopener noreferrer". Make the link text descriptive!
<p> One of my favorite resources is <a href="https://www.codecademy.com" target="_blank" rel="noopener noreferrer" title="Free interactive coding tutorials"> Codecademy </a>, where I practice HTML and CSS. </p>
💾 Save — click the link to confirm it opens in a new tab!
Add a mailto: email link. In your Contact section, give visitors an easy way to reach you directly.
<section id="contact"> <h2>Contact Me</h2> <p> Want to connect? <a href="mailto:jordan@email.com"> Send me an email </a>. </p> </section>
💾 Save — clicking the link should open your email client!
Add a tel: phone link. Add a phone number to your contact section. On a mobile device, tapping this dials the number automatically.
<p> Or <a href="tel:+15551234567"> call me at (555) 123-4567 </a>. </p>
💾 Save — on a phone this would dial the number directly!
Add a download link. Create a text file in your project called resume.txt (or use any file you have). Link to it with the download attribute so clicking triggers a download instead of navigation.
<p> <a href="files/resume.pdf" download="Jordan-Resume.pdf"> ⬇ Download My Resume (PDF) </a> </p>
💾 Save — clicking this should prompt a file download!

📋 Example: What Your Complete Contact Section Might Look Like

<section id="contact">
  <h2>Contact Me</h2>

  <p>
    Want to get in touch? 
    <a href="mailto:jordan@email.com">Send me an email</a>
     or 
    <a href="tel:+15551234567">call me: (555) 123-4567</a>.
  </p>

  <p>
    <a href="files/resume.pdf" download="Jordan-Resume.pdf">
      ⬇ Download My Resume (PDF)
    </a>
  </p>
</section>
        

🌟 Bonus Challenges

Ready to go further? Try these advanced link techniques:

1. Make your profile image a clickable link — wrap your <img> in an <a> tag. Remember: the image's alt text becomes the link text for screen readers, so make it descriptive of the destination:

<a href="#about">
  <img src="images/profile.jpg"
       alt="Jump to About Me section"
       width="150" height="150">
</a>
        

2. Pre-fill an email subject line using a query string in your mailto: link. The %20 encodes spaces in the URL:

<a href="mailto:jordan@email.com
?subject=Hello%20from%20your%20website
&body=Hi%20Jordan,">
  Email me with subject pre-filled
</a>
        

3. Style your links with CSS to remove the default underline and add a hover effect:

a {
  color: #0a2463;
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  text-decoration: underline;
  color: #1d4e9f;
}
        

💾 Remember to save in the Code Skills Lab after each change!

Troubleshooting Tips

External link not working? Make sure the URL starts with https:// — not just www.. A link like href="www.google.com" will try to find a local file named "www.google.com" and fail. Always use the full URL.
Anchor link not jumping to the right section? The href="#name" value must exactly match the id="name" on the target element — same spelling, same case, no spaces. Check both ends carefully.
mailto: link not opening an email app? This requires a default email client configured on the device. It works on most phones and desktops, but may not work in browser-based email environments like Gmail in a browser. It's still the correct code — the behavior depends on the user's setup.
Download link opening the file instead of downloading? The download attribute only works for files on the same domain as your page — it doesn't force downloads from external URLs due to browser security restrictions. Make sure the file is in your own project folder.
Link text is just "click here" or "read more"? Replace it with a description of the destination. Screen readers read link text out of context — make it meaningful on its own. This is also a WCAG requirement (2.4.4).

Lesson Summary

Lesson 2.7 — Hyperlinks & Advanced Link Types Reference
Link Type / Attribute	Syntax	Purpose
External link	`href="https://..."`	Navigates to another website — always use full URL
Internal link	`href="page.html"`	Navigates to another page within your own site
Anchor / jump link	`href="#section-id"`	Jumps to an element with a matching `id` on the same page
Email link	`href="mailto:you@email.com"`	Opens the user's email client with your address pre-filled
Phone link	`href="tel:+15551234567"`	On mobile, tapping opens the phone dialer ready to call
Download link	`href="file.pdf" download`	Triggers a file download instead of opening in the browser
`target="_blank"`	On `<a>` tag	Opens link in a new browser tab
`rel="noopener noreferrer"`	Always with `_blank`	Security: prevents the new tab from accessing the original page
`title="text"`	On `<a>` tag	Shows a tooltip on hover — adds helpful context

Knowledge Check

Read each question carefully and select the best answer. Each question has one correct response.

1. Which href value would you use to create a link that jumps to a section with id="projects" on the same page?

2. Why must rel="noopener noreferrer" always be paired with target="_blank"?

3. Which href value creates a link that opens the user's email app with your address pre-filled?

4. Which link text example follows accessibility best practices?

5. What does the download attribute on an <a> tag do?

Lesson Checklist

I added a <nav> with anchor jump links at the top of my page
Each section has a unique id that matches a nav link's href="#id"
I added at least one external link with target="_blank" and rel="noopener noreferrer"
I added a mailto: email link in my contact section
I added a tel: phone link in international format
I added a download link for a file in my project folder
All my link text is descriptive — no "click here" or "read more"
I tested every link I added to confirm it works correctly
I saved my file in the Code Skills Lab after each change

Lesson 2.7: Hyperlinks and Advanced Link Types

Lesson Objectives

Part 1: The <a> Tag — How Every Link Works

Part 2: The Six Link Types You Need to Know

Part 3: Building Page Navigation with Anchor Links

Part 4: Writing Accessible Link Text

Part 5: New Tabs & Security — target and rel

🖥️ Code Skills Lab Reminder

Student Activity

Add All Six Link Types to Your Webpage — Code Skills Lab

🌟 Bonus Challenges

Troubleshooting Tips

Lesson Summary

Knowledge Check

Lesson Checklist

Part 5: New Tabs & Security — `target` and `rel`