Add a Table of Contents to Your Email or Landing Page

Add a table of contents to your email or landing page to keep your marketing clear, organized, and easy to navigate. This helps your recipients find the information that interests them and stay engaged with your content.

Mailchimp offers 2 ways to set up a table of contents (TOC): the *|MC:TOC|* merge tag and custom anchor links. Use the *|MC:TOC|* merge tag to create a table of contents with links to headings. Or, use anchor links to create your own table of contents with custom wording, link style, and formatting.

In this article, you'll learn how to add a table of contents in the new builder and the classic builder.

Before you start

Here are some things to know before you begin this process.

• The *|MC:TOC|* merge tag inherits the link text style of its section. This means if you place it in the header section, it'll look like other header section link text. To change the format of your table of contents, move the tag to a different section, or use anchor links in the classic builder.
• The *|MC:TOC|* merge tag and anchor links won’t work in all email clients, so be sure to test your email before you send it. If this happens, your subscribed contacts will see the table of contents, but the links won’t be clickable.

Add a table of contents to your email or landing page

Use the table of contents merge tag

The *|MC:TOC|* merge tag inserts a table of contents with links to the headings you choose. First, add a title code to the headings you want to include in your table of contents. Then, add the *|MC:TOC|* merge tag where you want the table of contents to appear.

When you send your email, we'll replace the merge tag with a table of contents that includes the headings you selected.

Add the table of contents merge tag in the new builder

Follow these steps to add a table of contents to your email in the new builder.

Add a table of contents title code to headings

To include a heading in your table of contents, follow these steps.

1. Click a Heading or Paragraph content block, or click and drag one into your layout.
2. Highlight the text you want to include in your table of contents and use the Text style drop-down in the editing toolbar to make sure it’s a Heading 1 or Heading 2.
   
   Headings must be a level 1 or 2, and must contain text. The *|MC:TOC|* merge tag won’t link to a number alone.
3. Click the Code tab.
   
4. In the HTML editor, insert a space between the heading tag and the right angle bracket (>).
   
5. Enter the class title before the right angle bracket (>).
   
   class="mc-toc-title"
   
   
6. Repeat steps 2-5 for each heading you want to include in your table of contents.

Add the table of contents merge tag

After you add the title code to your headings, add the *|MC:TOC|* merge tag to any Heading or Paragraph content block to insert the table of contents.

To add the *|MC:TOC|* merge tag, follow these steps.

1. Click a Heading or Paragraph content block, or click and drag one into your layout.
2. If you want, enter a title for your table of contents, such as “In this email.”
3. Enter the *|MC:TOC|* merge tag. Place it under the title for your table of contents if you included one.
   
4. Click Preview to see how your table of contents will look to subscribed contacts. You may want to left-align the title for your table of contents to match the bulleted headings.

Nice job! You've successfully added a table of contents to your email.

Add the table of contents merge tag in the classic builder

The *|MC:TOC|* merge tag inserts a table of contents with links to the headings you choose. First, you'll format the heading text you want to include in your table of contents. Then, you’ll add the *|MC:TOC|* merge tag where you want the table of contents to appear.

When you send your email or publish your landing page, we'll replace the merge tag with a table of contents that includes the headings you selected.

Format table of contents headings and titles

To format text as a table of contents heading or title in the classic builder, follow these steps.

1. Click a content block that contains text—such as the Text, Boxed Text, or Image + Text blocks, or click and drag one into your layout.
2. In the editing pane, highlight the text you want to format as a table of contents heading. Your heading must contain text. The *|MC:TOC|* merge tag won’t generate a link to a number alone.
   
3. In the editor toolbar, click the Styles drop-down and choose TOC heading 1 or TOC heading 2. Choose TOC title if you want to apply additional styles to the heading.
   
4. Click Save & Close.
5. Repeat steps 2-4 for each heading you want to include in your table of contents.

Add the table of contents merge tag

After you format your TOC headings, add the *|MC:TOC|* merge tag to any text content block to insert the table of contents. The text and link style of the table of contents will match the section it's in. If you need to customize it, try anchor links instead.

To add the *|MC:TOC|* merge tag, follow these steps.

1. Click the content block where you want your table of contents. You can use a Text, Boxed Text, Image Card, or Image + Text content block.
2. In the editing pane, click the Merge Tags drop-down and choose Table of Contents.
   
   Or, enter *|MC:TOC|* directly into your content.
3. Click Save & Close.
4. Click Preview to see how your email or landing page will look to your recipients.

Nice job! You've successfully added a table of contents to your email or landing page.

Check out these articles to preview and test your email, and to edit sections in the classic builder.

Preview and Test Your Email
View and Edit Section Design in Email and Landing Pages

Add a table of contents to a custom HTML template

If you use a custom HTML template, you can still use the *|MC:TOC|* merge tag to insert a table of contents. Just be sure you've formatted each heading with the right tags, and you'll be ready to go.

