In-Page Links

In-Page Links

On very long websites it can be difficult for the user to find the content they want. For this, we can put a list of the main headings on the page in the necessary places and make it go to the relevant part of the page when clicked. For an example, you can check this page:

As can be seen on the page above, a list of important titles is linked at the top of the page, and when clicked, the page scrolls to the location of that title in the browser window.

Another example is the links that are placed at the end of the page and return to the beginning of the page.

Creating In-Page Links

Like out-of-page links, in-page links are created with the a tag. However, this time we will do two-stage work.

  1. Putting a bookmark on the destination on the page and giving it a name.
  2. Providing a link to the bookmark we created.

1. Creating a Named Anchor

Let's put a bookmark named "baslik1" with the following code snippet to the desired place on the page:

<a name="title1"></a>

The name parameter is used to give a name. A tags can be left blank because the purpose is just to mark.

2. Link to Bookmark

Then, the following codes are written in the a tag where the link will be placed:

<a href="#title1">Click to go to title1.</a>

The name of the bookmark to go to in the href parameter should be written with a # at the beginning.

html bookmark, link to a place on the same page, anchor, bookmark, a tag name parameter, in-page link, html page scroll


Example: Creating a bookmark with tag a Try It
<p><a href="#top">To the top.</a></p>
<p><a href="#title2">Title2</a></p>
<p><a href="#title3">Title 3</a></p>


Read 536 times.

Online Users: 793