Lesson 4: HTML Links

Learning goals: By the end, you'll know how to create links to other pages, other websites, sections of the same page, email addresses and files.

What is a link?
Links (hyperlinks) are what make the web a web. They are created with the anchor element, <a>, and its href attribute.

htmlCopy<a href="https://example.com">Visit Example</a>  
Try:Agent|Desktop

• <a> is the anchor tag.
• href (hypertext reference) is the destination.
• The content between the tags is the link text people click.

Absolute vs. relative URLs

Relative paths depend on where your files sit:

htmlCopy<a href="about.html">Same folder</a>  
<a href="pages/contact.html">Inside a subfolder</a>  
<a href="../index.html">One folder up</a>  
Try:Agent|Desktop

Use relative links for your own pages. They keep working when you move your site to a new domain.

Opening links in a new tab

htmlCopy<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>  
Try:Agent|Desktop

• target="_blank" opens the link in a new tab.
• rel="noopener noreferrer" is a security best practice for external links.
• Use new tabs sparingly. Many users prefer to choose for themselves.

Linking within the same page (anchors)
Give an element an id, then link to it with #.

htmlCopy<a href="#contact">Jump to Contact</a>  
  
<!-- ...lots of content... -->  
  
<h2 id="contact">Contact</h2>  
Try:Agent|Desktop

You can also link to a section on another page: <a href="about.html#team">Meet the team</a>.

Email, phone and file links

htmlCopy<a href="mailto:hello@example.com">Email us</a>  
<a href="tel:+441234567890">Call us</a>  
<a href="guide.pdf" download>Download the guide</a>  
Try:Agent|Desktop

Linking an image
Put an <img> inside the anchor to make it clickable (images are covered in Lesson 5).

htmlCopy<a href="index.html">  
  <img src="logo.png" alt="Home">  
</a>  
Try:Agent|Desktop

Writing good link text

Good link text makes sense out of context. Screen reader users often scan a list of links alone.

Useful attributes

Common mistakes

• Forgetting https:// on external links, which makes the browser treat them as relative
• Wrong file paths or mismatched capitalisation (About.html vs about.html)
• Missing quotes around the href value
• Vague link text like "click here"
• Using spaces in file names (use my-page.html)

Key takeaways

• <a href="..."> creates a link.
• Use absolute URLs for other sites and relative URLs for your own pages.
• #id links jump to a section on a page.
• mailto: and tel: open email and phone apps.
• Descriptive link text improves accessibility.

Exercises

1. Identify. In <a href="contact.html" target="_blank">Contact us</a>, is the URL absolute or relative? What does target do?
   Answer: relative. target="_blank" opens the link in a new tab.
2. Fix the errors.

   htmlCopy<a href=example.com>Visit<a>  
   <a href="mailto hello@example.com">Email me</a>  
   Try:Agent|Desktop

   
   Hints: quote the href and add https://, close with </a>, and use mailto: with a colon.
3. Build it. Create two files, index.html and about.html. Add:
   • a link from index.html to about.html
   • a link back from about.html to index.html
   • an external link that opens in a new tab
   • a mailto: link
4. Challenge. On a long page, create a "table of contents" at the top with #id links to three sections. Add a "Back to top" link at the bottom of each section.

Lesson 4 checkpoint

• I can create a link with <a href>.
• I know when to use absolute and relative URLs.
• I can link to a section of a page using #id.
• I can write clear, descriptive link text.