Skip to main content

Links and Anchors in HTML (Live Playground)

Introduction​

Links are a fundamental part of the web, allowing users to navigate between pages and access resources. In HTML, links are created using the anchor <a> element. In this tutorial, you will learn how to create and style different types of links, including internal, external, and email links.

To create a link in HTML, you need to use the <a> element with the href attribute. The href attribute specifies the destination URL (Uniform Resource Locator) of the link. The text or content between the opening <a> and closing </a> tags is the clickable link text.

Here's an example of a simple link:

HTML
<a href="https://www.example.com">Visit Example.com</a>
Live Playground, Try it Yourself

Internal links connect different pages within the same website. To create an internal link, use the <a> element and set the href attribute to the relative path of the target page.

HTML
<a href="about.html">About Us</a> <a href="contact.html">Contact Us</a>
Live Playground, Try it Yourself

External links connect your website to other websites on the internet. To create an external link, use the <a> element and set the href attribute to the full URL of the target website.

HTML
<a href="https://www.google.com">Visit Google</a> <a href="https://www.wikipedia.org">Visit Wikipedia</a>

To open external links in a new browser tab or window, you can add the target attribute with the value _blank:

HTML
<a href="https://www.google.com" target="_blank">Visit Google in a new tab</a>
Live Playground, Try it Yourself

Email links allow users to send an email by clicking the link. To create an email link, use the <a> element and set the href attribute to mailto: followed by the email address.

HTML
<a href="mailto:example@example.com">Send an email to Example</a>

You can also include subject and body text for the email by adding query parameters to the href attribute:

HTML
<a href="mailto:example@example.com?subject=Hello%20World&body=I%20am%20sending%20you%20an%20email."
  >Send a pre-filled email to Example</a
>
Live Playground, Try it Yourself

Anchor links allow users to navigate to specific sections within a page. To create an anchor link, use the <a> element with the href attribute set to the ID of the target element on the page.

First, add an id attribute to the target element:

HTML
<h2 id="section1">Section 1</h2>

Then, create the anchor link:

HTML
<a href="#section1">Jump to Section 1</a>
Live Playground, Try it Yourself

By default, browsers style links with an underline and a color change when hovered or visited. You can use CSS to customize the appearance of your links, such as changing the color, removing the underline, or adding hover effects.

Here's an example of how to style links with inline CSS:

HTML
<a href="https://www.example.com" style="color: red; text-decoration: none;">Visit Example.com</a>

For more advanced styling, it's recommended to use an external CSS file. Here's an example of how to style links using an external stylesheet:

HTML
<!-- Add a link to the external CSS file in the head section of your HTML document -->
<link rel="stylesheet" href="styles.css" />

In your styles.css file, add the following CSS rules:

CSS
/* Remove underline from all links */
a {
  text-decoration: none;
}

/* Change the link color */
a {
  color: blue;
}

/* Change the link color when hovered */
a:hover {
  color: green;
}

/* Change the link color when visited */
a:visited {
  color: purple;
}
Live Playground, Try it Yourself

Conclusion​

Links and anchors are essential HTML elements that enable users to navigate between pages and access resources on the web. In this tutorial, you learned how to create different types of links, including internal, external, email, and anchor links, as well as how to style links using CSS.

As you continue to develop your web development skills, you'll learn more advanced techniques for enhancing the functionality and appearance of your links, such as adding smooth scrolling, creating responsive menus, and using JavaScript to create dynamic links. Keep practicing and experimenting with different link types and styles to create engaging and accessible web pages.