HTML Links

Learn how to create hyperlinks using the HTML anchor element to connect webpages, open external websites, navigate to page sections, send emails, make phone calls, and download files.

Introduction

In the previous lesson, you learned about HTML Comments and how developers use them to document, organize, and temporarily disable HTML code.

Now imagine a website containing only one page. Visitors could read that page, but they would have no direct way to move to another page, visit another website, jump to another section, download a document, send an email, or start a phone call.

The World Wide Web works because documents and resources are connected together through hyperlinks.

HTML provides the anchor element to create these connections. A link can connect one page to another page, another website, a file, an email address, a phone number, or a specific location inside a document.

Basic HTML Link

<a href="about.html">About Us</a>

Create Webpage Content

↓

Add an Anchor Element

↓

Specify a Destination

↓

Display Clickable Link Text

↓

User Activates the Link

↓

Browser Opens the Destination

Links Connect the Web

Without hyperlinks, webpages would remain isolated documents. Links connect pages and resources into the interconnected system known as the World Wide Web.

What are HTML Links?

An HTML link, also called a hyperlink, is a clickable connection from one location to another.

A link can send the user to another webpage, another website, a file, an email address, a phone number, or a specific section of the current page.

HTML links are created using the <a> anchor element. The destination is normally specified using the href attribute.

Simple Hyperlink

<a href="https://example.com">
    Visit Example
</a>

Normal Text

Displays information.
Does not navigate by itself.
Usually remains on the current page.
Has no destination unless placed inside a link.

Hyperlink

Can display clickable content.
Connects to a destination.
Can navigate to another resource.
Uses the anchor element.

Websites

Open another website or online resource.

Pages

Navigate between pages of the same website.

Files

Open or download documents and other resources.

Sections

Jump directly to a specific location inside a page.

Email

Open an email application with a recipient address.

Phone

Open a supported phone dialer using a telephone link.

Simple Definition

An HTML link is a clickable connection that allows a user to move from one location or resource to another.

Why Do We Need Links?

Modern websites usually contain many pages and resources. Users need a clear way to move between those locations.

Links provide the connections that make website navigation, resource sharing, search engine discovery, and the wider structure of the web possible.

Without Links

Pages remain isolated from one another.
Users cannot navigate naturally between pages.
Resources are harder to discover.
Multi-page website navigation becomes impossible.
The interconnected structure of the web disappears.

With Links

Pages can connect to one another.
Users can navigate through websites.
Resources can be shared directly.
Files and documents can be accessed.
Websites become interconnected experiences.

Navigation

Connect Home, About, Services, Contact, and other pages.

External Resources

Send users to useful websites and references.

Content Discovery

Help users and search engines discover related pages.

Resource Sharing

Provide access to documents, images, and downloadable files.

Communication

Create direct email and telephone actions.

Page Navigation

Move users directly to specific sections of long pages.

User Opens a Page

↓

User Finds a Link

↓

User Activates the Link

↓

Browser Resolves the Destination

↓

Destination is Loaded or Action is Started

Foundation of Web Navigation

Links are one of the fundamental technologies that allow users to move through websites and across the World Wide Web.

Real-World Analogy

Imagine a city containing homes, schools, libraries, hospitals, shops, and offices.

Roads connect these locations and allow people to travel from one place to another.

Webpages work in a similar way. Individual pages are like locations, while hyperlinks act like roads connecting those locations.

City Roads and HTML Links

City Navigation            Web Navigation
───────────────            ──────────────

Home                       Home Page
  │                           │
  ▼ Road                      ▼ Link
School                     About Page
  │                           │
  ▼ Road                      ▼ Link
Library                    Contact Page

City

Contains different locations.
Roads connect destinations.
People choose where to travel.
Signs describe destinations.

Website

Contains different pages and resources.
Links connect destinations.
Users choose where to navigate.
Link text describes destinations.

Links Are Digital Roads

A hyperlink creates a navigable path between resources in much the same way that a road connects physical locations.

HTML Anchor Element & Parts

HTML links are created using the <a> anchor element.

The href attribute specifies the destination, while the content between the opening and closing anchor tags becomes the clickable link content.

General Link Syntax

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

Anchor Element Anatomy

