HTML Links

HTML links, or hyperlinks, are essential for navigating the web. They allow users to move from one page to another, download files, or jump to sections within a page.

In this tutorial, we will cover the basics of creating and using links in HTML, with detailed examples.

What Are HTML Links?

In HTML, links are created using the <a> (anchor) tag. The primary attribute used with the <a> tag is href, which stands for “Hypertext Reference.” This attribute specifies the destination of the link.

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

In this example, “Visit Example” is the clickable text that directs the user to “https://www.example.com” when clicked.

Types of Links

HTML allows for various types of links:

  • External Links: Direct to a different website.
  • Internal Links: Navigate within the same website.
  • Email Links: Open the user’s email client to send an email.
  • Anchor Links: Jump to a specific section within a page.

Creating External Links

To create a link to an external website, use the <a> tag with the href attribute set to the desired URL.

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

Video

By default, clicking this link will open the destination in the same tab. To open the link in a new tab, add the target attribute with the value _blank.

</>
Copy
<a href="https://www.google.com" target="_blank">Go to Google</a>

Video

Now, clicking the link will open Google in a new tab.

Creating Internal Links

Internal links navigate between pages within the same website. Use relative URLs to create these links.

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

This link directs the user to the “about.html” page within the same domain.

For internal sections within the same page, first assign an id to the target element:

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

Then, create a link that references this id:

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

Clicking this link will jump to the “Contact Us” section on the same page.

Video

Best Practices for Anchor Links

  • Unique IDs: Ensure each id on a page is unique to avoid conflicts.
  • Descriptive IDs: Use meaningful and descriptive id names for clarity.
  • Smooth Scrolling: Implement CSS for smooth scrolling to enhance user experience.

Creating Email Links

To create a link that opens the user’s default email client with a new message, use the mailto: protocol in the href attribute.

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

Clicking this link will open a new email draft addressed to “someone@example.com”.

Using Images as Links

Images can also function as links by placing an <img> tag inside an <a> tag.

</>
Copy
<a href="https://www.example.com">
  <img src="image.jpg" alt="Example Image">
</a>

In this example, clicking the image will navigate to “https://www.example.com”.

Video