Bruce Lee once said, "Until you have mastered anchor links in HTML and CSS, you have not mastered front end development."

OK, I'm kidding, Bruce Lee didn't say that. But it's still kinda true. Anchor links are often the first think aspiring devs learn to use - but there's more to learn than simply hyperlinking from one page to another. So let us begin our path to mastery...

Bruce Lee Anchor Text

When we talk about the anchor link, we mean the <a> HTML element. As you know, you mainly use it to hyperlink to other webpages, but you can also use it to link to email addresses, phone numbers, or even files on your local hard drive.

So why is called an 'anchor', and not a 'link' like a normal person would call it?

Well, it's because it was originally invented as a way of hopping between different parts of the same document. You'd use the <a> tag not only to create the link, but also to identify the part of the page you're linking to. Just as a real anchor stops a ship from moving, the anchor tag stopped the viewport from moving.

Nowadays, you don't need to use the a tag as a 'stopping point' - you can if you want, but you can also link to any element with an id attribute (more on this later).

The key attribute of the anchor element is href. You use this to state where you want the link goes:

<a href="https://alvarotrigo.com/">AlvaroTrigo.com</a>

The text between the opening <a> and closing </a> tags is the text that people actually click - known as the anchor text.

Below are a few anchor link HTML examples:

See the Pen on CodePen.

The above examples create an anchor link to a different web page. However as I mentioned earlier, you can also use anchor links to point to another part of the same page.

To do that, you just add an id attribute to the element you want to link to (which would usually be a header, but can be anything), and use that in the href attribute of the anchor:

<a href="#another-section">I'm linking from here</a>

<h2 id="another-section">I'm linking to here</h2>

Note that you need to put a # in the anchor's href, but not in the target's id.

Below is a same-page anchor link example so you can see how it looks in action:

See the Pen on CodePen.

OK, this works as intended. But what if our visitor wants to get back to the top? Should we just let them scroll all the way back up? We could... but let's make it easy for them, and add another anchor link taking them to the top of the page.

To do this, we use the exact same process as before. We just need to find the highest element on our page, the text-area div in this case, and add an id to it:

<div class="text-area" id="top">

Then we just link to it as normal:

<a href="#top">Back to top</a>

We get this:

See the Pen on CodePen.

At the moment, the link just teleports people to the new location. It would be cool if instead, the page scrolled gradually down to its destination.

Not only is that possible, but it's also pretty easy to achieve with jQuery:

See the Pen on CodePen.

You can find detailed instructions on how to do this here: jQuery smooth scroll.

One thing though. Notice how when we scroll down the lower part of the page, we end up with no gap between our destination and the top of the viewport? It's completely flush.

This doesn't look very nice, so we should add a little offset above our destination, to give it a little breathing room. To do that, we can just this nice trick from Chris Coyier:

#lorem-ipsum::before { 
display: block;
content: " ";
margin-top: -20px;
height: 20px;
visibility: hidden;
pointer-events: none;
}

The ::before is a pseudo-element, it will be the first child element of the thing you attach it to, in this case our destination header with the id of #lorem-ipsum.

By giving the psuedo-element a height, and making it a block element, we ensure that any sibling elements will appear on a new line below it. By setting a negative top margin, we shift it up by the same amount, which cancels out the height so our display won't be affected. However... as far as the <a> is concerned, that height still exists! So the target of the link is actually 20px above the element.

Told you it was a trick!

See the Pen on CodePen.

OK - you can make your links do something. Now let's think about the visual aspect. How can you change the appearance of anchor links?

Easy, just select the a element in your CSS, and add any style you want. For example, the default anchor link colour is blue, or #0000ee If you wanted to change that, you'd just use:

a {
color: #ee7700;
}

This would give you orange links.

Here are a few other common ways you can customise your anchor links with CSS...

Many sites get rid of the underline in their anchor links. I can see the logic here - I think every internet user knows that different coloured text is usually a link, and many people think links look better without the underline.

In CSS, you underline (or not) using the text-decoration property, so we can just select the a element and set that to none:

a {
text-decoration: none;
}

Let's try it and see how it looks:

See the Pen on CodePen.

What do you think? Better, or worse? I'll leave you to make that call on your own projects. Personally, I think the text looks cleaner without it... but I also think the underline is useful. It removes all confusion - "this is a link, 100% for sure, no question about it". I wonder if there's a middle ground here...

If we want, we can target our anchor link CSS to take effect only when the visitor hovers over the link. It's easy, just use a:hover in the CSS.

So if you want to remove the underline from the link, but have it pop back on when people hover over it, you'd use this:

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

The result:

See the Pen on CodePen.

OK I like it! step-by-step our page is coming together.

Earlier we talked about changing the colour of the link.

But as you know, links change to a different colour if you've visited that destination before. You'll have seen it in our example above - when you go back to the top, the original link is now purple - #551A8B, to be precise. That's the default colour for visited links.

If you want to change that, just use a:visited:

a:visited {
color: #7B0706;
}

This would make it brown.

See the Pen on CodePen.

Your anchor text doesn't have to be text. It can be any element at all!

It's quite common to use an image as a link - for example to point to a full-size version of the image. So how do you link up an image? Easy, just put your <img> element inside the <a>:

<a href="#top" id="to-top"><img src="https://i.imgur.com/LOUIXcd.jpg" alt="Back to top" /></a>

The cool thing here is, if the image link breaks, the alt text will appear. So the fallback is just an ordinary, fully functioning text link. Here's an example:

See the Pen on CodePen.

To make your anchor links even more visible to your visitors, you might want to add a little padding around them. And your first thought, I imagine, would be to do this:

a {
padding: 10px;
}

If you do this, you'll find that the padding only appears to the left and right of the anchor link, like this:

Padding only appears to the left and right of anchor text

This happens because <a> is an inline element, and all inline elements behave in this way. If that's what you want, great! You're done!

But if you want the padding to appear on all four sides of the anchor, you just need to make it an inline-block element:

a {
display: inline-block;
padding: 10px;
}

This applies to all inline elements, so it's a handy thing to know about. The result is shown below - effectively, it increases the line-height of any line that a link is on:

See the Pen on CodePen.

OK, +100 XP for you - you now know how to create and style your anchor links!

Bruce Lee smiling with the caption 'Good work my friend'

So the question now is, what's the next step on your journey? Here's an idea... why not try to create a full-page site? You know the type I mean - where the web page is broken into full-page segments, and you scroll down to move between them. They are commonly used by design studios and big name brands, and your portfolio will look awesome if you have a few of these on them.

But aren't they really hard to make? Well, they can be, if you decide to make one from scratch. But there's an easier way - use a JS library called fullPage.js.

fullPage.js is an easy-to-use, plug-and-play solution for making full-page sites. There are loads of different backgrounds, transition effects, and animations you can active really easily. Another cool thing is that fullPage integrates perfectly with WordPress - a lot of your potential clients (or potential employer's clients) will use WordPress, so having a way to make your work stand out from the pack will be a huge plus. And fullPage is that way!

Take a look: fullPage.js

About the author:

Warren is a front end developer based in the UK.
You can find more from him at https://warrendavies.net