<a href="https://example.com">Visit Example</a>
── ───────────────────────── ───────────── ──
│              │                   │         │
│              │                   │         └── Closing Tag
│              │                   │
│              │                   └── Link Text
│              │
│              └── Destination
│
└── Opening Anchor Tag

Part	Example	Purpose
Anchor element	<a>...</a>	Creates the hyperlink
href attribute	href="about.html"	Specifies the destination
Link text	About Us	Provides the clickable content
Closing tag	</a>	Ends the anchor element

1️⃣ Anchor Element

The <a> element creates the hyperlink.

2️⃣ href Attribute

The href value identifies the destination.

3️⃣ Link Content

The content inside the anchor becomes clickable.

Complete Anchor Example

<a href="about.html">
    About Us
</a>

href Means Hypertext Reference

The href attribute contains the reference or destination that the browser should follow when the link is activated.

Example 1: External Website

A link can connect your webpage to an external website.

External destinations normally use a complete URL that includes the protocol and domain name.

External Website Link

<a href="https://www.google.com">
    Visit Google
</a>

External Link Example

User Clicks Visit Google

↓

Browser Reads the href Value

↓

Browser Resolves the External URL

↓

Request is Sent to the Destination

↓

Destination Website Opens

Complete Address for External Websites

External website links normally use a complete address such as https://www.example.com.

Absolute vs Relative URLs

The href attribute can contain different types of URLs. Two of the most important are absolute URLs and relative URLs.

An absolute URL contains a complete address, while a relative URL describes a destination relative to the current website or document location.

Absolute URL

Contains a complete web address.
Usually includes the protocol.
Usually includes the domain name.
Commonly used for external websites.

Relative URL

Uses a path relative to the current site or file.
Does not require the full domain.
Commonly used for internal navigation.
Makes internal links easier to move between environments.

Absolute URL

<a href="https://www.wikipedia.org">
    Wikipedia
</a>

Relative URL

<a href="about.html">
    About Us
</a>

Feature	Absolute URL	Relative URL
Example	https://example.com/about	about.html
Complete address	Yes	No
Includes domain	Usually yes	No
Common use	External resources	Internal pages
Depends on current location	No	Yes

Relative Path Examples

Current Folder
│
├── index.html
├── about.html
│
├── pages
│   └── contact.html
│
└── documents
    └── guide.pdf


From index.html:

about.html
pages/contact.html
documents/guide.pdf

Use Relative URLs for Internal Pages

Relative URLs are usually preferred for navigation between pages and resources inside the same website.

Example 2: Link to Another HTML Page

Suppose a project contains an index.html file and an about.html file in the same folder.

The index page can link to the about page using a relative URL.

Project Structure

website
│
├── index.html
└── about.html

Internal Page Link

<a href="about.html">
    About Us
</a>

Internal Link Example

User Opens index.html

↓

User Clicks About Us

↓

Browser Resolves about.html

↓

Browser Loads the File

↓

About Page is Displayed

File Location Matters

A relative URL must correctly describe where the destination file is located relative to the current document.

Example 3: Opening a Link in a New Tab

By default, activating a normal link usually loads the destination in the current browsing context.

The target="_blank" attribute value requests that the destination open in a new browsing context, commonly a new browser tab.

Open Link in New Tab

<a
    href="https://www.google.com"
    target="_blank"
>
    Open Google in New Tab
</a>

Attribute	Value	Purpose
href	https://www.google.com	Specifies the destination
target	_blank	Requests a new browsing context
Link content	Open Google in New Tab	Provides clickable text

Default Link

Usually opens in the current tab.
Replaces the current page.
Common for internal navigation.
Keeps navigation behavior predictable.

target="_blank"

Usually opens a new tab.
Keeps the current page available.
Can be useful for external resources.
Should be used intentionally.

New Tab with rel

<a
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Visit External Resource
</a>

Do Not Open Every Link in a New Tab

Use new-tab behavior intentionally. Internal navigation normally works best in the current tab, while selected external resources may be appropriate for a new tab.

Example 4 & 5: Email & Telephone Links

The href attribute can use special URL schemes to start supported actions instead of navigating to a normal webpage.

The mailto scheme can open a configured email application, while the tel scheme can open a supported telephone dialer.

