The web itself is essentially a huge network of documents connected through hyperlinks.

In this chapter, you'll learn how to create links, navigate between pages, open links in new tabs, link to sections, send emails, make phone links, download files, and write links securely and accessibly.

3.1 What is a Link?#

A link allows a user to navigate from one resource to another.

Example:

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

The browser displays:

Google

When the user clicks it, the browser navigates to the URL.

The HTML element is:

<a>

The most important attribute is:

href

3.2 Basic Link Syntax#

The general syntax is:

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

Example:

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

Break it down:

<a>                 → Anchor element
href                 → Destination
https://example.com  → URL
Visit Example        → Visible text
</a>                 → Closing tag

3.3 The <a> Element#

<a> is called the anchor element.

It can point to:

• another webpage
• another page in your website
• a section on the same page
• an email address
• a phone number
• a downloadable file
• another resource

Example:

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

3.4 Absolute URLs#

An absolute URL contains the complete address.

Example:

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

Another:

<a href="https://www.nextgen-blog.com">
    NextGen Blog
</a>

An absolute URL usually includes:

https://
domain
path
query
fragment

For example:

https://example.com/products?id=10#reviews

3.5 Relative URLs#

A relative URL points to a resource relative to the current document.

Suppose your project is:

website/
│
├── index.html
├── about.html
├── contact.html
└── pages/
    └── services.html

From index.html:

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

From index.html:

<a href="contact.html">Contact</a>

To access services.html:

<a href="pages/services.html">
    Services
</a>

3.6 Absolute vs Relative URLs#

3.7 Root-Relative URLs#

Consider:

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

The / means the URL starts from the website's root.

If your website is:

https://example.com

then:

/about

means:

https://example.com/about

This is common in modern web applications.

3.8 Parent Directory ..#

Suppose:

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

Inside:

pages/about.html

to go back to index.html:

<a href="../index.html">Home</a>

.. means:

Go to the parent directory.

3.9 Current Directory .#

. represents the current directory.

For example:

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

This means:

Look for about.html in the current directory.

These are often equivalent:

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

and:

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

3.10 Linking Multiple Pages#

A simple website might have:

website/
│
├── index.html
├── about.html
├── services.html
├── projects.html
└── contact.html

Navigation:

<nav>
 
    <a href="index.html">Home</a>
 
    <a href="about.html">About</a>
 
    <a href="services.html">Services</a>
 
    <a href="projects.html">Projects</a>
 
    <a href="contact.html">Contact</a>
 
</nav>

Now the pages are connected.

3.11 Linking to the Homepage#

You can use:

<a href="/">Home</a>

This points to the root of the website.

For a simple local project, you might instead use:

<a href="index.html">Home</a>

3.12 Opening a Link in a New Tab#

Use:

target="_blank"

Example:

<a
    href="https://example.com"
    target="_blank"
>
    Open Example
</a>

The browser will normally open the destination in a new tab or browsing context.

3.13 Security with target="_blank"#

When using _blank for an external page, a common best practice is:

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

noopener prevents the newly opened page from getting a reference to the opener through window.opener.

Modern browsers have also implemented protections around _blank, but explicitly using rel="noopener" remains clear and defensive.

3.14 rel="noreferrer"#

You may also see:

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

noreferrer can prevent the browser from sending the referring URL in the Referer header and also implies noopener behavior.

Use it when that privacy behavior is desired.

3.15 Link to a Section on the Same Page#

This is extremely useful.

Suppose:

<h2 id="about">About Me</h2>

You can link to it:

<a href="#about">About Me</a>

Clicking the link moves the browser to the element with:

id="about"

3.16 How Fragment Links Work#

Consider:

<a href="#projects">Projects</a>
 
...
 
<h2 id="projects">My Projects</h2>

The URL may become:

https://example.com/#projects

The part after # is called a fragment.

The browser looks for an element matching that fragment identifier.

3.17 Table of Contents#

This is a very common real-world use.

<nav aria-label="Table of contents">
 
    <a href="#introduction">
        Introduction
    </a>
 
    <a href="#html">
        HTML
    </a>
 
    <a href="#css">
        CSS
    </a>
 
    <a href="#javascript">
        JavaScript
    </a>
 
</nav>
 
<h2 id="introduction">Introduction</h2>
 
<p>...</p>
 
<h2 id="html">HTML</h2>
 
<p>...</p>
 
<h2 id="css">CSS</h2>
 
<p>...</p>
 
<h2 id="javascript">JavaScript</h2>
 
<p>...</p>

This pattern is widely used in:

• documentation
• blogs
• tutorials
• long articles
• technical websites

3.18 Email Links#

Use the mailto: scheme.

<a href="mailto:hello@example.com">
    Email Me
</a>

Clicking it usually opens the user's configured email application.

3.19 Email with Subject#

You can pre-fill a subject:

<a href="mailto:hello@example.com?subject=Hello">
    Send Email
</a>

You can also include a body:

<a
    href="mailto:hello@example.com?subject=Hello&body=I%20have%20a%20question"
>
    Contact Me
</a>

