Using HTML anchors to add a table of contents - Support and Troubleshooting

Using HTML anchors to add a table of contents Table of Contents Overview Create an anchor Sample code Additional information Overview Note: If you use the Standard KB article template you can use the new toolbar icon Table of Contents ( ) to automatically generate a TOC similar to the one at the top of this article. Check Using the embedded text editor (TinyMCE): Methods and Tips for more information. By including an anchor tag within a knowledge article, a link can be placed in the body of a knowledge article that, when clicked, enables the reader to jump to another location in the article. A number sign (#) in front of a link location specifies that the link is pointing to an anchor on a page. ("Anchor" means a specific place in the middle of the knowledge article.)

Anchors are generally used when a knowledge article contains a considerable amount of text. It is common to create an index (table of contents) at the top of the page linking to the anchors that have been added to key places in the text that follows.

The anchor tag consists of two HTML elements:

A hyperlink An anchor tag Note: Creating anchor links require manual editing of HTML source code. Use them only if you are somewhat comfortable with HTML coding. The HTML tag defines a hyperlink. A hyperlink (or link) is a word or group of words that you can click on to jump to another document. The most important attribute of the element is the href attribute, which indicates the link’s destination. The id attribute is used to create a bookmark inside an HTML document. To create a link to a section inside the same document, the HTML code would follow the following structure: Visit the Useful Tips Section .

The second part of an anchor tag is the actual anchor. The anchor should be placed at the beginning of the line where you want to start reading after you jump. The name attribute allows an anchor tag to be used to point to a specific place on a knowledge article. You might link from the bottom of a long page to the top of the page, or link from an item in a Table of Contents to the corresponding item where it appears on the page. The syntax for using the name attribute looks similar to . You can leave out the text between the "a" tags or use them to surround some text. The appearance of the text won't change.

Create an anchor To create an anchor in a knowledge article:

Open the knowledge form for the article you want to edit. In the HTML toolbar, click the text box, and then click the Edit HTML Source ( ) icon to open the HTML source code. Search for or add the text you want to use as a hyperlink to a section within the article using the following syntax: Text to hyperlink Where " id " is the unique name to identify the relationship between the hyperlink and the anchor and " Text to hyperlink " is the text that becomes a link that when clicked will take the reader to the section in the article defined as the anchor. Search for or add the text you want to use the anchor. This is the section of the knowledge article the hyperlink will take the reader to. Add the following syntax to the text: Where " id " is the unique name defined for the anchor in the previous step. Click Update . Example:

This example creates a link to the title of this knowledge article.

In the HTML toolbar, click the text box, and then click the Edit HTML Source ( ) icon to open the HTML source code. Add the hyperlink using the following syntax: Back to top Add the anchor to the section of the knowledge article the hyperlink will take the reader to: Overview Click Update . Sample code The following code creates a table of contents with 3 links to their corresponding headers. You can use whichever keyword as anchor text, as long as it matches with the target tag.

Table of contents Section 1 Section 2 Section 3

Section 1 This is the content of section 1.

Section 2 This is the content of section 2.

Section 3 This is the content of section 3.

Additional information HTML Anchor Tag Tutorial Add Anchor Tags To Jump To Specific Location On A Page HTML Links