Creating links within an article (summary, glossary…): the use of anchors

Classic links, pointing to URLs of web pages, are useful to link to a page that is different from the one being viewed. But it is also possible to create links pointing to specific locations on the page being viewed, by identifying these locations with anchors.

The summary of this post, for instance, is created using anchors:

• Associating an anchor with a “Title” block
• Inserting an anchor elsewhere in an article, in html

Associating an anchor with a “Title” block

The block editor provides a simple way to add an anchor to a “Title” block, which makes it easier to create a summary. Indeed, each entry in your summary is in theory supposed to refer to a “Title” block present in the body of your article.

To add an anchor to a “Title” block, select the block and then, in the settings column, “Block” tab, click to expand “Advanced”. You will then find a field named “HTML Anchor”.

Enter the name of your anchor, preferably a short word, without space, accent, special character or capital letters (hyphens are accepted) – for example, “anchor1“.

Then select, in the body of your article, the sentence or word on which you want to create a link to your anchor. Click on the icon to add a link. Enter in the link field the name of the anchor to which you want to create a reference, preceded by a hashtag – for example “#anchor1“. Your link is now functional.

Inserting an anchor elsewhere in a post

The previously explained operation only exists for the ” Title ” blocks, so you will have to write in html all the other anchors that you would like to integrate in your article.

To do this, you must view the article in its html form in the editor: click on the 3-point menu at the top right of the top horizontal bar, next to the pictogram of a cogwheel. Here you have the choice to display the code editor instead of the visual editor.

You can also display in html form only the block currently being edited, by clicking on the 3-point menu in the small edit bar of the block, then “Edit as html”.

Around the word (or sentence) to which you wish to refer, define the anchor identifier by adding the code: <a id=”anchor2>word to which you wish to refer</a> (instead of anchor2, give the anchor the name of your choice, as per the recommendations listed above).

You can then send back to this anchor from the location of your choice by creating a link to it, either with the editor in normal/visual mode, as described above, or in the html code by surrounding the text on which you want the link with the code: <a href=”#anchor2“>text</a>.

---

Featured image : DSC0127 by kevinmnord under Creative Commons BY-NC license

---

---