Developed with



The course is part of this learning path

Developing Web Applications with HTML and CSS
Named Anchors


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.


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, 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.


About the Author
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