If you have a long page with a lot of content, you can use anchors to allow your users to skip to relevant sections.
Anchors work by having a link point to an element with an ‘id’ attribute.
In HTML, an anchor looks like this:
<a href="#anchor">Link</a>
<h2 id="anchor">Heading</h2>
When a user selects the word ‘Link’, the browser will scroll down the page to the Heading. Notice that the ‘href’ of the link (<a>) is pointing to the ‘id’ of the heading (<h2>). The # sign in the ‘href’ tells the browser to point to an ‘id’.
To add an anchor:
Select the ‘Show/Hide toolbars’ option in the edit menu. In the editor, put your cursor where you want the anchor to be placed and select the ‘Insert/Edit Anchor’ option. Fill in the ‘Anchor Name’ field. In the above HTML example, this determines the ‘id’ attribute.
Now, highlight the text you would like to link to this anchor. Select the ‘Insert/Edit Link’ option. For the ‘Link URL’ field, put in “#” and the ‘Anchor Name’ you used in the last step.
Some considerations:
The ‘id’ attribute has to be unique on each page. If you make two anchors with the same ‘Anchor Name’ or ‘id’, the browser will not know which one use when a user selects the associated link.
The ‘Anchor Name’ or ‘id’ cannot contain spaces, but underscores are okay. It cannot start with a number, but otherwise numbers are okay as well.
Pro tip:
Once you have your anchor set, you can link a user directly to that anchor from any page by adding the ‘#(Anchor Name)’ to the end of the URL. For example, while ‘https://unlcms.unl.edu/test/keith/test-anchors’ will take you to my anchor test page with a button, the URL https://unlcms.unl.edu/test/keith/test-anchors#button will take you directly to where the ‘button’ points.
If you have ideas for videos or articles you would like to see, please email Keith McGuffey at kmcguffey2@unl.edu. More video tutorials can be found on the Nebraska Extension County Websites Media Hub channel.
###
Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Keith McGuffey, IANR Media Web Specialist.