ASABE

American Society of Agricultural and Biological Engineers

Quicklinks Login
Go Forgot Username/Password?

Custom Anchors

Introduction

Anchors are ways to identify fragments of content that allow the browser to jump to that bit of content. The technical term for these are fragment identifiers. The common use case example of these is to have an outline a the top of the page that links to each of the headers within the same document. To link to a fragment identifier, just prefix the fragment ID with a pound sign (#). Fragment identifiers also work from outside the page if the pound (#) and fragment ID are appended to the end of a link (/mainpage#fragid).

How to create them

You can add a fragment identifier to any HTML element by using an `ID` or `name` attribute. Since the `name` attribute is allowed on only certain HTML elements, it is recommended that the ID attribute is used. To add a fragment identifier to an HTML element, type an attribute inside the HTML tag. HTML tags (<h1>, <p>), HTML tags with fragment identifiers (<h1 id="heading">, <p id="paragraph">).

Umbraco

It is very easy to add fragment identifiers in an Umbraco Rich Text editor because of the HTML view. To open the HTML view, just look for the `HTML` button along the top toolbar. Once you click the button, a popup will appear showing the HTML of the current Rich Text Editor. After adding your fragment identifiers, click "Update" to apply the changes. After adding the fragment identifiers in the HTML view, you can link to each fragment identifier the same as creating any hyperlink. Select some text that you want to become a link, click the "link" icon in the toolbar and type of the fragment identifier in the "Url" field starting with the pound sign (#).

Example

This page was created with custom fragment identifiers put on each sub-heading. To see how these fragment identifiers look, feel free to click the HTML view icon in the toolbar to see this example.

ASABE's Latest On Twitter