HTML
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.
- 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.asp">HTML Images</a>
Here, the relative URL links to a page (html_images.asp
) 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 email SitePoint</a>
Output:
This will open the user's default email app, pre-filled with the provided email address.
Phone Link Example:
<a href="tel:+1234567890">Call me</a>
Output:
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='<https://www.sitepoint.com/jobs-for-developers/>'">Go to SitePoint Jobs</button>
Output:
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="<https://www.sitepoint.com/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?
Absolutely! You can style your links using CSS to change their appearance. Common pseudo-classes like :hover
or :visited
allow for dynamic link behavior when users interact with the link.
a { color: blue; }
a:hover { color: red; }
What is a normal link in HTML?
A normal link, or "anchor" in HTML, is an element that leads users to another webpage or resource when clicked. It’s typically underlined and blue, signaling it’s clickable.
Example of a normal link:
<a href="https://www.sitepoint.com/">Visit SitePoint</a>