Notice that spaces in URLs may need URL encoding.

3.20 Telephone Links#

Use:

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

On a mobile device, this can open the phone application.

This is particularly useful for:

• businesses
• contact pages
• support websites
• mobile applications

3.21 SMS Links#

Some devices support:

<a href="sms:+919876543210">
    Send SMS
</a>

Support can vary by device and browser.

3.22 Download Links#

The download attribute can suggest that the browser download a resource rather than navigate to it.

Example:

<a href="resume.pdf" download>
    Download Resume
</a>

You can optionally provide a filename:

<a
    href="resume.pdf"
    download="Anubhav-Resume.pdf"
>
    Download Resume
</a>

However, the browser/server and origin rules can affect whether the download behavior is honored.

3.23 Linking to PDFs#

You can simply link to a PDF:

<a href="documents/course.pdf">
    HTML Course PDF
</a>

The browser may open the PDF in its built-in viewer.

Or:

<a href="documents/course.pdf" download>
    Download PDF
</a>

3.24 Link to an Image#

You can link directly to an image:

<a href="images/photo-large.jpg">
    Open Full Image
</a>

You can also make an image clickable:

<a href="product.html">
 
    <img
        src="product.jpg"
        alt="Product"
    >
 
</a>

This is common in:

• product cards
• galleries
• blog thumbnails
• portfolios

3.25 Image as a Link#

Example:

<a href="/">
 
    <img
        src="logo.png"
        alt="Company homepage"
    >
 
</a>

The entire image becomes the clickable link.

The alt text should describe the image's purpose in context.

For a linked logo, something like:

alt="Company homepage"

can be more useful than:

alt="Logo"

because it communicates the link destination/purpose.

3.26 Accessible Link Text#

Avoid vague link text like:

<a href="/article">
    Click here
</a>

Prefer:

<a href="/article">
    Read the HTML accessibility guide
</a>

Why?

Screen-reader users can navigate through links without necessarily hearing all surrounding text.

Compare:

Click here
Click here
Click here

with:

Read the HTML guide
View pricing
Contact support

The second provides much more context.

3.27 Don't Use a Button as a Link#

If clicking something navigates somewhere, use:

<a href="/products">
    View Products
</a>

If clicking something performs an action, use:

<button type="button">
    Add to Cart
</button>

This distinction is extremely important.

Think:

Navigation → <a>
 
Action      → <button>

We'll study buttons extensively when we reach forms.

3.28 Link vs Button#

Link#

<a href="/profile">
    View Profile
</a>

Purpose:

Go somewhere.

Button#

<button type="button">
    Delete Account
</button>

Purpose:

Perform an action.

This distinction improves:

• accessibility
• keyboard behavior
• semantics
• browser behavior
• maintainability

3.29 Link States#

CSS commonly styles different link states:

:link
:visited
:hover
:focus
:active

HTML creates the link.

CSS controls how those states look.

Example:

a:hover {
    text-decoration: underline;
}

We'll learn CSS separately.

3.30 id and Links#

Remember:

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

The id must be unique within the document.

Then:

<a href="#contact">
    Contact
</a>

connects to it.

Don't create:

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

Duplicate IDs cause ambiguity and can break JavaScript, CSS selectors, accessibility relationships, and fragment navigation.

3.31 URL Structure#

Consider:

https://example.com/products?id=123#reviews

Break it down:

https://
   ↓
Protocol
 
example.com
   ↓
Host
 
/products
   ↓
Path
 
?id=123
   ↓
Query string
 
#reviews
   ↓
Fragment

So:

URL
│
├── Scheme
├── Host
├── Path
├── Query
└── Fragment

This isn't strictly HTML, but understanding URLs is essential for working with links.

3.32 Query Parameters#

Example:

<a href="/products?category=mobile">
    Mobile Phones
</a>

The URL contains:

category=mobile

Multiple parameters:

<a href="/products?category=mobile&brand=samsung">
    Samsung Phones
</a>

The query string is commonly used to send information to a server or application.

3.33 Fragment + Query#

You can have both:

<a href="/products?category=mobile#reviews">
    Reviews
</a>

The URL:

/products?category=mobile#reviews

means:

/products
    ↓
Path
 
?category=mobile
    ↓
Query
 
#reviews
    ↓
Fragment

3.34 External vs Internal Links#

A professional website may contain both.

<nav>
 
    <!-- Internal -->
    <a href="/about">About</a>
 
    <a href="/projects">Projects</a>
 
    <!-- External -->
    <a
        href="https://github.com"
        target="_blank"
        rel="noopener"
    >
        GitHub
    </a>
 
</nav>

3.35 Navigation Structure#

A typical website might have:

<header>
 
    <a href="/" aria-label="Home">
        <img src="logo.svg" alt="">
    </a>
 
    <nav aria-label="Main navigation">
 
        <a href="/">Home</a>
 
        <a href="/about">About</a>
 
        <a href="/projects">Projects</a>
 
        <a href="/blog">Blog</a>
 
        <a href="/contact">Contact</a>
 
    </nav>
 
</header>

Notice something important:

