Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

Named Anchors
Overview
Difficulty
Beginner
Duration
11m
Students
232
Ratings
4.5/5
starstarstarstarstar-half
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

While you can use the anchor element with the href attribute to hyperlink to external websites and resources, it's also actually possible to hyperlink to other elements within your own website. You can do this using named anchors and the id attribute. The basic idea is that you use the anchor elements with the id attribute to define a named anchor. Then later on if you want to hyperlink to that named anchor, you can use an anchor with an href attribute whose value is an id of a named anchor.

Let's have a look at how this works in practice. So first off let's say I want to be able to jump to a point to my page called start. First off I'll need to create an element that has an id attribute. So I'll open the tag then add an id to the element which is start in this case, great. Now if I want the user to be able to get to this point at different points in the page, all I need to do is use my anchor elements but this time with an href attribute and a hash tag before the name like this.

In the browser, clicking on the top of the page link will now display the h1 tag at the top of the page, awesome. Let's say you have two pages though and you want to be able to hyperlink to a named anchor on another page, how do you think you'd do it? If you thought you'd use an href attribute, you're right.

First open the anchor tag with the href attribute then you'll add the domain of the page probably something like www.somedomainname.com, then add a hash tag followed by the name of the anchor. And that's all for this video. As you can see named anchors give you a lot of flexibility. Using them you can link between any point in your page or between other pages.

Lectures

About the Author
Avatar
Ed Wright
Senior Learning Consultant
Students
11212
Labs
7
Courses
29
Learning Paths
9

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