Links

In HTML, links (also called hyperlinks) allow users to navigate between different web pages or external resources. They are created using the <a> (anchor) tag, which can point to another webpage, file, or location within the current document.

Syntax

<a href="url">Link Text</a>

to clipboard
Copy to clipboard

• href: Specifies the destination URL.
• Link Text: The clickable text shown to users.

Link Appearance

By default, links will appear as follows in most browsers:

• Unvisited links are underlined and blue
• Visited links are underlined and purple
• Active links (during click) are underlined and red

Example

Text wrapped in a linked anchor tag becomes a hyperlink to another page:

<!-- Creating a link -->

<a href="https://www.codecademy.com/learn">My Home</a>

to clipboard
Copy to clipboard

The output of the example code will look like this:

Types of Links

1. Internal Links

Points to a page within the same website.

<!-- Creating a text link -->

<a href="#data-science-jobs">Data science jobs</a>

to clipboard
Copy to clipboard

The output of the example code will look like this:

2. External Link

Points to a web page on a different domain.

<a href="https://example.com">External Site</a>

to clipboard
Copy to clipboard

3. Image Links

Anything that is inside the anchor tag will be treated as a link. In this case, the Codecademy logo will take the user to the Codecademy home page.

<!-- Creating an image link -->

<a href="http://www.codecademy.com">
  <img src="logo.jpg" alt="Codecademy Logo" />
</a>

to clipboard
Copy to clipboard

The result of the example code will appear as:

4. Email and Phone Links

Special strings can be passed to the href attribute to link email accounts ("mailto:[email protected]") or phone numbers ("tel:###-###-####"):

<!-- This link will try to create a new email to [email protected]. -->
<a href="mailto:[email protected]">[email protected]</a>

<!-- This link will try to call phone number 234-555-1212. -->
<a href="tel:234-555-1212">234-555-1212</a>

to clipboard
Copy to clipboard

The actions defined by these links will be completed depending on the user’s device and settings. For example, clicking a phone link while on a cell phone may use the built in dialer to complete the call.

Frequently Asked Questions

1. What does the target="_blank" attribute do?

It opens the link in a new browser tab or window.

2. Can I link to a file like a PDF or image?

Yes. The href attribute can link to any resource, including documents or images.

<a href="files/resume.pdf">Download Resume</a>

to clipboard
Copy to clipboard

3. How do I link to another section on the same page?

Use href="#section-id" where the section has a corresponding id attribute.