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 are great for linking to other resources from other pages within your own sites or to external websites, but you can also use them to create emails, which is great. If you have a contact us page, for instance, or maybe you just want to give users a way to email a company or person directly, let's have a look at how this works. So first up you need to change the scheme, which is the first part of URL from HTTPS to Mailto when you do this, you're telling the browser that when a user selects the link, it should execute its default email behavior.

Normally this will mean opening a new email, ready for the user to start writing. In practice this looks like this first I'll open with an anchor element and a href attribute like this. Then I'll follow the href with an equals mailto colon someperson@qa so whoever that person at QA is, and I'll close that opening tag, then I'll add the text which will be Contact QA. And then I will close an overall anchor elements. Now the text contact QA is hyperlinked with a Mailto link. And when the user selects it they'll automatically have an email address ready. which in this case is

So while this is obviously already really useful, you can actually take this a little further by adding an automatic subject line and even some body text. For the subject line, all you need to do is add a question mark. After the final part of the email address, then followed up with the subject equals to, and whenever subject line you want. To add body text, follow up your subject line with an ampersand. Then body equals like this. Then whatever text you want to include, and this I'll go with just dropping a line to say hello and close the tag. And that's all there is to adding Mailto links to your pages. This is a really important and powerful piece of functionality that you can use, but at the same time, as you've seen, it's also really easy to do.


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