Email Link

Uses the mailto scheme to start an email action.

Telephone Link

Uses the tel scheme to start a supported phone action.

Email Link

<a href="mailto:info@example.com">
    Email Us
</a>

Telephone Link

<a href="tel:+911234567890">
    Call Us
</a>

Link Type	Scheme	Example
Email	mailto:	mailto:info@example.com
Telephone	tel:	tel:+911234567890

User Activates Special Link

↓

Browser Reads the URL Scheme

↓

Operating System Finds a Supported Application

↓

Application Opens

↓

Requested Action is Prepared

Behavior Depends on the Device

Email and telephone links depend on the applications and capabilities configured on the user’s device.

Example 6: Downloading a File

An anchor element can link directly to a file such as a PDF, image, document, or archive.

The download attribute can suggest that the browser download the linked resource instead of navigating to it.

Download Link

<a href="notes.pdf" download>
    Download Notes
</a>

Custom Download Filename

<a
    href="notes.pdf"
    download="html-notes.pdf"
>
    Download HTML Notes
</a>

Part	Example	Purpose
href	notes.pdf	Identifies the file
download	download	Suggests downloading the resource
download value	html-notes.pdf	Can suggest a filename
Link content	Download Notes	Describes the action

User Clicks Download Link

↓

Browser Finds the Resource

↓

Download Behavior is Requested

↓

Browser Processes the File

↓

File is Saved According to Browser Behavior

Browser and Server Rules Still Apply

Download behavior can depend on browser behavior, resource origin, server headers, and other security rules.

Linking to a Section on the Same Page

Links can navigate to a specific element inside the same document.

First, the destination element receives a unique id. The link then uses a fragment identifier beginning with # followed by that id.

Same-Page Link

<!-- Link -->

<a href="#contact">
    Go to Contact Section
</a>


<!-- Target Section -->

<h2 id="contact">
    Contact Us
</h2>

Fragment Navigation

href="#contact"
        │
        ▼
Find element with
id="contact"
        │
        ▼
Navigate to that
page location

Part	Example	Purpose
Target id	id="contact"	Identifies the destination element
Fragment link	href="#contact"	References the target id
# symbol	#	Introduces the fragment identifier

Create a Target Element

↓

Assign a Unique id

↓

Create a Link with #id

↓

User Activates the Link

↓

Browser Navigates to the Target Section

Useful for Long Pages

Same-page links are commonly used in tables of contents, documentation pages, FAQs, and long articles.

Browser Rendering Flow

When a browser processes an anchor element, it creates an interactive hyperlink associated with the destination specified by the href attribute.

Read HTML Source

↓

Find the Anchor Element

↓

Read the href Destination

↓

Create an Interactive Link

↓

Apply Browser or CSS Styling

↓

Wait for User Activation

↓

Resolve and Open the Destination

Simplified Link Processing

HTML Source
    │
    ▼
Find <a> Element
    │
    ▼
Read href Value
    │
    ▼
Create Hyperlink
    │
    ▼
Display Clickable Content
    │
    ▼
User Activates Link
    │
    ▼
Resolve Destination
    │
    ▼
Navigate or Start Action

Source Link

<a href="about.html">
    About Us
</a>

Links Become Interactive

Unlike ordinary text, an anchor element with a destination provides navigation or another link-related action when activated.

Real-World Applications

Links appear throughout almost every type of website and web application.

Company Websites

Connect Home, About, Services, Careers, and Contact pages.

Educational Platforms

Connect courses, lessons, references, exercises, and resources.

E-Commerce

Connect categories, products, carts, accounts, and checkout pages.

Government Portals

Provide access to forms, documents, notifications, and services.

News Websites

Connect headlines, articles, categories, authors, and related stories.

Documentation

Connect topics and create same-page table-of-contents navigation.

Contact Pages

Provide email and telephone actions.

Download Centers

Provide access to documents, software, and other files.

Advantages of HTML Links

Navigation

Connect pages into a usable website structure.

Connectivity

Connect local pages with resources across the web.

Discovery

Help users find related information and resources.

Resource Access

Provide direct access to files and documents.

Communication

Create email and telephone actions.

Fast Page Navigation

Jump directly to specific sections in long documents.

