How to HTML Bookmark Links

How to HTML Bookmark

HTML anchor or Html Bookmark is helpful, if you have a long page that you want to allow the users to quickly navigate to different sections in the same web page or you can navigate to targeted location of the other web page.

The Anchor tag < a > ...< /a > is using for creating bookmark links.

Navigation within HTML Document

Here is an example of Html page and a bookmark in it. When a user click the link "GoTO Bottom" the page scroll down and get there where you bookmarked bottom of the page.

The first thing you need to create a link that the user can click on to jump to the bookmark.

<a href="#bottom">GoTO Bottom</a>

Next step you need to place an Anchor in your page where you want the user to be able to go to "Bottom".

<a name="bottom" >Bottom</a>

Link Within a Page

Here is the full HTML page example of bookmark link. For working purpose you have to put some more < br > statement in HTML page or fill the page with lot of contents instead of < br > tags.

HTML Source Code :

<html>
  <body>
    Bookmark example <br>
    <a href="#bottom">GoTO Bottom</a>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    Bookmark come here <br>
    <a name="bottom" >Bottom</a>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
  </body>
</html>

When you click on the link "GoTO Bottom" the page will scroll down and position the bookmark "Bottom" at the top of the browser.

You can link to a bookmark on a different page, you should mention the url of the page to the bookmark name in the href attribute:

<a href="http://mywebsite.com/index.html#toc">
Table of Contents
</a>

Here when you click on "Table of Contents" the link navigate to other page (here index.html) bookmarked area.