Links are one of the most important building blocks of the web. Without links, websites would feel like isolated pages with no clear path for users to explore more content. From navigating between pages to opening external resources, downloading files, or jumping to a specific section on the same page, HTML links make everything possible.
In this guide, you will learn how to add links in HTML step by step, starting from the basics and moving into more practical and modern use cases. This article is written to stay evergreen, meaning the concepts here will remain relevant no matter how much the web evolves.
What Is a Link in HTML?
A link in HTML is also known as a hyperlink. It allows users to click on text, images, or other elements to move from one page to another or to another resource entirely.
Links can point to:
- Another page on the same website
- A page on a different website
- A specific section on the same page
- Email addresses
- Phone numbers
- Downloadable files
HTML links are created using the anchor tag, written as <a>
The Basic HTML Link Syntax
The most basic form of an HTML link looks like this:
<a href=”https://example.com”>Visit Example</a>
Let’s break it down:
<a>is the anchor taghrefstands for Hypertext Reference- The value inside
hrefis the destination URL - The text between
<a>and</a>is what users click
When a user clicks “Visit Example,” the browser navigates to the provided URL.
Adding Links to External Websites
External links take users from your website to another website. This is common when referencing tutorials, documentation, or sources.
Example:
By default, this link opens in the same browser tab. While this is fine in many cases, opening external links in a new tab is often preferred.
Opening Links in a New Tab
To open a link in a new tab, you use the target attribute with the value _blank.
This ensures users do not completely leave your website when clicking external links.
Best Practice Tip
When using target="_blank", it’s recommended to also include:
This improves security and performance.
Adding Links to Pages Within the Same Website
Internal links help users move between pages on your website. They also improve SEO and site structure.
Example:
If the file is inside a folder:
Internal links usually use relative paths, which makes your website easier to maintain.
Linking to Sections on the Same Page (Anchor Links)
Sometimes you want a link to scroll to a specific section on the same page. This is useful for:
- Table of contents
- Long articles
- FAQ sections
Step 1: Add an ID to an Element
Step 2: Link to That ID
When clicked, the browser scrolls directly to that section.
Adding Email Links in HTML
Email links allow users to click and open their default email application.
You can also prefill the subject line:
This is commonly used on contact pages and footers.
Adding Phone Number Links
Phone links are especially useful for mobile users.
When clicked on a smartphone, this opens the phone dialer with the number already filled in.
Linking Images in HTML
Links are not limited to text. You can also make images clickable by wrapping them inside an anchor tag.
This is often used for:
- Logo links
- Banner ads
- Featured content cards
Download Links in HTML
HTML links can also be used to download files like PDFs, images, or documents.
The download attribute tells the browser to download the file instead of opening it.
You can also specify a filename:
Styling Links with CSS (Basic Overview)
By default, links appear blue and underlined. You can customize this using CSS.
Common link states:
a– defaulta:hover– when hovereda:active– when clickeda:visited– after visiting
Example:
Good link styling improves usability and accessibility.
Accessibility Best Practices for HTML Links
Accessibility ensures your website works for everyone, including users with screen readers.
Use Descriptive Link Text
Avoid this:
Use this:
Avoid Empty or Broken Links
Every link should have a clear purpose and destination.
Ensure Links Are Keyboard Accessible
Standard anchor tags already support keyboard navigation, which is another reason to use them correctly.
Common Mistakes to Avoid When Adding Links
- Using vague text like “click here”
- Forgetting
https://in external links - Opening every link in a new tab unnecessarily
- Nesting links inside other links (invalid HTML)
- Not testing links after deployment
Avoiding these mistakes improves both user experience and SEO.
Why Learning HTML Links Is So Important
Understanding how to add links in HTML is one of the first steps in becoming a confident web developer. Links connect content, guide users, and shape how people experience the web.
They are simple to create, but powerful in impact. Mastering them early gives you a strong foundation for learning CSS, JavaScript, and modern frameworks later on.
Adding links in HTML is easy to learn but incredibly important to master. From simple navigation to advanced use cases like anchor links, email actions, and downloads, HTML links form the backbone of every functional website.
By understanding how links work, using them correctly, and following best practices, you create websites that are more usable, accessible, and professional. This knowledge remains relevant across all web technologies, making it a truly evergreen skill.