<nav aria-label="Main navigation">

This gives the navigation landmark a useful accessible name.

We'll study accessibility in much more detail later.

3.36 Navigation with Current Page#

Suppose you're currently on the About page.

You might have:

<nav aria-label="Main navigation">
 
    <a href="/">Home</a>
 
    <a
        href="/about"
        aria-current="page"
    >
        About
    </a>
 
    <a href="/projects">Projects</a>
 
</nav>

aria-current="page" communicates that the current link represents the current page.

This is useful for assistive technologies.

3.37 Link Titles#

You may see:

<a
    href="/about"
    title="Learn more about me"
>
    About
</a>

The title attribute can provide advisory information.

But don't rely on it for essential information.

Don't do:

<a href="/products" title="View our products">
    Click here
</a>

Instead:

<a href="/products">
    View our products
</a>

Visible link text is much more useful.

3.38 rel Attribute#

rel describes the relationship between the current document and the linked resource.

Examples include:

rel="noopener"

rel="noreferrer"

rel="nofollow"

rel="external"

rel="sponsored"

rel="ugc"

Their purposes differ.

For example, links representing sponsored content can use:

<a
    href="https://example.com"
    rel="sponsored"
>
    Sponsored Product
</a>

For user-generated links:

<a
    href="https://example.com"
    rel="ugc"
>
    User Recommendation
</a>

3.39 SEO and Links#

Search engines use links to discover and understand pages.

Good:

<a href="/html-course">
    Complete HTML Course
</a>

Less informative:

<a href="/html-course">
    Click here
</a>

Descriptive link text provides useful context.

Internal linking can also help users discover related content.

For a blog:

HTML
 │
 ├── CSS
 │
 ├── JavaScript
 │
 └── React

You might connect related articles with descriptive links.

3.40 A Complete Navigation Example#

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>My Portfolio</title>
 
</head>
 
<body>
 
    <header>
 
        <a href="/" aria-label="Go to homepage">
            <img
                src="logo.svg"
                alt=""
            >
        </a>
 
        <nav aria-label="Main navigation">
 
            <a href="/" aria-current="page">
                Home
            </a>
 
            <a href="/about">
                About
            </a>
 
            <a href="/projects">
                Projects
            </a>
 
            <a href="/blog">
                Blog
            </a>
 
            <a href="/contact">
                Contact
            </a>
 
        </nav>
 
    </header>
 
    <main>
 
        <h1>Welcome to My Portfolio</h1>
 
        <p>
            Learn more about
            <a href="/about">my experience</a>.
        </p>
 
        <p>
            You can also
            <a
                href="https://github.com"
                target="_blank"
                rel="noopener"
            >
                view my GitHub
            </a>.
        </p>
 
    </main>
 
</body>
 
</html>

This contains many professional practices:

• semantic navigation
• descriptive links
• internal URLs
• external URLs
• accessible navigation
• secure new-tab behavior
• linked logo

🧠 Link Cheat Sheet#

🧪 Practice Project#

Create a small 5-page portfolio website:

portfolio/
│
├── index.html
├── about.html
├── skills.html
├── projects.html
└── contact.html

Every page should have the same navigation:

Home | About | Skills | Projects | Contact

Home#

Include:

Welcome to My Portfolio
About Me
My Skills
My Projects
Contact

Create links to the appropriate pages.

About#

Create:

• About section
• link back to Home
• link to Projects

Skills#

Include:

• HTML
• CSS
• JavaScript
• React
• Next.js

Projects#

Create three projects.

Each project should link to either:

• another local page, or
• an external project URL.

Contact#

Create:

Email Me
Call Me

Use:

mailto:

and:

tel:

🎯 Chapter 3 Interview Questions#

1. What is the <a> element?
2. What is the purpose of href?
3. What is an absolute URL?
4. What is a relative URL?
5. What does ../ mean?
6. What does / mean in a root-relative URL?
7. How do you link to a section on the same page?
8. What is a fragment identifier?
9. How do you create an email link?
10. How do you create a telephone link?
11. What does target="_blank" do?
12. Why is rel="noopener" useful?
13. What is rel="noreferrer"?
14. What is the difference between <a> and <button>?
15. Why is descriptive link text important for accessibility?
16. What does aria-current="page" mean?
17. What is the download attribute?
18. What are query parameters?
19. What is a URL fragment?
20. What is the difference between internal and external links?

🔥 Key Concept#

Remember this rule:

                 User clicks
                     │
          ┌──────────┴──────────┐
          ↓                     ↓
      Navigate               Perform action
          │                     │
          ↓                     ↓
        <a>                  <button>

And remember:

href="/about"
       ↓
Where should I go?
 
href="#contact"
       ↓
Which section should I show?
 
href="mailto:..."
       ↓
Start an email
 
href="tel:..."
       ↓
Start a phone call

Next chapter: Chapter 4 — Images#

We'll learn <img> in depth, including src, alt, image paths, dimensions, responsive images, srcset, sizes, <picture>, <figure>, <figcaption>, lazy loading, image accessibility, performance, and production image practices.