In several articles on Linea de Code we have seen the importance of links within the World Wide Web and in particular within the creation of web pages HTML. The most normal thing is to link one page to another. In this way, once we click on the link, we will be positioned at the beginning of the linked page. But it may be that what we are interested in is taking the user to a specific part of the new document. So let’s see how we can create a link to a specific part of the page.
HTML provides us with a mechanism by which we can link to a specific part of the page.
To do this, the first thing we have to do is define an anchor (it looks prettier in English… anchor). This will be a point on a page to which we will later want to create a link.
In the first versions of HTML to create an anchor we used the element
a
from HTML and especially its name attribute.
<a name="topic1"></a>Topic 1
In our example we have defined an anchor that we have called “topic1”. Since the part in which it is positioned within the document would be related to “Topic 1”.
Although the HTML standard no longer includes the name attribute within the element.
a
. And in order to create the anchor we are going to use the attribute
id
about the elements. For example we can do it on a header element
h2
in the following way.
<h2 id="topic1">Topic 1</h2>
Remember that the identifying name that we give to the anchor is very important, since it will be the same one that we will have to use when making the link.
Once the anchor has been defined, the next thing will be to link to said anchor. The element that we will need in this case is the same as to make the anchor, that is,
a
. Although, now we will use the
href
. Attribute used to indicate the URL of the link.
To create a link to the anchor, the value of the href attribute will be the name of the web page that contains the anchor, followed by a pound (#) and the name we gave the anchor.
In this way the link to “Topic 1” will be as follows:
<a href="#topic1">Link to Topic 1</a>
In this case, before the pad we have not put any page name. Since we have assumed that the link and the anchor are within the same page. If, for example, the anchor were within the “history.html” page, our link to the specific part of the page would look like this:
<a href="story.html#topic1">Link to Topic 1</a>
With this we will have managed to create a link to a specific part of the page with HTML.