Skip to main content

Add anchors to your text

This page applies to:MindTouch Responsive

Adding an anchor to a your text allows you to link to that specific part of your article. You may link any text, whether it lives on that page or on other pages on your site to that anchor, just like with any other link. When clicked, the link allows a reader to jump to that anchor in the article. 

Establish anchor points

In 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. Click Save once the header is added.


Establish anchors to non-header items

You can create anchors in any article. Edit the article you would like to create the anchor for and select the word(s) you would like to add the anchor to. From there, select the Flag icon in the Editor to open the Anchor Properties dialog. Name your anchor and click OK.


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.


Change 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. 

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>

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 in your site!


  • Was this article helpful?