HTML Links

HTML Links

Links are fundamental to the web, connecting pages and resources. They allow users to navigate between web pages, documents, and other online content.

HTML Hyperlinks

HTML links are technically called hyperlinks.

A hyperlink can be text, an image, or another HTML element that users can click on to navigate to a different URL (Uniform Resource Locator) or a specific part of a document.

HTML Link Syntax

In HTML, links are created using the anchor tag <a>:

<a href="url">Link Text</a>

The most important attribute of the <a> element is href, which specifies the destination URL.

The content inside the <a> tags (e.g., “Link Text” above) is the visible part that users click on. This should be descriptive.

Example:

<a href="https://www.w3.org/">Visit the W3C Website</a>

Clicking on “Visit the W3C Website” will take the user to the specified URL.

Best Practice: Always use meaningful text for your links. Avoid generic phrases like “Click Here”. This improves accessibility for screen reader users and SEO.

Absolute vs. Relative URLs

The href attribute can contain either an absolute URL or a relative URL.

An Absolute URL is a full web address, including the protocol (like https://). It points to a specific location on the web.

<!-- Example of an absolute URL -->
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Documentation</a>

A Relative URL points to a file or directory within the same website, relative to the current page’s location. It does not include the domain name.

<!-- Example of a relative URL linking to a page in the same directory -->
<a href="about.html">About Us</a>

<!-- Example linking to a page in a subdirectory -->
<a href="/products/product1.html">View Product 1</a>

<!-- Example linking to a page in the parent directory -->
<a href="../index.html">Back to Homepage</a>

Best Practice: Use relative URLs for internal links (links within your own website). This makes your site more portable – if you change your domain name, the internal links won’t break.

Link Styling with CSS

By default, browsers style links distinctly:

• Unvisited links are typically blue and underlined.
• Visited links are typically purple and underlined.
• Active links (while being clicked) are often red and underlined.
• Hovering over a link usually changes the mouse cursor to a pointer.

You can customize the appearance of links using CSS (Cascading Style Sheets). The common pseudo-classes for styling links are:

• :link - Styles unvisited links.
• :visited - Styles links the user has already visited.
• :hover - Styles links when the user’s mouse pointer is over them.
• :active - Styles links during the moment they are being clicked.

Example using CSS (typically placed in an external .css file):

/* Basic link styling */
a {
  color: #007bff; /* Blue */
  text-decoration: none; /* Remove underline */
}

/* Style for visited links */
a:visited {
  color: #6a0dad; /* Purple */
}

/* Style when hovering over a link */
a:hover {
  color: #0056b3; /* Darker blue */
  text-decoration: underline; /* Add underline on hover */
}

/* Style when a link is being clicked */
a:active {
  color: #ff0000; /* Red */
}

Best Practice: Use external CSS files to style your website, including links. This separates presentation from structure and makes maintenance easier. Ensure sufficient contrast between link text and background colors for accessibility.

Link Targets

The target attribute specifies where to open the linked document.

Target Value	Description
_self	Opens the link in the same window/tab where it was clicked (This is the default behavior).
_blank	Opens the link in a new window or, more commonly, a new tab.
_parent	Opens the link in the parent frame (used with framesets, which are largely obsolete).
_top	Opens the link in the full body of the window, breaking out of any frames (also related to obsolete framesets).

Example opening a link in a new tab:

<a href="https://www.example.com" target="_blank">Example Site (opens new tab)</a>

Security Note: When using target="_blank", always add rel="noopener noreferrer" to prevent potential security vulnerabilities (tabnabbing).

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure Example Site (opens new tab)</a>

noopener prevents the new page from accessing the window.opener property, enhancing security.

noreferrer prevents the browser from sending the Referer HTTP header to the linked page.

Image Links

You can use an image as a link by nesting an <img> tag inside an <a> tag:

<a href="page.html">
  <img src="images/button.png" alt="Navigate to Page" style="width:80px; height:40px;">
</a>

Accessibility Best Practice: Ensure the <img> tag has a descriptive alt attribute. If the image contains text, the alt text should generally match the image text. If the image is purely decorative within the link, a descriptive alt attribute on the image explaining the link’s destination is still crucial.

Note: The border:0 style previously needed for older browsers like IE9 to remove default image borders is no longer necessary with modern CSS resets or defaults.

Linking to Page Fragments (Bookmarks)

You can create links that jump to specific sections within the same web page. These are often called bookmarks or fragment identifiers.

This is useful for long pages, allowing users to navigate quickly to relevant content (like a Table of Contents).

Step 1: Create the target element with an id attribute. The id value must be unique within the page.

<h2 id="section-features">Features Section</h2>
<p>Details about features...</p>

Step 2: Create a link pointing to that id using the hash symbol (#) followed by the id value.

<!-- Link from within the same page -->
<a href="#section-features">Jump to Features</a>

You can also link to a fragment on another page by appending the hash and id to the page’s URL:

<!-- Link from another page -->
<a href="details.html#section-features">View Features on Details Page</a>

Other Link Types

Links can also trigger actions like opening an email client or initiating a phone call:

Email Links (mailto:):

<a href="mailto:info@example.com?subject=Inquiry&body=Please send information">Contact Us via Email</a>

Telephone Links (tel:):

<a href="tel:+1-555-123-4567">Call Us: +1-555-123-4567</a>

Chapter Summary

• Use the <a> element to define hyperlinks.
• Use the href attribute to specify the destination URL (absolute or relative).
• Use meaningful link text for accessibility and SEO.
• Use the target="_blank" attribute to open links in a new tab, adding rel="noopener noreferrer" for security.
• Style links using CSS pseudo-classes (:link, :visited, :hover, :active). Prefer external CSS.
• Nest an <img> tag inside <a> to create image links; use a descriptive alt attribute.
• Create internal page bookmarks using id attributes on target elements and href="#idValue" on links.
• Use mailto: for email links and tel: for telephone links.

HTML Link Tag Reference

Tag	Description
<a>	Defines a hyperlink.