How To Create A Link Within The Same Document Or Page (Named Anchor Links)
How To Create Named Anchor Links
We (I) use “in page links” a lot. When we loosely refer to “in page links” we technically mean HTML named anchor links used as bookmarks.
Example: Bottom of post.
In page (named anchor) links are great for directing visitors to content inside of a large webpage. Named anchors are often used to outline content at the beginning of large documents and webpages. Each chapter or header within the document or webpage is given a named anchor. Links to each of these anchors are put at the top of the document or webpage, such as a table of contents or FAQ sections. For example we use in page links when discussing malware removal instructions, allowing visitors to simply click the in page link and automatically scroll to the information they seek on the same page instead of scrolling down through a detailed page with lots of content. It makes browsing your website much easier and creates a path to receive information on a page much faster.
- Creating a link within a document or page is very simple and is accomplished exactly how you would produce a regular <a> tag <a href=””> link, because it is a regular <a> tag link.
1. Add a named anchor
<a name="Link">Chapter IV</a>
Title the named anchor whatever you wish, we use “link” in this example. “Chapter IV” is the text you wish to link to.
2. Create a link to the named anchor
<a href="#Link">Table of Contents</a>
When creating a link to the named anchor remember to use the pound/hashtag symbol (#) only for the actual hypertext reference (href).
3. Full named anchor hyperlink
Use named anchor links just like any other hyperlink:
Named anchor links can be used for more than just linking to material within the same page, you can use the link exactly like any common hyperlink.
For example, we have a named anchor links on a post describing how to remove Text Enhance adware. We supply visitors with a list of possible Text Enhance extension titles – which happens to be in the middle of the page, hidden between content.
- We created an in page link (name anchor link) for the extension list which looks like this: <a name=”List”>
- The URL of this post is: http://botcrawl.com/how-to-remove-text-enhance/
- Add the named anchor link #List to the end of the URL: http://botcrawl.com/how-to-remove-text-enhance/#List
- Now when visiting the link with the named anchor at the end, visitors will be directed to the extension list in the middle of the page, opposed to top of the webpage. Try it out!