How to bookmark a website page - anchors in HTML

17.12.18 IT / Html 18418

Sometimes you need to make sure that the visitor not only goes to the page, but also gets to a certain place. This is done using HTML anchors .

Anchor (anchor) is the name of the technology bookmarks on a site page , that is, a tag to which a visitor returns from any other place. It is very easy to make a bookmark on a website page. You can bookmark not only the current page, but also others. HTML anchors can be very useful in various cases, for example, for creating navigation on large pages with sub-paragraphs, for creating simple bookmarks, etc.

Small example:

  & lt; h2> Anchor references & lt; / h2>
& lt; p> & lt; a href = "# anchor1"> Go to anchor 1 & lt; / a> & lt; / p>
& lt; p> & lt; a href = "# anchor2"> Go to anchor 2 & lt; / a> & lt; / p>
& lt; p> & lt; a href = "# anchor3"> Go to anchor 3 & lt; / a> & lt; / p>

& lt; h2> Anchors on page & lt; / h2>
& lt; p id = "anchor1"> Anchor on page 1 & lt; / p>
& lt; p id = "anchor2"> Anchor on page 2 & lt; / p>
& lt; p id = "anchor3"> Anchor on page 3 & lt; / p>  

As you can see, it is enough to add the id attribute to the required tag and refer to it in the link after the # sign. Previously, the name attribute was used instead of id , but this has changed in HTML5. If the page contains a anchor link , but there is no anchor, no error will occur. This property of anchors is often used in JavaScript to handle clicking on links.

It is important to note that after clicking on the anchor within the current page, the navigation in the browser changes - the back and forward buttons take into account the clicks made. Therefore, you will have to press the back button several times until you go to the previous page. And in order to make a smooth transition to the anchor , you need to use JavaScript .