Things we can do with HTML anchor links

This lesson brings together a few things we’ve learned so far into a practical activity – creating and styling links, menus & buttons. And at the heart of it all is the anchor link.

<a href="https://www.url.com"> link text </a>

Every link on our website is created with one of these anchor links, whether it’s a text link inside a paragraph, a button, or even a clickable image that takes you somewhere on the site.

You can create links on their own, or within another element, like in the middle of a paragraph.

<p> If you don't know the answer <a href="#">just google it</a>, Google knows everything </p>

When you insert a link within an element, close the element in the reverse of the order that you opened them. First, you open the paragraph <p> then open the anchor link <a> then close the anchor link </a> then finally close the paragraph </p>.

Creating links with contents inside

You can also create links with other content inside it, like these for example on our website. These little cards are just a link that has an image, heading, and paragraph inside them, and then styled to look like a card. By putting them all inside the link, you can click on any part of it.

And this is how it looks like in HTML:

<a href="#">
	<h3>Coding Challenge</h3>
	<h4>HTML & CSS</h4>
	<img src="/images/person.jpg">
</a>

Linking to another page

You can link to pages on your own website or external websites, through what we call relative and absolute URLs.

For example, https://eyesofanomad.com/contact is an absolute URL, and we generally use these kinds of links when we want to navigate to an external website. It has to contain the entire address of the page (including the http://) or else it won’t work consistently. 

<a href="https://eyesofanomad.com/contact">Emilio’s Photography Contact</a>

We also have relative URLs that can only be used to navigate within our existing website - it starts with the forward-slash and leads the browser to navigate to a specific file in our website folder. So if we want to navigate to the “About” page, we would just use the relative URL like this:

<a href="/about.html">About Us</a>

This URL won’t work for external websites but will make it easier to link to different pages or images on the same website.

If your page was located inside another folder, like for example “Services” > “Photography” then you would need to tell the browser to navigate to the folder first, and then the file itself. 

<a href="/services/photography.html">Photography</a>

Linking within the same page

You can also create links to jump to specific elements on the same page. This is really helpful when you have a long single-page website and need to break it down into multiple sections.

These links are a little more complicated because they have two parts:

• The link that points to the specific element - by using the href attribute starting with # and the ID of the element we want to link to;
• The ID attribute on that specific element that we want to link to.

<!-- This is our link -->
<a href="#services">View Our Services</a>

<!-- This is the element we want to link to -->
<h2 id="services">Our Services</h2>

The name of your ID attribute should be unique among all IDs and only used once per page. The # symbol in HTML and CSS always references the ID of a particular element.

Linking to an email address

You can also link to an email address, just by adding mailto: and then your email address into the href, like this:

<a href="mailto:hello@instituteofcode.com">Let's Talk</a>

When you click this, it will open up the user’s default email client on their device and create a new blank email addressed to you.

Linking to a phone

When you add tel: and your phone number inside the href and then click on the anchor link, it will go straight to the phone call interface (mobile device) or Facetime or Skype (desktop) so you can immediately start a call. Here’s how you can make the links:

<a href="tel:+49.157.0156">Call me on +49 157 0156</a>
<a href="tel:+1(555)5309">Let's chat +1 (555) 5309</a>
<a href="tel:+62-812-3000-2124">I’m available on +62-812 3000 2124</a>

The tel: protocol allows you to separate the phone number with dots, brackets, and dashes but not spaces. You can always separate the numbers on the text with spaces though.

Linking to a downloadable file

If you have a file on your website that people can download, you can create a link for that by giving the hrefattribute a relative URL to where the file is hosted in your website folder.

Also, we need to add the download attribute after closing the href to signal the browser that this is a downloadable file.

<a href="/files/ebook.pdf" download>Download Ebook</a>

Opening a link in a new browser tab

We have another attribute called the target attribute which basically gives instructions to the browser about whether the link should open in the current tab or in a new tab. We typically do this when we need to link to an external website. To do this, simply add a target attribute with _blank (remember to always include the underscore).

<a href="#" target="_blank">Link Text</a>

Adding a link title

If you want to give a little more clarification about where a link will go, you can also add a title attribute, which will show up like a little tooltip when the user hovers over the link. Originally, this was intended to indicate the title of the linked document, but you can also use this for any text which you might think will be helpful to the user.

<a href="#" title="A short description">Link Text</a>

Styling the anchor links with CSS

Changing the color

There are 2 ways we can change the color of our anchor links in CSS:

1. We can directly specify the color either by color names, HEX codes, RGB, and RGBA values

a {
	color: #ff0000;
}

2. We can make the link inherit the color of its parent

a {
	color: inherit;
}

My preference is if you want your links to have a different color, use the first option. If you want the links to be the same color as normal text, then use the second option.

Removing the underline

Anchor links are underlined by default, but if you want to remove the underline from your links, you can do that by using text-decoration.

a {
	text-decoration: none;
}

But this is not a good practice as links always need to be distinguished from the rest of the text, either by color or by underline. To better customize the underline and to make it more appealing, we can use border-bottom property instead of text-decoration.

a {
	text-decoration: none;
	border-bottom: 1px solid;
}

