How to use anchor links in emails

Sep 15, 2020 | Code snippets, Email production

"Have you ever wondered how to add anchor links into your email newsletter? Keep reading, we’ll tell you what they are, when to use and how to do it!..."

What is an anchor link?

An anchor link is similar to a hyperlink but instead of linking through to an external source (such as a website) an anchor link jumps to content within the same web page/document/email you are currently viewing.

When done right, anchor links in email can simplify navigation and help lead the reader to the right content.

Anchor links can be styled as text, a button or an image. In the example, Crazy Cakes has 3 anchor links below the main image, a bit like a menu bar, each linking to the 3 respective sections within their email newsletter.

Try it

Tip: Click the 3 anchor links below the cupcakes

subject line goes here
New flavour
Loyalty programme
Crazy blog
Irrisistable new flavours
Nam id purus ac tortor luctus posuere. Quisque volutpat pellentesque commodo. Fusce volutpat sagittis felis. Nam mi neque, tincidunt quis ante eget, vulputate porta est. Sed varius sodales ligula, ac vestibulum risus egestas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Loyalty programme
Nam id purus ac tortor luctus posuere. Quisque volutpat pellentesque commodo. Fusce volutpat sagittis felis. Nam mi neque, tincidunt quis ante eget, vulputate porta est. Sed varius sodales ligula, ac vestibulum risus egestas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Crazy blog
Nam id purus ac tortor luctus posuere. Quisque volutpat pellentesque commodo. Fusce volutpat sagittis felis. Nam mi neque, tincidunt quis ante eget, vulputate porta est. Sed varius sodales ligula, ac vestibulum risus egestas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

 

Why and when to use anchor links in email

Anchor links are great if you have a long newsletter and wish to add some navigation for a better user experience.

We recently received a brief for a very long and content rich email newsletter.  The layout consisted of 3 main sections and within each section there were 4-8 pieces that clicked through to a website.

To give subscribers a chance to skip directly to what they were most interested in, we created 3 anchor links at the top of the newsletter which would jump to the 3 respective sections when clicked.

Other examples or uses for anchor links in email could be:

  • Table of contents
  • Back to top
  • Jumping between sections
  • Menu bar

2 Steps to creating your anchor link:

Anchor links are so easy to set up and you don’t need to be a ninja at HTML.  An anchor link is made up of two parts:

  1. The destination anchor
  2. The source anchor (when clicked, jumps to the destination anchor)

Step 1 – Create the destination anchor

In the Crazy Cake email template, the anchor tags are the headings for each of the 3 content sections.

Wrap each heading in an <a> tag and add a name for your destination anchor:

<a name=”flavours”>Irresistible new flavours</a>

<a name=”loyalty “>Loyalty programme</a>

<a name=”blog “>Crazy blog</a>

Pro tip: Keep the tag name simple and remember they are case sensitive! 

Step 2 – Create the source anchor

When clicking a source anchor, you will automatically navigate to the destination anchor.  Crazy Cakes have their anchor links at the top of the email template.

Wrap each source anchor in an <a> tag with a # and the name of your anchor tag:

<a href=”#flavours”>New flavour</a>

<a href=”#loyalty”>Loyalty programme</a>

<a href=”#blog”>Crazy blog</a>

Save and test.

Special note on anchor link attributes

Instead of using the ‘name’ attribute you can also use the ‘id’ attribute.

We have used the ‘name’ attribute with great success, but we are using the Doctype ‘XHTML 1.0 Transitional’.

HTML5 on the other hand doesn’t support the ‘name’ attribute as it classifies the attribute as obsolete. It does however support the global ‘id’ attribute meaning depending on how your email code is generated/created you could use any of these 2 attributes:

Using the “name” attribute

Destination anchor:

<a name=” flavours “>Irresistible new flavours</a>
Source anchor:

<a href=”#flavours”>New flavour</a>

Using the “ID” attribute

Destination anchor:

<a id=” flavours “>Irresistible new flavours</a>
Source anchor:

<a href=”#flavours”>New flavour</a>

Email client support for anchor links

 

Email clientSupport for anchor links
Gmail (Web)YES
Gmail (Android app)YES
Inbox by Gmail (Android app)YES
Gmail (iOS app)NO
Apple Mail (iOS)NO
Yahoo! Mail (Web)YES
Outlook.com (Web)YES
Outlook (Android app)NO
Outlook (desktop)YES
Outlook for MACNO
Samsung email app (Android)YES
Windows Mail (Windows 10)YES

 

Source:  https://emaildesign.beefree.io/how-to-add-anchor-links-in-email/#Email_client_support_for_anchor_links

As always, know your audience – this can help guide you to creating amazing emails with great user experience.

Email services designed just for you

When you partner with us, you’ll have access to a dedicated team of email marketing experts, including strategists, campaign managers, designers and developers. We offer once-off services and retainer-based service plans.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recommended reading

Email templates vs email builders

We do the comparisons to bring you the best email template creation options. Template builder vs ready-made email template vs custom-made email template. Which one is best?

How to create an HTML Outlook email signature

A well-designed, functional email signature is both professional and essential. It represents your company by including your logo, contact details and sometimes social platforms and an optional advertising banner.

The Cantaloupe Story

Read about us and meet our team

Join our team. Work from anywhere

Help us make email marketing better

Helping marketing teams and agencies since 2006

Overview of email marketing. Learn more

Email templates

Tried and tested templates
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing

Your company newsletter is more important than you think

Your company newsletter is more important than you think

“Do we really need an email newsletter?” It’s a question we’re often asked. In some industries, such as e-commerce, it’s easier to see the value of newsletters as they can trigger immediate sales. But in others, immediate results are rare. So is it really worth it? And what are the benefits?

Pin It on Pinterest

Share This