First, open the template's source code and add class="title" or class="mc-toc-title" to the <span>, <div>, <h1>, or <h2> tags of the headings you want to appear in the table of contents. These classes don't work with <h3> and <h4> tags, so use <span> tags instead if you need them.

Your formatted headings should use one of the examples in this table. Either class type can be used.

After you edit your tags, you'll add *|MC:TOC|* where you want the table of contents to appear in your template.

*|MC:TOC|*
< div class= "title" id= "plant-news" >

Where to Edit Template Code

Use anchor links

For more flexibility, create anchor links to the content in your email or landing page. This way, you can customize the text and link style in your table of contents. First, you'll add anchors to the headings in your content. Then, you'll enter the text for your table of contents and link each item to its anchor link.

Add anchor links in the new builder

Add anchor links

To add anchor links to your heading text, follow these steps.

1. Click a Heading content block, or click and drag one into your layout.
2. Place your cursor at the beginning of the heading, then click the Anchor icon in the editing toolbar.
3. In the Anchor properties pop-up modal, enter the name for your anchor in the Anchor name field. We recommend that you don’t use spaces or special characters in the anchor name.
4. Click Save.
5. Repeat this process for every heading you want to link to your table of contents.

Format table of contents

Now that you've added anchor links to your content, you're ready to enter the table of contents text and add links to each item.

To add and format your table of contents, follow these steps.

1. Click the Paragraph content block where you want to add your table of contents.
2. In the editing pane, enter the text for your table of contents.
   
3. Highlight the first item, and click the Link icon in the toolbar.
   
   Be careful to only highlight the text you want to link, and avoid spaces around the item. This will be helpful when you format the text later.
4. In the Text Link pop-up modal, click the Link to drop-down menu and choose Anchor.
5. Click the Select an anchor to link to drop-down and choose the anchor name.
6. Click Save.
7. Repeat steps 3-5 for each item in your table of contents.

Use the icons in the toolbar to customize the style and wording of your table of contents. When you edit your table of contents, be sure to only highlight the text you want to change. If you accidentally remove an existing link, re-add it. To see how your anchor links will appear to your subscribed contacts, preview and test your email.

Add anchor links in the classic builder

Add anchor links

To add anchor links to your heading text in the classic builder, follow these steps.

1. Click a content block that contains text–such as the Text, Boxed Text, or Image + Text blocks, or click and drag a Text block into your layout.
2. Enter the text for your table of contents.
3. In the editing pane, place your cursor at the beginning of the heading, and click the Anchor icon in the toolbar.
   
4. In the Anchor Properties pop-up modal, enter the name for your anchor in the Anchor Name field. We recommend that you don't use spaces or special characters in your anchor name.
5. Click OK.
6. Repeat steps 3-5 for every heading you want to link to your table of contents.
7. Click Save & Close.

Format table of contents

Now that you've added anchor links to your content, you're ready to enter the table of contents text and add links to each item.

To add and format your table of contents, follow these steps.

1. Click the Text content block where you want to add your table of contents.
2. In the editing pane, enter the text for your table of contents.
   
3. Highlight the first item, and click the Link icon in the toolbar.
   
   Be careful to only highlight the text you want to link, and avoid spaces around the item. This will be helpful when you format the text later.
4. In the Insert or Edit Link pop-up modal, click the Link to drop-down menu and choose Anchor link.
5. Click the Select an anchor to link to drop-down and choose the anchor name.
6. Click Advanced options and uncheck the box next to Open in a new window.
7. Click Insert.
8. Repeat steps 3-7 for each item in your table of contents.

Use the icons in the toolbar to customize the style and wording of your table of contents. When you edit your table of contents, be sure to only highlight the text you want to change. If you accidentally remove an existing link, re-add it. To see how your anchor links will appear to your subscribed contacts, preview and test your email.

Test and troubleshoot the table of contents

The *|MC:TOC|* merge tag and anchor links are not supported by all email clients, and may not work as expected with certain email clients. So before you send, we recommend you preview your email and send a few test emails to yourself. To see how a variety of email clients will display your table of contents, use our Inbox Preview tool.

Email Behavior on Mobile
Test with Inbox Preview

Here are a few other things to keep in mind if your table of contents doesn't display as expected.

• If you used the *|MC:TOC|* merge tag to generate a table of contents in the classic builder, make sure your heading text is formatted as a TOC heading or TOC title. To check the heading format, highlight the text and click the Styles drop-down.
  

• If you imported HTML to build your email or landing page, we'll add a <base> tag to your code that may break your anchor links. To prevent broken anchor links, you'll need to edit the code before you import it to Mailchimp. In your HTML editor, add your own blank base tag, like <base href = " "> inside the <head> element, and then import your HTML code. If we detect a blank <base> tag at the time of import, we won't add our own.
  
  The blank <base> tag you add to your HTML should look something like this.

  <head>
   <base href= " ">
  </head >