Add a table of contents to your email

Article author
Miguel Panayotty
  • Updated

Add anchor tags for feature sections that link to content areas in your email design. You're basically adding a table of contents to the top of your email that links to corresponding content in the main body of the email. You can even add a back to top link that scrolls the email up to the starting point from the bottom.


Email client support for anchors

Anchor tags require time to set up and test across email clients. Brace yourself for various behavior while testing. Not all email clients support anchors. For example, Outlook 2003 will only support this functionality if the anchors are set up exactly as outlined in this article. Also, Apple devices running iOS 8+ have anchor links disabled. And, some email clients like AOL and Lotus Notes won't support anchors at all. In general, most webmail clients (e.g; Gmail and Yahoo) should work fine as well as the latest version of Outlook.



Adding anchor links to emails

Anchor links are added in the HTML of your email design. You'll have one section that acts like a "features section" where you add the first part of the HTML and then in each content section further in your email design you'll add the secondary tag that links the anchor. 


You can access your HTML in any Text area in the editor


or from the lower left HTML tab on any screen.



Here’s the HTML code for each section:


Part 1 - Features Section

<p>Featured Content:</p>
<p><a href="#anchor1"><span>Featured News</span></a></p>


Part 2 - Linked Content

<p><a id="anchor1" name="anchor1"></a>Featured News</p>


You'll use "Part 1" for your featured section. Copy/paste the second line for additional anchor links and change each anchor number (#anchor1, #anchor2, #anchor3 ....), this will allow you to link to the corresponding anchor link in the section below.


Use "Part 2" for the content section, in this area "#anchor1" should match "anchor1" as in the example code above.


Note: Gmail will not support regular anchor tags (example: <a href="#anchor1">Anchor One Title</a>), it support a slightly modified version
"<a href="#anchor1"><span>Anchor One Title</span></a>" which is also what we have in our example above.



Add a "back to top" link in your email

Here's the HTML code for the top anchor and each feature section:


Features Section

<body><div id="top"></div>


Linked "back to top" for each section

<a href="#top">back to top</a>