Links

Published Aug 3, 2021Updated Jul 1, 2022

Links are used in HTML to add features to a web page including styling, functionality, hyperlinks, and navigation.

Hyperlinks

The <a> anchor tag is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL using the hyperlink reference href attribute.

Text Links

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

<!-- Creating a text link -->

<a href="http://www.codecademy.com">Visit this site</a>

Internal Links

Anchor tags can be used to link to certain parts of a page with a matching id attribute:

<!-- Creating a text link -->

<a href="#about">About</a>

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" />Click this image </a>

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>

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.

`<link>` Element

The <link> element is used to connect the document to an outside resource, most commonly stylesheets, via the <head> element. Unlike most elements, which come as opening and closing tags, the <link /> is self-closing and only contains attributes.

The two primary attributes are:

A rel to describe the format of the external source.
An href that contains the filepath to the external source.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Links in HTML</title>
    <link rel="stylesheet" href="some/outside/source.css" />
  </head>
  <body>
    <!-- markup here -->
  </body>
</html>