🌐 Web Development Roadmap — Part 16

HTML Links — Tag

Links are one of the most important parts of the web. They allow users to move from one page or website to another.

1. Creating a Link

HTML uses the <a> (anchor) element to create links.

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

The browser displays:

Visit Google

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

2. The href Attribute

href stands for Hypertext Reference.

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

Here:

<a> → Creates the link

href → Specifies where the link goes

URL → Destination

Text → What the user clicks

3. Linking to Another Page

Suppose your project contains:

my-website/
├── index.html
├── about.html
└── contact.html

From index.html:

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

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

These are called relative links because they point to files within your website.

4. Linking to Another Website

You can also link to an external website:

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

The complete URL is used for an external destination.

5. Opening a Link in a New Tab

You can use target="_blank":

<a href="https://www.example.com" target="_blank">
    Visit Website
</a>

This tells the browser to open the destination in a new browsing context, commonly a new tab.

For external links, it's also good practice to use:

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

6. Email Links

You can create a link that opens the user's email application:

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

7. Telephone Links

You can create a clickable phone link:

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

This is especially useful on mobile websites.

8. Linking to a Section on the Same Page

You can jump to a specific section using an id.

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

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

The flow is:

Click "Go to Contact"

↓

Find id="contact"

↓

Jump to that section

9. Navigation Menu Example

A simple website navigation could look like:

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

This creates the foundation of a website's navigation.

10. Link vs Button

This is important.

Use a link when the user is going somewhere:

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

Use a button when the user is performing an action:

<button>Submit</button>