Link Concepts

 

Within your content, you can build several distinct types of links, including links to another page, links to a specific place on another page, and links to allow the user to send an email to a specified address.

This article also covers the concept of link targets, which allow you to manipulate the behavior of the user's web browser when the user clicks the associated link.

When you make a link to another page inside your WebAlliance website, be sure to use relative links instead of full links. For example:

  • www.yourDomain.com/about/history is a full link to your Company History page. Use this type of link when linking to your site from another source (like an ad campaign or an email blast).
  • /about/history is a relative link. Use this type of link when referencing the Company History page from a different place inside your WebAlliance website (like a home page slider or the Top Navigation menu).

This ensures that your users will never end up on your "beta" site (yourDomain.sites.aes2.com), which is important because the beta site is the "rough-cut" version of your live site.  Features and updates are added daily to the beta site, and they're not intended for public use.

You can define a link (or "hyperlink") in HTML by using the <a> tag. The basic structure is:

<a href="https://www.google.com">This is a link to Google.</a>

When you use the Content Builder link tool, the URL section manipulates the part of the <a> structure following 'href='. You'll only need the full structure (as listed above) when editing the HTML code directly.

Link destinations can be any Web resource, such as a web page, a specific place on a web page, or even the user's default email application. Here are some types of links along with examples:

  • Link to an external webpage - <a href="https://www.google.com">This is a link to Google.</a>
  • Link to an anchor in an external webpage - <a href="https://www.google.com#GoogleAnchor">This is a link to an anchor on Google.com that doesn't really exist.</a>
  • Link to an anchor within the current page - <a href="#LocalAnchor">This is a link to an anchor on the current page.</a>.  Note that you first have to create the anchor on the page by adding this code (for example) at the location where you want to place the anchor:  <h2 id="LocalAnchor">This is a Local Anchor<h2/>
  • Open the user's default mail application to send a message to a specified email address - <a href="mailto:[email protected]">Send a message to the Aldrich Web Solutions Customer Experience team!</a>
  • Link from an item description to another Item Detail page or to a category -  use Item and Category Cross Linking

In the <a> tag concept, the "href=" attribute defines the destination of the link. You can add an additional attribute called "target" to specify how the browser should open the link. The syntax looks like this:

<a href="https://www.google.com" target="_blank">Open Google in a new window or tab.</a>

The two most important possibilities here are:

  • target="_blank" - Opens the link in a new tab or new window.
  • target="_self" - Opens the link in the same frame as it was clicked. NOTE: This is the default, and it's assumed by browsers. If you want this behavior for the link, you don't need to enter any target value. The standard <a href="http://www.google.com"> will be sufficient.

Other Resources

Here are some resources you can use to find out more about HTML links: