More topics

Add anchors to a CMS Lite webpage

Last updated on September 21, 2026

Use anchors to link people to a specific section of a page. This is also called a jump link.

In CMS Lite, anchors appear as red flag icons in the text editor.

On this page

How anchors work

Anchors let you link people directly to a section of a page.

You can link to:

Choose an anchor name

Choose a short, descriptive anchor name for the section:

  • Use hyphens between words, not spaces
  • Use lowercase letters
  • Use the exact same name in the anchor and link
  • Aim to keep names to three words or fewer

Anchor names are case-sensitive. Avoid uppercase letters. Using lowercase names helps prevent mismatches between the anchor and link.

For long headings, shorten the anchor name when you can.

Do not highlight the heading before creating the anchor flag.

Place the anchor flag before or after the heading. Do not highlight th

Anchor name examples

Good anchor names

  • documents
  • documents-you-need
  • application-documents
  • required-documents

Bad anchor names

  • Documents
  • documents you need
  • required-application-documents-you-need-before-applying-for-the-grant
  • heading2

Follow the UX guidelines for page anchors

Review the user experience (UX) guidelines for page anchors (PDF, 186KB)

Create an anchor on the same page

Create the anchor

 To create an anchor to content on the same page:

  1. Navigate to the location on the page that you wish to jump to
     
  2. Select the Anchor anchor flag icon icon on the toolbar
     
  3. The Anchor Properties box will be displayed
     
  4. Enter an applicable link name
     
  5. Click [OK] to complete the action
    The Anchor Properties box will be closed and the anchor 'flag' will be inserted

Anchor Properties box

Link to the anchor

Then, link to the anchor:

  1. Select the text or image that will be used to jump to the specified location
     
  2. Click on the Link icon in the toolbar 
    The Link box will be displayed link
     
  3. Leave the Protocol default set to <other> and click in the URL field
     
  4. Enter the name of the newly created link, preceded by the #sign
    Example:  #anchor-name
     
  5. Leave the Target set to Same Window as per the Web Standard for Hyperlinks
     
  6. Click [OK] to complete the action
    The Link box will be closed and the link will be displayed

Link box

Create a link to anchored content on another page

Create the anchor on the other page

 To create an anchor to content on another page:

  1. Edit the page that you wish to link to from the anchor
     
  2. Navigate to the location on the page that you wish to jump to
     
  3. Select the Anchor Anchor icon icon icon on the toolbar
    The Anchor Properties box will be displayed
     
  4. Enter an applicable link name
     
  5. Click [OK] to complete the action
    The Anchor Properties box will be closed and the anchor 'flag' will be inserted
     
  6. Click [Save]

Anchor Properties box

Link to the anchor on the other page

Then, link to the anchor that you created:

  1. Navigate to and edit the page that you wish to jump from
     
  2. Select the text or image that will be used to jump to the specified location
     
  3. Click on the Link link icon in the toolbar
    The Link box will be displayed
     
  4. Leave the Protocol default set to <other> and select the [Page Picker] action button
    The Page Picker will be displayed
     
  5. Search or Navigate to the applicable page and click [Select] to complete the action
    The picker will be closed and the Link box will be re-displayed
     
  6. Click in the URL field
     
  7. Using the keyboard arrow key or End key, scroll to the end of the URL and append with the # sign
     
  8. Enter the name of the newly created link, preceded by the # sign
    Example: /gov/content/governments/services-for-government/service-experience-digital-delivery/web-content-development-guides/cms-lite-manual/ui-guidelines/text-editor/anchors#anchor-name
     
  9. Leave the Target set to Same Window as per the Web Standard for Hyperlinks
     
  10. Click [OK] to complete the action
    The Link box will be closed and the link will be displayed

Link box

Page Picker

How to check a page's anchors

Even if you cannot edit the page you want to link to, you can still check whether its heading already has an anchor ID.

Check the 'On this page' section

  1. Look for an On this page section
  2. If the heading is listed, select its link
  3. Check that the page moves to the correct heading
  4. Look at the page address (URL). The anchor name appears after #
  5. Copy or note the anchor ID exactly as it appears
  6. Create the link using the anchor ID

Example of anchor id in page address:

The anchor ID in this address is choose-name:

https://www2.gov.bc.ca/gov/content/example-page#choose-name

Check the page code

Some anchors may not appear in the On this page section. You can also check the page code:

  1. Right-click the heading and select Inspect
  2. Find the heading in the code that opens
  3. Check whether the heading code is collapsed. An ellipsis (…) means some of the code is hidden. Select the right-facing arrow (â–¶) beside the heading to expand it.

Example of collapsed heading code:

â–¶ <h2 class="bc_h2">…</h2> == $0

  1. Look for id= or name= followed by an anchor id
  2. If you find an anchor ID, copy or note it exactly as it appears. If you do not find id= or name=, the heading does not have an anchor
  3. Create the link using the anchor ID

Example of heading code with an anchor:

â–¼ <h2 class="bc_h2">
    ::before
    "Choose an anchor name"
    <a id="choose-name" name="choose-name"></a>
    </h2>

Example of heading code without anchor:

â–¼ <h2 class="bc_h2" dir="auto"> ==$0
    ::before
    "Choose an anchor name"
    </h2>