| Interactive Media Design

HTML Anchors

The <a> Element

HTML Anchorsopen in new window or 'links' are the powerhouse of the web. It's how we link to everything. Anchors can link to other websites, specific pages, photos, documents or any other resource available on the web or on our web server.

  • For creating a link on our webpage we use the anchor tag <a></a>.
  • The anchor tag is a paired tag and the content we want to display as a link is added between the opening <a> and the closing </a>.
  • For providing the location where the anchor tag will link-to we use the href attribute.

Example:

When in doubt, <a href="https://google.ca">Google</a> it out!

The code above will display the following output:

When in doubt, Google it out!

Notice that the word Google is a link which takes us to the link provided in the href attribute.

When linking to resources, a reference to it using an absolute or relative path is used.

Absolute Path: http://google.comopen in new window

Relative: about.html (beside index.html in file structure) or /images/birds.jpg (birds.jpg image inside the images folder beside index.html in file structure)

When we are working in our own file structure it's much more future friendly working with relative paths. The URL might not always be the same and some sites could have references to a URL that doesn't exist. A relative path would be the same whatever the domain is.

When adding links to external websites, social media or documents like PDFs it is better to open the link in a new tab so that the users do not move away from our website.

We can achieve this by adding another attribute to the <a></a> tag. The target="_blank" attribute will open the URL in a new tab.

Example:

When in doubt, <a href="https://google.ca" target="_blank">Google</a> it out!

The code above will display the following output:

When in doubt, Google it out!

Notice when clicking on above the link it opens in new tab.

Note

There must be a space between the tag name, attribute name and between an attribute value and next attribute name.

On Page Links

Sometimes we need to add links that will take us to the different parts of the same page. Most commonly used with FAQs, Back to Top links etc. The on page links work in two parts:

  • The link points to an element on the page
  • The element being pointed at has an id attribute

Example:

<a href="#cakes">Jump to cakes menu</a>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis at,
  dignissimos ratione doloremque rerum non rem cum laudantium quia consectetur,
  saepe perferendis aperiam iste reprehenderit fugit ipsa, excepturi impedit.
  Saepe.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis at,
  dignissimos ratione doloremque rerum non rem cum laudantium quia consectetur,
  saepe perferendis aperiam iste reprehenderit fugit ipsa, excepturi impedit.
  Saepe.
</p>
<ul id="cakes">
  <li>Red Velvet</li>
  <li>Tiramisu</li>
  <li>Black Forest</li>
</ul>
 












 




Additional Material

This YouTube video was created by Steve Griffith.