Hyperlinks (or links) are what make the web truly a web! They connect different pages, allowing users to navigate from one page to another.

In HTML, links are created using the <a> element. Let’s break this down in a simple way.

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

Output

Visit Google

Explanation:

  • <a> is the anchor tag (used to create a link).
  • href is an attribute that specifies the destination. For example, href="https://www.google.com" makes the link open Google’s website.
  • "Visit Google" is the link text—this is what users click on.

Default Link Styles in Browsers

By default, browsers style links differently based on their state.

  • Unvisited links: Blue and underlined
  • Visited links: Purple and underlined
  • Active links (when clicked): Red and underlined

You can change these styles using CSS, but this is how links appear by default.

What is Link Text?

The text between the opening <a> tag and the closing </a> tag is called link text. This is what users click on to go to another page.

Good Link Text Example:

<a href="https://www.nyc-hotels.com">Find the Best Hotels in New York</a>

In the example above, "Find the Best Hotels in New York" is the link text—this is what users will click on.

Why is this good?

  • Clearly tells users what to expect: Visitors know they will find hotels in New York before clicking.
  • Better for SEO (Search Engine Optimization): Search engines understand the page content, helping it rank higher.
  • Improves accessibility: Screen reader users can understand the purpose of the link without extra explanation.

By using descriptive and meaningful link text, you make your website more user-friendly and accessible! 🚀

Bad Link Text Example:

<a href="https://www.nyc-hotels.com">Click here</a>

In the example above, "Click here" is the link text.

Why is this bad?

  • Doesn’t explain what the link is about.
  • Users may not trust where it leads.
  • Not helpful for search engines.

Tip: Always use descriptive link text that matches what users are searching for!

The target Attribute

By default, links open in the same tab. But sometimes, you may want to open a link in a new tab. This is where the target attribute helps!

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

What does target=”_blank” do?

  • Opens the link in a new tab.
  • Useful for external links so users don’t leave your site.

Other values for target:

  • _self: (default) Opens in the same tab.
  • _parent: Opens the link in the immediate parent frame (useful for iframes). This is helpful when you want to replace the main page that loaded the iframe.
  • _top: Opens the link in the entire browser window, exiting all nested iframes. This is helpful when you want to remove all iframe layers and load the link in the whole tab.

If you’re not using iframes, _self, _parent, and _top behave the same, but if your webpage contains iframes, _parent and _top help control navigation properly.

You can make a link that opens an email application:

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

When users click this, their default email app will open with admin@example.com as the recipient. You can even add a subject and message:

<a href="mailto:admin@example.com?subject=Hello&body=How are you?">Send an Email with Subject</a>

If you want users to call a number when they click the link:

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

You can enclose email and phone links inside the <address> element to improve SEO and accessibility.

<address>
    <p>Email: <a href="mailto:admin@example.com">admin@example.com</a></p>
    <p>Phone: <a href="tel:+919876543210">+919876543210</a></p>
    <p>187 Chrystie Street, Lower Manhattan, New York City</p>
</address>

Linking to a Specific Section on the Same Page

On long web pages, you might want to create a table of contents at the top that links to different sections below. Similarly, adding a “Back to Top” link can help users quickly navigate without excessive scrolling.

To link to a specific section, follow these steps:

  1. Assign an ID to the target section
    • The id attribute can be added to any HTML element.
    • Each id must be unique within a page and should start with a letter or underscore (_).
  2. Create a link to that ID
    • To link to an element with an id, use the <a> element. The href attribute should start with the # symbol, followed by the id of the target element.
    • Example: <a href="#top">Go to Top</a> links to an element with id="top".

Example

<h1 id="top">How to cook Maggi in 2 minutes</h1>

<h2>Table of Contents</h2>
<ul>
    <li><a href="#boil_water">Boil water</a></li>
    <li><a href="#add_noodles">Add noodles and seasoning</a></li>
    <li><a href="#cook">Cook for 2 minutes</a></li>
    <li><a href="#serve">Serve</a></li>
</ul>

<h2 id="boil_water">Boil water</h2>
<p>In a small saucepan, bring 1 cup of water to a rolling boil.</p>

<h2 id="add_noodles">Add noodles and seasoning</h2>
<p>Break the Maggi into pieces (optional), then add it to the boiling water along with the flavoring packet.</p>

<h2 id="cook">Cook for 2 minutes</h2>
<p>Stir occasionally and let the noodles cook for exactly 2 minutes.</p>

<h2 id="serve">Serve</h2>
<p>Remove from heat and enjoy piping hot.</p>

<p><a href="#top">Back to Top</a></p>

Run these code snippets in an online HTML playground to see how it works!

Linking to a Specific Section on Another Page

You can also link directly to a section on a different page, whether it’s on your website or another site. The target page must have id attributes assigned to the sections you want to link to.

Example:

<a href="https://www.example.com/page.html#section_id">Go to Section</a>

Fun Fact 🎉

The first hyperlink ever made was on Tim Berners-Lee’s computer in 1991!

❮ Previous
Next ❯