Skipping Navigation within a page using page anchors

Tweet

As we know links are used to access other pages, it can certainly be used to access pages within. This usually occur in a long page with many paragraphs. The best example of this is Wikipedia, where a link pressed in the contents section will be redirected to the paragraph containing the information.

1. Create a redirecting anchor link

<!--Page Anchors-->

<p>Jump straight to the <a href="#code">Code</a></p>

<!--Lot of contents -->

Just like we use URL inside a href attribute, we need to use a #(hashtag) followed by a name, which will be later used. The word(s) inside the anchor tags, which will be acted as the link should have an appropriate reason to the directed link. This is because, links which do not have reasonable name will make the user confused.

2. Select the redirected location of the page

<h1 id="code">Code</h1>

The link will always be redirected to a element where the id name is present. So you can only redirect it to an element like h1(headings), p(paragraphs) or div. But if you don't have an element you can actually use <span> tag. After that create an id with the name which follows the hashtag(#) in href attribute.