Setting anchors in a webpage will allow you to direct visitors to distinct points within a page. You can use this to provide internal anchors in your webpage for navigation, or you can set external anchors to direct the visitor to a particular citation on a bibliography page, for instance. Anchors are typically invisible because they only appear in the HTML code rather than in the webpage. This post will teach you what you need to know about anchors and how to set them up.
Internal Anchors
When you have determined what kind of internal navigation you need, you can start writing your anchors. Every anchor has a unique name to distinguish it from the others. For example, if I wanted to create an anchor that would direct someone to “Return to the Top” as you commonly see in a lot of websites, I might name my anchor “top.” It would be located in the HTML code at the top of my webpage but invisible to a site visitor. If I wanted to create an anchor for my conclusion, I might name it “conclusion” and place it at the beginning of my conclusion. Giving your anchors intuitive names will help you later on.
Anchors consist of two components: 1) hyperlinked text directing you to an anchor; and 2) the anchor itself. Both are written in HTML code that looks like this:
- <a href=”#ANCHOR”>hyperlinked text directing you to an anchor</a>
- <a name=”ANCHOR”></a> <– this is the actual anchor itself
To follow our “Return to the Top” example, the two components would look like this:
- <a href=”#top”>Return to the Top</a>
- <a name=”top”></a>
Please note that anchors are typically invisible. That’s why there’s no text in between the “<a></a>” of the anchor tag. This is a common practice and one you should adhere to.
As you recall from your tutorial on embedding multimedia, you will need to toggle over the “Text” mode rather than the “Visual” mode to directly edit the HTML. If your document is long and the HTML is messy, you might adopt a strategy similar to the “zzzz” trick to easily locate where you need to drop an anchor. The example below demonstrates how I set up a link in the first paragraph to this section on “Internal Anchors” and the associated anchor before the section begins.
Repeat for all other anchors in the page, making sure to give them all unique names. If you have a long page and are using anchors to aid in navigation, be sure to include a mechanism for the visitor to return to the top of the document after each anchored section.
It is important to note that when you toggle back to “Visual” mode, the anchors you set will appear as tiny anchor icons (
). Do not delete these. If you must move them, do so in “Text” mode.
External Anchors
External anchors are anchors that direct visitors to an external page. The basic mechanics are the same with one exception: instead of linking to the #anchor, you must link to the full URL. You can only set anchors in external sites that you control. You cannot set anchors on websites run by other entities.
Let’s expand on the idea that you might want to create anchors on a bibliography page that is separate from your project page. The anchor on the bibliography page will not look any different:
<a name=”edwards_2017″></a>Richard Edwards, Jacob K. Friefeld, and Rebecca S. Wingo. Homesteading the Plains: Toward a New History. University of Nebraska Press, 2017.
The hyperlink in your text will need the full URL to navigate externally. See the bolded segments below for the additional components:
“The authors call for new scholarship on the Homestead Act of 1862 particularly as it pertains to community formation. (<a href=”http://rebeccawingo.com/courses/thehomesteadproject/references#edwards_2017″ target=”_blank”>Edwards, et al, 94</a>).”
The above example includes the full URL as well as a target=”_blank” attribute that will open the link in a new window. As previously discussed, you do not want to navigate people away from your project, especially when they are in the middle of reading it. Opening a new tab will prevent them from losing their place.
