Absolute and Relative URLs and Hyperlink Targeting

The course is part of this learning path

Start course

One of the best parts of HTML is its ability to hyperlink to pretty much anything. This lets you link to external websites, and pages within your own site easily. In this module, you’ll learn how to hyperlink and how to use named anchors to move around pages. After this, you’ll learn about the difference between absolute and relative URLs, and when to use them. We’ll end the module off with a discussion on how to include mailto links on your sites.


Hyperlinks give you the option to link directly to other websites, or to points within your own page. This includes named anchors, but in this video I want to go a little deeper into how you can use either absolute or relative URLs when hyperlinking. And, how you can use the target attribute of the anchor element to tell the browser exactly how it should display hyperlinked content.

Okay, so, let's talk about the theory for a moment. Absolute URLs are the kind you enter into a browser, and expected to show you a website. Let's say, this is something like https// it's got the full syntax. This is a absolute URL because wherever you type this URL, it will always take you to this web page, and if you copy and paste it from one device to another, nothing will change. Simple right?

Okay, so, a relative URL is different because it only works in relation to the current web page you're on, and points to a location that only makes sense in terms of the server that your web page is sitting on. In other words, the URL is relative to the web page it's on, its file structure and its server. This may sound a little confusing, so let's take a look at the mark up. So, for an absolute URL, I'll just use a standard anchor element with an ATTRIB attribute, and using our example, that will look like this.

For a relative URL, I'll use the same anchor element with an ATTRIB attribute, but this time, I'll only use the last part of the URL, which will look like this. So, why would you use a relative URL? Well, they're economical and make the page shorter, and they also help you move groups or documents from one server to the next, without needing to do a lot of editing. Of course, if your resources were moved or its name has changed, the hyperlink just won't work anymore.

So, now you know the basic difference between absolute and relative URLs, but, when you're using them, how do you get them to point to the exact location you want users to see? You'll need to use the hyperlink targeting feature. So, this is just an attribute which works with the anchor elements, and there are four different versions of it. _blank, will open up a blank window or a new tab in a browser. _parent will take the user to the immediate parent of the document the link's in. The _self attribute just opens the link in the same frame it was clicked on. Last up, the _top attribute opens the full body of the window. To use these attributes, first open the anchor elements and add your URL like this.

Then, after the URL, add in target= _ whatever attributes you want to use, which will look like this. Modern browsers don't like cross-origin links. Or, in other words, links to other domains that open in new tabs and so may not work properly as they are seen as a security threat. It's recommended that you use an additional attribute to define the relationship of the link called rel. This can be set to no opener which makes the new page run in a separate browser process, or no referrer, which does the same thing, but additionally stops the referrer header being sent to the new page. And, this brings us to the end of this video.

As you've seen, there are two types of hyperlinked URLs. Either relative, or absolute. For either of these, you can use the targeting attributes to tell browsers exactly how to respond to the URL when the user selects it, which can really help you refine the user experience of your page.


About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics