Anchor tags or anchor elements are the HTML pieces that create Links. SEO (Search Engine Optimization) and links go hand-in-hand. That’s why we hear so much about it all over the internet: blogs, forums, groups, social media – you name it; everywhere you look, somebody is talking about “link juice”, “linkbait”, how to build links, optimizing links, etc.
And sometimes you hear about navigation, usability, and accessibility. But rarely do we hear about Anchors.
Today we are going to look at a very specific type of internal linking: local navigation.
Once you understand the true creation of a link, how to use Anchors and they are can be important, you’ll be shouting “Anchors Aweigh!”
Okay, maybe not, but at least you’ll be a bit wiser. 🙂
Wikipedia defines an Internal Link as “a hyperlink that is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of the same website or domain of the internet.”
We know about this. It’s what makes up our navigation systems.
We know about usability factors of allowing the user to get where they want in the least number of clicks possible (and if you didn’t – we’re trying to make it easy for them).
We also know about the SEO factors of supposed page rank, link weight, authority, silos, no dead links, anchor text, etc.
But Wait! I just said “anchor text” and yet the title of this post is “A Name is Not an Anchor”. Confused? Read on.
Link Structure
In any link within your opening angled brackets you place the letter “a” along with various attributes and values of the Anchor element, and the text for the link (known as Anchor Text), followed by the closing tags.
A very simple link might look like this:
<a href=”https://www.craigkiessling.com”>Atlanta SEO Services</a>
Let’s look at what that means. The brackets simply denote an HTML tag.
Anchor Element
The “A” at the beginning designates the word Anchor. Just like a boat, it holds down a certain place, but here in the online context. This anchor could be a place within the document we are currently reading. It could be a completely different document within our own library (or website) or perhaps some other library. Or perhaps it could be a specific spot within our own library.
It’s called an “element” because the Anchor is the main bit – the actual HTML tag. The rest of the name=value pairings are what’s known as attributes. Many of the attributes that we will look at can be applied to many different HTML tags or elements. Some would specifically only apply to the Anchor element.
Href Attribute
The “href” bit means “HyperText Reference”. It is where we usually put the URL or URI. The address or the location of the web site, page, file, image, or whatever it is – that we want to link to.
With this in mind, let’s look at another, more complex, link example.
<a href=”https://www.craigkiessling.com” class=”SEO-Link” name=”Atlanta SEO Services” target=”_blank” class=”external” rel=”nofollow”>Atlanta SEO Services</a>
The items that are the same as the previous example we do not need to discuss.
Class Attribute
“Class=” tells us that this link should be labeled as having the class name “SEO-Link”, and whatever styling we set up for the class of that name in our CSS should be applied to this link (or any other with that same class name.
Class values may be used multiple times on a page. For example, you could assign all internal links (links pointing to destinations within your website) the same class name. Then you could use that powerfully in your CSS.
ID’s, however, which we will look at in a moment, must be unique. That is to say, if every link on a page has an ID attribute, each value must be different. But this provides strong CSS power as well.
Name Attribute
Target Attribute
This informs the browser where to open the new link – in the same browser window or tab, or, for example, a brand new one. In this case, we tell it a brand new one.
Rel Attribute
“Rel” is basically telling us what the relationship is between this page and the one being linked to. In this case, we tell SE to bugger off – don’t follow and waste our link juice :P.
However, there are additional values that the rel attribute of a link could have.
Possible Rel Values for Anchor Tag Links
- alternate: Points to an alternate version of the document.
- author: Points to the author of the document.
- bookmark: Points to an URL for bookmarking.
- enclosure: Points to a downloadable asset.
- external: Points to an URL on a different domain.
- help: Points to a help document.
- license: Points to legal, license, or copyright information.
- next: Points to the next document in a series.
- nofollow: Indicates to search engines that the document is not endorsed.
- noreferrer: Indicates to the browser not to send an HTTP referrer header.
- noopener: Prevent an opener browsing context. It should be used when using target=”_blank” on a link. Not only is this a security move, but it’s also looked for by Google.
- prev: Points to the previous document in a series. Think pagination.
- search: Points to a search function for the document.
- tag: Points to a document that covers a keyword/tag of the current document.
Anchor Element in HTML5
Using what we’ve learned so far, let’s move to HTML5.
What do you think happens here, with a link using HTML5, the last standardized version of HTML?
<a href=”URL” title=”additional information” id=”cool-name” class=”pretty-cool-name”>link text</a>
Technically, the “Title” attribute is supposed to give more information about the element in question; wiki says it’s supposed to give “brief” information about the link.
Problem is…Most of the crap SEO people have done with this as they’ve done with everything else – ruined it via over-stuffing of spam keywords etc.
We’ve talked about “Class” previously, understanding the flexibility it gives to styling elements with CSS.
ID Attribute
To repeat, in CSS you have classes and IDs. Classes you can use many times throughout a site, but IDs you can not.
Like if you wanted every first paragraph to have Drop-Caps for the first sentence; or every first letter of the first paragraph in each post.
But in one particular paragraph, you want to have special and different stylings. Well, then you would give it an ID.
In HTML5, you can still use the ID for extremely specific styling, But…You can also use it for naming. Why? Because as we’ve already explained they’ve gotten rid of the name attribute, and the title attribute is used for information.
A name is Not an Anchor
So here we are full-circle. Name is no longer used as a legit attribute for elements in HTML5. The title attribute helps boost us from many different perspectives. And now for styling – well my suggestion is to still use Classes, and to use IDs sparingly when solely intended for design.
However, when you’re wanting to link to a very specific place within a page, that is where the ID attribute comes to fruition.
Links to a specific location within a page
This is where the ID attribute of a link shines.
Click this link and see what happens (it’s not malicious). Then close the new tab and come back here.
We didn’t just go to a new page in a new browser tab, but we also went to a very specific place within that new page. Pretty cool, huh?
In order to pull this trick, we need to deal with two things:
- Naming, or more specifically, ID-ing the element where we want the link to land the visitor, and
- To tack that ID value onto the end of the URL in the href attribute; the last part where the page is named.
In our current example, I went to that page, found the HTML tag or element that I wanted to use for the final destination of the link and I gave that element an id=”onpage”.
And then I created a normal link to that page, but added #onpage to the very end of the URL in the href attribute, telling the browser to go to that specific place within that page.
The code for the link or anchor tag that we used for this example looks like this:
<a href=”https://www.craigkiessling.com/seo-services#onpage” target=”_blank” rel=”noopener”>
Although we used this for an internal link on our site, if you know the ID of an element on an external page – another website, you can use it similarly.
The most common usage of this is local navigation or Table of Contents.
Creating a Table of Contents with local anchor tags & IDs
So using this idea of IDs to name destination elements of links, we can use this for local navigation.
For example, if you have a really long article, you’re going to break up the content logically with headings and subheadings.
Each one of those is an HTML element, like <h2>German Shepherd Dogs</h2>. But you can give them an ID as well, like <h2 id=”german-shepherd”>. And then you can create a link directly to that element.
Anchor tags serving as local navigation links do not need the full url values put into the href attribute – just the #idvalue, like <a href=”german-shepherd”>.