Anchor Tags in Moodle

How to use anchor tags in the Moodle text editor

Last Updated: July 24th, 2023

Anchor tags are basically links that link to a different spot on the same page. They're useful when you have a table of contents or something like one, where you would like someone to be able to click on a section name and immediately be taken to the beginning of the section. They're pretty easy and quick to set up once you know how to do it, and they can save readers a lot of time looking for the information they need. Here's how you can set up anchor tags.

  1. First, type of the body of text. You need the text to be there before adding anchor tags.
  2. Once the body of text is added, click on the html button identified with </> in the text editor options. You may need to click on the expand button at the top left in the editor.
    Expand button in the text editor and the html button.
  3. Find the text you want to add an anchor link to and where you want it to take them. In this case, I want the text "test 2" to take the student to the "Testing" right above it.
    Example of text before adding the anchor tag and link.
  4. In the h4 section, where it starts with <h4..., at the end and just inside the ">" you will add "id=" then something that describes which heading it is at. In our case, it will be testingheading. Be sure there are no spaces!
  5. Now add the link by going to the text to add the link to and add <a href="# the id you put in the anchor". At the end of the word or phrase add </a>.
    1. This is what it should look like in general. If you have styles or text after the header and before your id, that is fine. 
      <h4 id="testingheading">Testing</h4><a href="#testingheading">Test 2</a>
      Anchor ID tag and Link tagging in the html editor in Moodle.
  6. Click Save and Display at the bottom now.
  7. Now you have a clickable link that will direct someone to a different part of the page.
    Example of after the tag and anchor link were added and are working.

How to Remove an Anchor Tag

Oops! You accidentally misspelled the tag and you want to change it, but the backspace or delete keys aren't removing the tag. Simply follow these directions to get rid of that annoying mistake.

    1. There's that annoying mistake you want to get rid of.
      Selected text I want to remove the link from.
    2. No problem. Highlight the anchor icon in the text editor and click the Unlink button.
      Text still selected and the break link button shown in the Moodle Atto editor controls.
    3. Save your changes at the bottom and it is as good as new!


ATC Support & Hours of Operation

Weekday Support, Monday - Friday

The ATC is open to in-person assistance. Support is available through the above remote options and on campus at CEN 208

Was this article helpful?