Search Discovery

Links help search engines discover relationships between pages.

Accessibility

Meaningful links help users understand available destinations and actions.

Connect webpages together.
Create multi-page website navigation.
Connect websites to external resources.
Allow users to discover related content.
Provide direct access to files.
Support document downloads.
Create email actions.
Create telephone actions.
Navigate to sections within the same page.
Create tables of contents.
Connect educational lessons and resources.
Support product and category navigation.
Help users move through documentation.
Improve information discovery.
Form a fundamental part of the World Wide Web.

Common Beginner Mistakes

Forgetting the href Attribute

Without an href destination, the anchor does not provide normal hyperlink navigation.

Using the Wrong File Path

A relative URL must correctly match the location of the destination file.

Using the Wrong File Name

The link must match the actual filename, including spelling and relevant letter case.

Omitting the URL Scheme

Writing google.com may be interpreted as a relative path instead of an external website address.

Opening Every Link in a New Tab

Use target="_blank" intentionally rather than applying it to every link.

Using Unclear Link Text

Text such as Click Here does not clearly describe the destination when read outside its surrounding context.

Creating Broken Links

Links fail when destination pages are moved, renamed, deleted, or written incorrectly.

Using Duplicate Target IDs

Same-page destinations should use unique id values.

Include the href Attribute

<!-- ❌ Missing destination -->

<a>Google</a>


<!-- ✅ Destination provided -->

<a href="https://www.google.com">
    Google
</a>

Use the Correct External URL

<!-- ❌ May be treated as a relative path -->

<a href="google.com">
    Google
</a>


<!-- ✅ Complete external URL -->

<a href="https://www.google.com">
    Google
</a>

Use the Correct File Path

<!-- Project Structure

website/
├── index.html
└── pages/
    └── about.html

-->


<!-- ❌ Wrong -->

<a href="about.html">
    About
</a>


<!-- ✅ Correct -->

<a href="pages/about.html">
    About
</a>

Use Meaningful Link Text

<!-- ❌ Unclear -->

<a href="/privacy">
    Click Here
</a>


<!-- ✅ Descriptive -->

<a href="/privacy">
    Read Our Privacy Policy
</a>

Poor Link Usage

Missing destinations.
Incorrect file paths.
Unclear link text.
Every link opens a new tab.
Broken or outdated destinations.

Better Link Usage

Correct href destinations.
Accurate relative paths.
Meaningful link text.
Intentional new-tab behavior.
Regularly tested destinations.

Test Your Links

A link may look correct while still pointing to the wrong destination. Test important navigation and resource links regularly.

Best Practices

Use meaningful and descriptive link text.
Describe the destination or action clearly.
Avoid vague text such as Click Here when better wording is available.
Use relative URLs for internal website navigation when appropriate.
Use complete absolute URLs for external websites.
Include the correct protocol for external web addresses.
Keep internal paths accurate.
Match destination filenames exactly.
Remember that filename case can matter on many servers.
Use target="_blank" intentionally.
Avoid opening every internal link in a new tab.
Consider rel="noopener noreferrer" for external new-tab links.
Test links after renaming files.
Test links after moving pages.
Check for broken links regularly.
Use unique id values for same-page targets.
Make same-page link text descriptive.
Use mailto links only when an email action is appropriate.
Use tel links when phone interaction is useful.
Use the download attribute when download behavior is appropriate.
Do not assume every browser handles downloads identically.
Keep navigation structure consistent.
Make important links easy to identify.
Do not rely only on color to communicate link meaning.
Keep link behavior predictable for users.

Professional Link Examples

<!-- Internal navigation -->

<a href="/about">
    About Us
</a>


<!-- External resource -->

<a
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Visit External Resource
</a>


<!-- Email -->

<a href="mailto:info@example.com">
    Email Our Team
</a>


<!-- Telephone -->

<a href="tel:+911234567890">
    Call Our Office
</a>


<!-- Same-page navigation -->

<a href="#contact">
    Go to Contact Section
</a>


<!-- Download -->

<a href="/files/guide.pdf" download>
    Download the HTML Guide
</a>

Describe Where the Link Goes

Users should usually be able to understand a link’s destination or action from its visible text.

Frequently Asked Questions

