HTML Links

HTML links, or hyperlinks, are the backbone of web navigation, enabling users to move between pages or access resources effortlessly. These links can be applied to text, images, or any HTML element, making your website interactive and easy to explore. Whether you're guiding users to another page, file, or external site, links are essential for a fluid browsing experience.

Links aren’t limited to text alone—you can create clickable images or even style entire sections of a page as interactive elements!

HTML Links Syntax

HTML links are defined using the <a> (anchor) tag with the href attribute specifying the link's destination.

• The <a> tag is what creates the hyperlink. The text or content that appears between the opening <a> and closing </a> tags is what users will see as the clickable part of the link.
• The href attribute is used to specify the URL (Uniform Resource Locator) or destination that the link points to.

Example:

<a href="https://www.sitepoint.com/community/">Visit SitePoint
Community for Developers!</a>

Output:

Visit SitePoint Community for Developers!

In this example, the visible text "Visit SitePoint Jobs for Developers!" is the clickable link, which directs users to https://www.sitepoint.com/community/.

Default Link Styles

Browsers automatically apply styles to links based on their state:

• Unvisited links appear underlined and blue, signaling to users that the link hasn't been clicked yet.
• Visited links are underlined and purple, showing that the user has previously visited the link.
• Active links (those currently being clicked) appear underlined and red, indicating interaction.

These default HTML Links styles can be customized with CSS to fit the design of your website.

HTML Links and the target Attribute

The target attribute controls where a linked document will open when clicked, adding flexibility to how users navigate your site. Here are the most common values you’ll encounter:

• _self: Opens the link in the same tab or window (this is the default behavior, so you don’t need to specify it unless you want to override another setting).
• _blank: Opens the link in a new browser tab or window, perfect for when you want users to access external content without losing their place on your site.
• _parent: Opens the link in the parent frame, useful if your site uses frames (though these are much less common now).
• _top: Opens the link in the full window, overriding any frames or nested browsing contexts.

Example:

<a href="https://www.sitepoint.com/jobs-for-developers/"
target="_blank">Open SitePoint Jobs in a New Tab</a>

Output:

Open SitePoint Jobs in a New Tab

In this example, the link to SitePoint Jobs will open in a new tab, thanks to the target="_blank" attribute. This is often used when linking to external websites, allowing users to explore other content without leaving your page.

Absolute URLs vs. Relative URLs

When creating links in HTML, you can choose between absolute and relative URLs, depending on how you want to navigate between web pages.

Type of URLs	Description
Absolute URLs	These contain the entire web address, including the protocol (such as https://), domain, and path. They are used when linking to external websites or resources
Relative URLs	These point to resources within the same website, using a path relative to the current page's location. They're ideal for internal linking when you don’t need to specify the full URL

Example of Absolute URL:

<a href="https://www.sitepoint.com/blog/">SitePoint Blog</a>

In this example, the absolute URL links to the SitePoint blog page by providing the full web address.

Example of Relative URL:

<a href="html_images.php">HTML Images</a>

Here, the relative URL links to a page (html_images.php) within the same directory as the current webpage. This approach simplifies internal site navigation without needing the full URL for every link.

Another Example of Relative URL:

<a href="/jobs-for-developers/">SitePoint Jobs</a>

Here, the relative URL links to the /jobs-for-developers/ page within the same website's directory structure. This method streamlines internal navigation by avoiding the need for the full URL, making site maintenance and updates more manageable.

Use of Base Path

The <base> tag is used to define the base URL for all relative URLs in a document. When the <base> tag is included in the <head> section of an HTML document, it sets a reference point for all links (including images, stylesheets, scripts, etc.), so that you don’t have to repeat the full URL for each link.

Syntax

<base href="https://www.sitepoint.com">

This sets the base URL as https://www.sitepoint.com. Now, all relative links in the document will be considered relative to this URL.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Using Base Path</title>
    <base href="https://www.sitepoint.com">
</head>
<body>
    <a href="/blog/">Visit SitePoint Blog for Top-Notch Developers</a>
    <img src="/images/logo.png" alt="SitePoint Logo">
</body>
</html>

In this example:

• The link will point to https://www.sitepoint.com/blog/, even though only the relative path /blog/ is used.
• The image will be loaded from https://www.sitepoint.com/images/logo.png.

Using an Image as a Link

You can easily turn an image into a clickable link by wrapping the <img> tag inside an <a> tag. This is a great way to create visually appealing, interactive links.

Example:

<a href="https://www.sitepoint.com/jobs-for-developers/">
  <img src="image.jpg" alt="SitePoint Jobs"
  style="width:100px;height:100px;">
</a>

In this example, clicking on the image will take users to the SitePoint Jobs page.

Email and Phone Links

HTML allows you to create links that directly open an email client or initiate a phone call with just one click.

Email Link Example:

<a href="mailto:support@sitepoint.com">Send an email to SitePoint</a>

Output:

Send an email to SitePoint

This will open the user's default email client, pre-filled with the provided email address.

Phone Link Example:

<a href="tel:+1234567890">Call me</a>

Output:

Call me

Clicking on this link on a mobile device will prompt a phone call to the specified number.

Using a Button as a Link

You can make an HTML button function like a link using JavaScript. This approach often works well for creating a more interactive user experience.

Example:

<button onclick="window.location.href='/jobs-for-developers/'">
Go to SitePoint Jobs</button>

Output:

Go to SitePoint Jobs

Here, clicking the button takes you to the SitePoint Jobs page, blending the feel of a button with the functionality of a link.

Link Titles

The title attribute provides additional information about a link, which is displayed as a tooltip when the user hovers over it. This can be helpful for accessibility and adding context.

Example:

<a href="/premium/library/all/htmlcss/"
title="Explore HTML books & courses">Visit SitePoint HTML Premium
Section</a>

Output:

Visit SitePoint HTML Premium Section

In this case, hovering over the link will show the tooltip "Explore job opportunities for developers on SitePoint," giving users more insight into the link's destination.

FAQ on HTML Links

How to create a basic hyperlink in HTML?

To create a hyperlink, use the <a> tag with the href attribute. The href defines the URL where the link will take users.

<a href="https://www.sitepoint.com/html/">Visit SitePoint HTML
Tutorials</a>

How to open an HTML link in a new tab or window?

To open a link in a new tab or window, add the target="_blank" attribute to your anchor tag. This ensures the link doesn't navigate away from the current page.

<a href="https://www.sitepoint.com/jobs-for-developers/"
target="_blank">Open SitePoint Jobs in a New Tab</a>

Can I style HTML hyperlinks with CSS?

Yes, HTML hyperlinks can be effectively styled with CSS to enhance their appearance and usability. CSS provides control over various link states through pseudo-classes like :hover for interactions on mouseover and :visited for previously clicked links.

a { color: blue; }
a:hover { color: red; }