Links and Navigation in HTML
Hyperlinks, Anchor Links, Email Links

HTML Links and Navigation: Connecting the Web

Links are what make the web a web. With just one click, users can jump from one page to another, send an email, or even scroll to a section on the same page. Mastering links means mastering web navigation — and it starts here.

Creating Hyperlinks with <a> Tag

The <a> (anchor) tag is the foundation of all links. To create a link, you set the href attribute to your destination.

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

Clicking this link takes the user to https://example.com. Simple, clean, and effective.

Clicking this link takes the user to example.com

Target Attribute: Open in a New Tab

If you want the link to open in a new browser tab, add target="_blank".

<a href="https://example.com" target="_blank">Open Example in New Tab</a>
Target Attribute: Open in a New Tab
Target Attribute: Open in a New Tab

This helps keep your current site open while the user explores another.

Anchor Links: Jump Within the Same Page

Anchor links let you jump to a specific section on the same page — perfect for long documents.

Step 1: Assign an id to the target element:

<h2 id="fruits">Fruit Section</h2>

Step 2: Link to it with #id in the href:

<a href="#fruits">Go to Fruit Section</a>

Clicking the link scrolls directly to the heading marked with id="fruits".

Email and Phone Links

HTML can also launch default email or phone apps when users click a link.

Email Link:

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

Phone Link:

<a href="tel:+1234567890">Call Now</a>

Mobile users will love these shortcuts — fewer taps, faster access.

Link Styling Basics

By default, browsers render links in blue and underline them. Visited links turn purple. But you can change that using CSS (covered later). For now, know this: the anchor tag <a> can wrap around any text, and you can place it inside headers, paragraphs, lists, etc.

<p>Learn more about <a href="https://example.com">HTML Basics</a>.</p>

The link becomes part of the paragraph — no limits on placement.

Common Link Mistakes to Avoid

  • Forgetting href — it won’t link anywhere.
  • Using href="#" without a real target — this causes a scroll jump to top.
  • Linking to untrusted sources without rel="noopener noreferrer" — it's a security best practice.

Full Example

Let’s tie it all together in a working example:

<!DOCTYPE html>
<html>
  <head>
    <title>Link Demo</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    
    <p><a href="#contact">Jump to Contact Section</a></p>

    <p>Visit <a href="https://example.com" target="_blank">Example.com</a> for details.</p>

    <p><a href="mailto:info@example.com">Send us an email</a></p>
    <p><a href="tel:+911234567890">Call customer support</a></p>

    <h2 id="contact">Contact Section</h2>
    <p>You can reach us through the methods above.</p>
  </body>
</html>
HTML Links Demo

Summary

HTML links connect users to more — more pages, more actions, more meaning. You now know how to:

  • Create hyperlinks with <a href="">
  • Use target="_blank" to open links in a new tab
  • Link to page sections with anchor links
  • Create email and phone call links
  • Embed links inside other text elements

QUIZ

Question 1:Which HTML element is used to create a hyperlink?

Question 2:Adding target="_blank" to a link opens it in a new browser tab.

Question 3:Which of the following are valid ways to link within an HTML page or to external resources?

Question 4:What is the effect of this code? 
<a href="syllabus.html" style="text-decoration: none; color: green;">View Syllabus</a>

Question 5:Anchor links use the id attribute of an element to navigate within a page.

Question 6:Which examples demonstrate email and phone links correctly?