What is an HTML link?

An HTML link is a clickable connection that navigates to another page, website, file, page section, or supported action.

Which HTML element creates a hyperlink?

The <a> anchor element creates hyperlinks.

Which attribute specifies the link destination?

The href attribute specifies the destination.

What does href mean?

href commonly refers to Hypertext Reference and identifies the destination associated with the link.

What is anchor text?

Anchor text is the visible clickable text contained inside an anchor element.

What is an absolute URL?

An absolute URL contains a complete address, such as https://example.com/about.

What is a relative URL?

A relative URL identifies a destination relative to the current site or document location, such as about.html.

When should I use a relative URL?

Relative URLs are commonly used for pages and resources inside the same website.

When should I use an absolute URL?

Absolute URLs are commonly used when linking to external websites or resources that require a complete address.

How do I open a link in a new tab?

Use the target="_blank" attribute value.

Should every link open in a new tab?

No. New-tab behavior should be used intentionally. Internal navigation usually works best in the current tab.

What does rel="noopener noreferrer" do?

These rel values are commonly used with external links opened in new tabs to improve isolation and control referrer information.

How do I create an email link?

Use a mailto URL such as href="mailto:info@example.com".

How do I create a telephone link?

Use a tel URL such as href="tel:+911234567890".

Do telephone links work on every device?

Their behavior depends on the device and whether a compatible calling application is available.

How do I create a download link?

Link to the file and add the download attribute when download behavior is appropriate.

Can I suggest a filename for a downloaded file?

Yes. The download attribute can contain a suggested filename, although final behavior depends on browser and server rules.

How do I link to a section on the same page?

Give the target element an id and create a link whose href contains # followed by that id.

What is a fragment identifier?

A fragment identifier is the part of a URL beginning with # that refers to a specific location or element in a document.

Why does my relative link not work?

The file path, filename, folder location, or letter case may not match the actual destination.

Are filenames case-sensitive?

They can be case-sensitive depending on the server and operating system, so links should match filenames exactly.

Why should I avoid Click Here as link text?

Descriptive link text communicates the destination more clearly and provides better context for users and assistive technologies.

Can images be used as links?

Yes. An image element can be placed inside an anchor element to make the image clickable.

What should I learn after HTML links?

The next lesson is HTML Images, where you will learn how to display images and provide useful alternative text.

Key Takeaways

HTML links connect webpages and resources.
Links are created using the <a> anchor element.
The href attribute specifies the destination.
The content inside the anchor becomes clickable.
Links can open other webpages.
Links can open external websites.
Links can point to files.
Links can start email actions.
Links can start supported telephone actions.
Links can navigate to sections on the same page.
Absolute URLs contain complete addresses.
Relative URLs describe destinations relative to the current location.
Relative URLs are commonly used for internal navigation.
Absolute URLs are commonly used for external websites.
target="_blank" requests a new browsing context.
New-tab behavior should be used intentionally.
The download attribute can request download behavior.
Same-page links use # followed by a target id.
Target id values should be unique.
Meaningful link text improves clarity.
File paths must match the actual project structure.
Filename case can matter on servers.
Broken links should be tested and corrected.
Links are fundamental to website navigation.
Hyperlinks form a major foundation of the World Wide Web.

Summary

HTML links create connections between webpages, websites, files, page sections, and supported communication actions.

A hyperlink is created using the <a> anchor element, while the href attribute identifies the destination.

The visible content inside the anchor element becomes the clickable part of the link and should clearly describe the destination or action.

Absolute URLs contain complete web addresses and are commonly used for external resources. Relative URLs describe destinations relative to the current site or document and are commonly used for internal navigation.

Links can open destinations in new tabs using target="_blank", start email actions using mailto, start supported telephone actions using tel, and request file downloads using the download attribute.

Same-page links use fragment identifiers. A destination element receives a unique id, and the link references that id using a value such as href="#contact".

Good links use accurate destinations, correct file paths, meaningful link text, intentional behavior, and regular testing to prevent broken navigation.

Links are one of the most important features of HTML because they transform isolated documents into connected websites and create the navigable structure of the World Wide Web.

In the next lesson, you will learn about HTML Images and how to display visual content using the image element.

Next Lesson →