We always have to ensure that the user feels comfortable on our web pages. To do this we must provide you with links that allow you to navigate to the main page, the main categories,… and above all, if the page we have is very large, we must make it easier for you to go to the beginning of the page without having to drag the damn cursor.
At this point we must comment that this situation should not happen much. We are not interested in having kilometer-long pages. For several reasons, for example, because the user will not understand so much information at once, possibly reading on several pages will help the reader, due to the size of the page. The more text the page has, the more it will weigh, which will make it more expensive to download the page to the browser.
But regardless of how big the page is, we should always make it easy to go to the beginning of it.
To be able to do this we will use the element
A
. And the “anchor” not only serves to link pages, but to point out a specific point on it.
Thus, if we want to point out a specific point we will use the attribute
name
<a name="top"></a>
If we put this code at the beginning of the page we can make links that position the browser in it. The same will work if we put it anywhere on the website, with any other name.
So, at the bottom of our page, we could put the following anchor
A
:
<a name="below"></a>
What will be referred to at the bottom of the page.
Now we will only have to create the links. To create a link the same
A
, but instead of with the
name
, we will use the attribute
href
.
<a href="page.htm">Link text</a>
In the line of code that we just wrote, a link is made to a specific page. If we want to refer to a part of the page, that is, a part defined by the
name
of the element
A
, we must use the pound after the name of the page.
<a href="page.htm#top">Link text</a>
If the part of the page is on the same page as the one in which we are inserting the link, we can ignore the name of the page:
<a href="#top">Link text</a>
Our example of going to the beginning and the end will look like this:
<html>
<head>
<tile>Go Up and Go Down</title>
</head>
<body>
<a name="up"></a>
<a href="#below">Go to the bottom</a>
<br/><br/><br/><br/><br/><br/><br/><br/><b r/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#top">Go to top</a>
<a name="down"></a>
</body>
</html>
We only have to copy this code into a file that we will call PrincipioYEnd.htm.