Absolute and Relative URLs and Hyperlink Targeting

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

Developing Web Applications with HTML and CSS
course-steps
7
certification
1
lab-steps
2
description
1
play-arrow
Start course
Overview
DifficultyBeginner
Duration11m
Students29
Ratings
3/5
starstarstarstar-borderstar-border

Description

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.

Transcript

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//www.qa.com./index/html 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.

Lectures

About the Author
Students3028
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics