Do you know how to use anchor links?

Updated by Tiago Araújo [SSW] 1 year ago. See history

123

<introEmbed
  body={<>
The attribute "name" allows you to link to specific places within the page, via the `<a>` tag.

This is especially useful in long pages that can be separated into sections. You can create a named anchor in each of these section headings to provide "jump-to" functionality. In other words, you can have a different URL for each piece of content on the same page.
  </>}
/>
```html
<h2><a name="get-started"></a>Get Started</h2>
```

**Figure: This is how you add an anchor name to an specific section of your page. Note it doesn't have the hash mark and the anchor tag is empty**

You now have a custom URL that points to the specific section of the page. It is the page URL followed by the hashtag plus the name you chose:

<asideEmbed
  variant="greybox"
  body={<>
    yourpage.com#get-started
  </>}
  figureEmbed={{
    preset: "default",
    figure: 'This is how your custom URL will look like',
    shouldDisplay: true
  }}
/>

You can use this new URL to point users to that specific section of your page.

To create a link to your anchor named section inside the same page, simply add a new "href" anchor tag - now with a hash mark followed by the name you chose:

```html
<a href="#get-started">Go to Get Started section</a>
```

**Figure: This is how you add a link to that anchor name you created inside the same page. Remember to add the hashtag**

**Tip:** Use a hashtag **alone** to link to the top of a page. E.g. `<a href="#">&Go to top</a>`

Acknowledgements

Tiago Araujo
Related rules

Need help?

SSW Consulting has over 30 years of experience developing awesome software solutions.