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.

Anchor links and its attributes in HTML

Tweet

Links are used to access other webpages and the pages within a website. Without links, the World Wide Web will be much of a locked resource and it wouldn't have come this far. In HTML, links are noted with an anchor <a> tag, as the name says anchor that links other portion of the web.

href Attribute

<a href="http://webpage.html">Your Website</a>

An anchor starts with a <a> tag. Then to link with the other pages, href attribute is used where the URL is denoted inside double quotes. Before closing the anchor tag, the name for the link should be made, as the user knows what is that link about.

Tabbing

<a href="http://codecrypton.in" tabindex="1">Code Crypton</a>
<a href="http://google.com" tabindex="2">Google</a>
<a href="http://yahoo.com" tabindex="3">Yahoo</a>

When using the browser, the browser options and other parts of links in a webpage can be accessed using the tab key. So, HTML gives an option where the links can be accessed in a arranged order.

This is done using the tabindex attribute, where numbers are denoted in the order in which the tab moves places among links.

Titles

<a href="http://codecrypton.in" title="Code Crypton Website">Codecrypton</a>

Sometimes to give additional details to a link, the title attribute is used. When the mouse pointer moves over to the link a simple box pop-up to give information that is added in the title attribute.