A subscriber has asked me how to create a link so that it goes to a specific point on a page, instead of opening it at the beginning. Let’s see how!
As you say?
By default, when you link to a page, it opens at its beginning, that is, the upper part. This always happens. But let’s imagine that we want to link a “specific point”. For example, in a Wikipedia article, a section that is in the middle of the page, so that those who go there do not have to scroll until they find that point.
I give you an example. If I link the tutorial as it is, you will be able to verify that if you click you go to the beginning of the article. But if I want to direct you to a specific point of it, for example, “Testing Phase”, . Or you could even make a .
Achieving this is actually very simple, let’s see the two steps we have to follow:
First step, create the “anchor”
The first step is to create the “anchor”. the anchor (anchor) is the destination point. Where do we want to go? We do that easily by passing the “id” attribute to any element. For example, in the example that I told you before, the destination was the H2 “Testing phase”. So we’ll edit the code to go from this:
To this:
-
Testing phase
We can place this “id” parameter wherever we want. In an
, an
, a
, a , a , etc. Go where you want. And if by chance there were no elements, you can create an “empty” one, like this:
With that element, even though nothing is displayed visually on the page, we have an anchor (hence the “a”) ready to be linked. And that is precisely what we are going to now. To link.
Second step, create the link
If the first step was simple, the second is even more so. We only have to create a link as we would normally do, with the detail of adding a square (hashtag) at the end, followed by the identifier (go) that we have created before. So once again, using the example above, instead of using the URL:
- https:///tutorial/un-proyecto-de-principio-a-fin/
We will use the following:
- https:///tutorial/un-proyecto-de-principio-a-fin/#pruebas
In this way, we will be telling you to go directly to that point. Easy right? Even in the case that we want to go to a specific part from the same page we are on, we only need to place the hashtag with the ID, and nothing else. That is, to link to the bottom of this page, instead of using this URL:
- https:///tutorial/crear-enlaces-a-puntos-concretos-de-una-pagina/#fin
I can do it like this:
And it will work the same, since by default browsers will look for that ID on the page we are on. Less is more!
Summary and conclusion
To directly link to a section or section of a URL, we must first create a destination point with the “id” attribute, and then we must link it with the hashtag symbol (#) followed by that same identifier.
If you want to know more and better about these tricks, as well as online marketing, I advise you to take a look at what you have available. If you subscribe you will have full access to all immediately, including the or .
For any questions, you already know that you can contact me through the support tab of the , and I will be happy to solve it with tutorials like this one. See you in the next one! 🙂
With that element, even though nothing is displayed visually on the page, we have an anchor (hence the “a”) ready to be linked. And that is precisely what we are going to now. To link.
Second step, create the link
If the first step was simple, the second is even more so. We only have to create a link as we would normally do, with the detail of adding a square (hashtag) at the end, followed by the identifier (go) that we have created before. So once again, using the example above, instead of using the URL:
- https:///tutorial/un-proyecto-de-principio-a-fin/
We will use the following:
- https:///tutorial/un-proyecto-de-principio-a-fin/#pruebas
In this way, we will be telling you to go directly to that point. Easy right? Even in the case that we want to go to a specific part from the same page we are on, we only need to place the hashtag with the ID, and nothing else. That is, to link to the bottom of this page, instead of using this URL:
- https:///tutorial/crear-enlaces-a-puntos-concretos-de-una-pagina/#fin
I can do it like this:
And it will work the same, since by default browsers will look for that ID on the page we are on. Less is more!
Summary and conclusion
To directly link to a section or section of a URL, we must first create a destination point with the “id” attribute, and then we must link it with the hashtag symbol (#) followed by that same identifier.
If you want to know more and better about these tricks, as well as online marketing, I advise you to take a look at what you have available. If you subscribe you will have full access to all immediately, including the or .
For any questions, you already know that you can contact me through the support tab of the , and I will be happy to solve it with tutorials like this one. See you in the next one! 🙂
Facebook Comments
Disqus