📖 Hyperlinks

Hyperlinks are the interactive elements that connect the web. They allow users to jump between pages or resources by clicking on text, images, or buttons. Without hyperlinks, navigating the web would be nearly impossible.

When designing a site, consider using multiple smaller pages focused on single topics. Then link them together with intuitive navigation. This creates a more usable experience — especially on mobile devices — and makes it easier for visitors to find the information they need.

Hyperlinks are created using the anchor tag <a> and its href attribute. The href tells the browser what address to load when the link is clicked.

<a href="https://www.dallascollege.edu/pages/default.aspx">Dallas College</a>

Result:

Visit the Dallas College website for more information.

Absolute Addressing

When you link to an external site, use the full web address, including the protocol (https://), domain name, and file path. This is called an absolute address. Absolute addresses are generally used for external site links.

Absolute Address
https://www.dallascollege.edu/pages/default.aspx

Relative Addressing

Relative links are used to connect pages within your own site. These do not include the domain name — only the path and file name relative to the current page. Relative addresses are best for linking to internal pages, images, and stylesheets within your own site.

  • Same folder: <a href="about.html">About</a>
  • Subfolder: <a href="courses/itse1301.html">ITSE 1301</a>
  • Parent folder: <a href="../index.html">Home</a>

Relative links are easier to maintain if your site moves to a different domain or hosting server.

Writing Clear Link Text

Effective hyperlink text should describe the destination. Avoid vague phrases like Click here or More info. Instead, use meaningful text that helps users — including those using screen readers — understand where the link goes.

✅ Good Example
<a href="about.html">Learn more about our program</a>
❌ Poor Example
<a href="about.html">Click here</a>
Accessibility Tip
If the link contains only an icon or image, add an aria-label to provide a screen reader description.

If a file is missing or named incorrectly, the browser will return a 404 Not Found error.

Page Not Found Error Example
Example of a 404 error when a hyperlink is broken

Attributes can enhance hyperlinks with additional behavior or information.

href
Specifies the URL of the linked resource.
target
_blank opens the link in a new browser tab.
Example: <a href="https://www.dallascollege.edu" target="_blank">Dallas College</a>
rel
Defines the relationship between the linked page and the current page.
Example: <a href="..." rel="noopener">
title
Provides a tooltip that appears when hovering over the link.
Example: <a href="..." title="Dallas College home page link">
id
Assigns a unique identifier to an element, useful for destination anchors.
class
Groups elements for styling. Multiple elements can share the same class.
aria-label
Provides a hidden label for screen readers. Useful when the link contains only an icon or image.
Example: <a href="..." aria-label="Download resume"><img src="icon.svg" alt=""></a>

Linking Images, Email, and Phone Numbers

Wrap the <img> element inside an <a> tag to make an image clickable.

<a href="topic1.html">
  <img src="image.png" alt="Link to Topic 1">
</a>
<a href="mailto:you@example.com">Email Me</a>
<a href="tel:19728604329">Call Us</a>

Linking Within the Same Page

You can create internal links to jump to different sections of the same page. Avoid using the same id value more than once per page. Also test your anchor links on small screens — if your site has a fixed header, it may cover the anchor target.

Step 1: Add an ID to the Destination

<h4 id="topic1">Topic 1</h4>
<a href="#topic1">Jump to Topic 1</a>

Linking to Anchors on Other Pages

<a href="contents.html#topic1">Topic 1 on Contents Page</a>

Good navigation helps users move through your site confidently and efficiently.

  • Make it easy to find. Place nav menus where users expect them — usually across the top or down the left side.
  • Keep it consistent. Use the same structure and styling on every page.
  • Use clear labels. Avoid vague names like “tools” or “resources.”
  • Limit your links. Stick to 8–10 primary nav links to avoid overwhelming users.
  • Highlight the current page. Help users know where they are by styling the active section.

Sample Navigation Bar

You'll learn how to style a navigation bar later, but here's a simple example using the <nav> tag and separators:

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="projects.html">Projects</a>
</nav>

Summary / Takeaways

Hyperlinks are one of the most essential elements in web development. You've learned how to create links using absolute and relative paths, write meaningful link text, and apply common attributes like target, rel, and aria-label. You also practiced linking to other pages, sections of the same page, and using images, email addresses, and phone numbers as links. Mastering these skills lays the foundation for user-friendly and accessible navigation.

Additional Resources

Last updated: June 18, 2025 at 10:15 PM