Skip to main content

Add anchors to your text (TCS)


By including an anchor within an article, you can create links in the body of your article, or in an external source, which when clicked will allow the reader to jump to that anchor in the article. This tutorial will show you how to create anchors within your MindTouch content. This article is most valuable for technical writers.


After completing this tutorial you will be able to link within sections of an article to make it easier to direct users to a specific part of a document.  

Establishing the anchor points

Within MindTouch, headers automatically create anchors that are called Sections. To add a header edit a page and select where you want the header. Then select H1, H2, H3, or Hx from the editor menu to select the Header that you want.

Once you add the Header then click save.  

Establishing anchors to non-header items

Creating anchors can be done very simply in any article.  First you need to edit the article you would like to create the anchor for. Next you will select the word(s) you would like to add the anchor to.  From there, you will select the "Flag" button in your editor, the anchor properties dialog will appear, and you can then name your anchor.


You can also add anchors to areas of your article without selecting any text.  This will direct an anchor link to the line it is appended to.


Changing an anchor's color

An anchor's HTML markup is an <a> tag just like regular links on your page.  Because of this, any text that is added to an anchor will have the same styling as a normal link.  This may cause confusion to the end user as the anchors do not have a destination (href) attribute but the browser will make them look like normal links.  You can add a class name with accompanying CSS style in the control panel, or an inline style to your anchor that will make it look like the rest of your default text. In this example we will use the hex color code #333 (dark grey) as it is the default text color for MindTouch deployments. 

You can add a class name to your anchor:

<a class="anchor-link" id="My Anchor's Name" name="My Anchor's Name">My Anchor's Name</a>

And then add a custom style in control panel:

.anchor-link {
    color: #333;

Or you can attach the following inline style to the HTML of your anchor:

style="color: #333"

A full anchor point would look like this:

<a id="My Anchor's Name" name="My Anchor's Name" style="color: #333">My Anchor's Name</a>


Here is what the anchor will look like when the article is saved:


What's Next?

Now that you know how to add anchors to your page you can use these anchor's when generating hyperlinks within your deployment!

  • Was this article helpful?