The internet survives on two main things.
- Web pages.
- The links between them.
To use a Star Wars analogy, links are like the Force. They bind the pages of the internet together.
The anchor is the HTML element you use to create a link. It looks like this.
Well that won’t do much by itself, as it is just the opening and closing anchor tags. In order for it to become something resembling a link that you can click on, we need to add two things.
- A URL to link to.
- Some anchor text.
The URL is added using an href attribute that resides within the opening anchor tag. The anchor text (the visible part of the link) is entered between the opening and closing tags. So here we go again, this time with the additional bits added in.
<a href="https://www.alansitsolutions.com/">Alan's IT Solutions</a>
And here is what that link actually looks like.
You aren’t restricted to plain old boring text when creating links. You can instead use an image. We won’t go into detail about images right now (there’ll be another article about them), but here is an example you can click on.
Opening a link in a new tab or window
If you clicked on the image link above, you will have noticed it opened a separate window or tab in your browser. You may wish to do this to stop a visitor leaving your site when they click on an externally facing link.
By default links open content in the same window or frame that they appear in. You can change this by adding the target attribute set to _blank. Like this…
<a href="https://www.alansitsolutions.com/" target="_blank">Alan's IT Solutions</a>
The above link looks and behaves like this…
There are other options for the target attribute. _self just tells the link to use the default behaviour. If you are using frames, then _parent opens the link inside the parent frame, while _top breaks out of the frame and fills the entire page. You can also specify specific frames.
Creating an email link
You know those links that when you click them it opens up your mail client with a message already addressed to the recipient? Those are easy to do and it is all down to the URL you use. Instead of http:// or https:// use mailto: followed by the email address.
<a href=”mailto:firstname.lastname@example.org”>Email Joe Bloggs</a>
No need to use target=”_blank” when create links like this.
Absolute and relative URLs
If you specify the full address in a link, that is known as the absolute path. It includes the http:// or https:// part of the address. Although the search engines like absolute URLs, you may find it better in some cases to use a relative URL. Here are some examples to help explain.
This is the simplest and will take you back to the root of your domain, which is usually the home page of your site. You can of course navigate anywhere like this. For example, the full address of the page you are reading is https://www.alansitsolutions.com/learn-html/links/ Specifying href=”/” will take you back to https://www.alansitsolutions.com/ while specifying href=”/blog/” will take you to https://www.alansitsolutions.com/blog/
Here are a couple of examples for you.
<a href="/" target="_blank">Home</a>
<a href="/blog/" target="_blank">Blog</a>
To navigate to a sub page of the current page in the directory structure, you do not need to include anything preceding it. For example, if the current page was https://www.alansitsolutions.com/services/ and you want to open the page at https://www.alansitsolutions.com/services/website-design/ you would simply write href=”website-design/”. You could also precede the page with ./ so href=”./website-design/”. The ./ simply refers to the current directory.
Two dots followed by a forward slash (../) refers to the parent directory of the current page. As in this example…
<a href="../" target="_blank">Up one level</a>
It can get a little confusing once you start using relative URLs, with addresses like “../../../somepage/”. So if in doubt, stick with the absolute path if you can.
Linking to a specific part of a page
Any HTML element can be identified by an id attribute. You can link to an id using # followed by the id name. For example, this page has a row of social icons at the top. The id of that part is social-bar. To link to it, we would write…
<a href="#social-bar">Up to social icons</a>
That takes care of linking to different sections of the current page. You can specify the id of an HTML element in any URL though. So for instance, I gave the title of this section an id by adding id=”link-to-id” to the opening h2 tag. To link to it directly you could write https://www.alansitsolutions.com/learn-html/links/#link-to-id
Adding a title to your link
Why would a link with anchor text need a title? The simple answer is that it gives people additional information when they hover the cursor over the link. An obvious example is when you see a link with anchor text like, “Click here.” The title in that case is very important.
A title is there to give additional information, if you are just duplicating the anchor text it is not needed.
To add a title to a link, just add title=”” inside the opening <a> tag with the title between the two quotes. Like this…
<a href="https://www.alansitsolutions.com/blog/2014/12/16/multiple-signatures-thunderbird-quicktext/" target="_blank" title="Multiple Signatures in Thunberbird with Quicktext">Cool Thunderbird extension</a>