Hover state for links

We can change the style of an anchor link when we hover our cursor over it. This is important so that the user knows that they are clickable. We do this by creating another selector and the :hover pseudo-selector, which looks just like this: 

a:hover {
	color: #ff0000;
}

The colon and the keyword are there to specify a certain state for the element targeted by the selector - in this example, the hover state. You could throw just about any properties to a selector with a hover state, but typically we only change the color, or border color - basically anything that isn’t going to change our anchor links too dramatically. 

Creating a button 

Buttons are just <a> elements styled with colors, borders, background colors, padding, and margins to look like buttons. 

Here is an example of button styles:

a {
	color: #00bbcc;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 0.5rem 2rem;
	display: inline-block;
	transition: 1s all;
}

a:hover {
	color: #ffffff;
	background-color: #00bbcc;
}

Let’s break that down… 

border: we want a border on all 4 sides. You can choose to define the color in the value, otherwise, it will inherit the color of the anchor link text.

border-radius: we can stylize our button by rounding the corners of our border, normally we use pixels as this is just a small adjustment and won’t affect any other part of the page.

padding: we need this to create more space inside the border and expand the clickable area of our anchor link. When the padding property has 2 values, it means that the first is top and bottom padding and the second is left and right padding. 

display: inline-block; - we will talk more about this later, but know that it is needed if we want our links to accept vertical padding and margin and create space for themselves on the page. 

color and background-color on hover state: we are reversing the color when we hover over the button, which is a pretty common technique in web development.

See the Pen Simple Button by The Institute of Code on CodePen.

Creating a transition effects

Whenever we use hover effects they happen instantly but sometimes we want to give it a bit of flair by creating a transition effect. We can fix that with the single property of transition that will allow us to gently fade from one state to another. The transition only works on properties that have numerical values and not words (unless the words are shorthands for numbers eg. white = #fff ). So it would apply tocolor or font-size or padding, but couldn’t apply it to text-transform: uppercase; as that isn’t a numerical value. 

The following example creates a smooth hover effect.

a {
	color: #04csf5;
	border: 1px solid #eee;
	transition: 0.2s all;
}

a:hover {
	color: #6f2fda;
	border-color: #333;
}

Navigation Menu

We’re going to create a simple navigation menu using a container element called <nav>. It allows us to group all the anchor links that we want to put inside the menu so that they can be moved and styled together.

<h1>Joe’s Cafe</h1>
<nav>
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Services</a>
	<a href="#">Contact</a>
</nav>

body {
	padding: 5%;
	font-family: Georgia, sans-serif;
}

h1 {
	font-weight: lighter;
	text-align: center;
}

nav {
	border-top: 2px solid rgb(220,220,220);
	border-bottom: 2px solid rgb(220,220,220);
	text-align: center;
}

a {
	color: rgb(90,90,90);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	letter-spacing: 0.05em;
	padding: 0.5rem 0.8rem;
	margin: 0.5rem;
}

a:hover {
	color: rgb(140,140,140);
}

For the design we’re using, technically you can just apply margin instead of padding to give some space around the menu links, however, the space around those links won’t be clickable because as we’ve learned in the Hello CSS lesson,  the margin is not part of the element, but the padding is.

But it’s still nice to have a small non-clickable space between the menu links to act as sort of a buffer zone so that you won’t be confused when clicking one of the links. My recommendation is to use a combination of both. Apply your padding and margin at enough area so that it won’t feel too cramped but won’t overlap either when the browser becomes narrower (later we’ll talk about how to adjust our menu link responsively as the browser window size changes).

We’re going to cover display properties in more depth later, but while we are on the top there are three displayproperty values that we can use for our links: inline, inline-block, and block.

inline: the link will only take up as much space as needed plus any applied padding and margin on the left and right. While vertical padding & margin technically are applied, they won’t move other objects around to create space for themselves. Inline elements flow like text word-by-word until they run out of space and then they drop down onto the next link. By default, anchor links are displayed inline. 

Here you can see inline <a> elements with the default display:inline. Notice how they the vertical padding doesn’t create space for itself? 

inline-block: the links still sit in line next to each other, but this time, the top and bottom padding and margin will be respected, and the element will create space for itself. 

See how strange the paragraph looks? This is why we only ever apply display: inline-block to links that are buttons or in navigation and never to links inside paragraphs. 

block: this is the default value for most of the other text elements - it takes up the full width of its container and stacks one on top of the other. All properties (padding and margin) apply as expected. 

This is what it looks like if we set all of the links to display block

Smooth scrolling on link clicks within the same page

When you create a link to jump to a specific section within the same page, instead of just jumping in flash, we can make the page scroll smoothly before reaching the targeted section. This used to be only possible with javascript, but recently it has been introduced to the native CSS feature, which makes it very simple to use. To do that, we only need to add the property to the HTML root selector as seen below. 

html {
	scroll-behavior: smooth;
}

Unfortunately, this is yet to work on Safari or Internet Explorer but it’s already been adapted in Chrome, Firefox, Edge, and others. Later we’ll learn a javascript solution that will also work for Safari.

Good luck guys and see you in the next lesson!