Till now you've seen and learnt the ways to create anchors in your HTML documents linking the same to other web pages whether they are ones you created or have found elsewhere on the Internet. Now suppose you want your viewers and readers to get connected to a specific section within a document... what do you do? Simple... use yet another set of those helpful HTML tags. Yes, the world of HTML has been well-designed to cater to every need and requirement.
Yes, you got it right. Out here we'll discuss and look for ways to jump across several sections within your HTML document. So guys....
Welcome to Lesson 9 (d) – Linking Sections within the Same Page
Why let your viewers go through the difficult task of scrolling down long pages of content when you have an alternative provision at hand? Make your readers happy by simply offering them page jumps to transport around your site. Page jumps are experiencing soaring popularity, and in order to ensure the traffic flow to your site, make sure you introduce these simple navigational aids.
Normal links are in no way different to anchor links. The ONLY point of difference between these two links being, normal links always point to the top of a page, whereas anchors (similar to all other HTML link tags, anchors too use the same <a> element) point to a place within a page. Linking to anchors are done by assigning names to sections of your page, and then making the link by referring to that particular section. A named anchor is a hidden reference to a particular segment within your HTML file that is widely used by HTML authors to link up different sections within the same page or even to a named section hosted by some other page. The general format for this kind of an HTML tag is:
<a name="NAME">Text to Link</a>
For example if I take up this particular page, I can go ahead and create a concealed marker called "steps" to mark the heading below "Steps to Insert Anchor Links", and subsequently I write an anchor link to connect to this section of this document. Now when my site viewers will click on a link to this named anchor, the browser will shuffle so as to bring this particular sub-heading at the top of the screen:
<a name="steps">Steps to Insert Links to Anchors</a>
Note, instead of 'href', we have written 'name' over here. So how does this differ from the conventional <a href=....> tag? It is at the time of creating a hypertext link i.e. a text that appears underlined in blue and as "hyper", that we use the <a href=...> HTML format. Now if you take the above example for instance:
For further information please go to <a href="#steps">Steps to Inset Links to Anchors</a>
Please note the hash mark (#). It is the mark that tells the browser that it’s a section of a page it’s looking for, and not a separate page or folder. Always remember, the # goes in the <a href> attribute value, and not in the <a name> tag.
And after having read this much, finally, now its time that we look into the steps to insert a link to anchors.
Steps to Insert Links to Anchors
- Open your working document in the text editor program, and spot the section you want to link to.
- Once you’ve located the segment to be linked, put a <a name="html"> tag. Don't forget to close the tag with </a>. It can either be directly after or around some text, i.e. depending upon the extent you want to link to a certain sentence.
NOTE: Following the name element I’ve written html within quotes, because our working document was titled HTML lessons. Similarly for your document, you put in any word of the section that you want to link to.
- However, the word within quotes should be kept as short and simple as possible. It can be any word as per your choice that is included within the section to be linked.
- Locate where you want to link from.
- Note that where ever you put the <a name="..."> tag is going to appear at the top of your screen.
- Once you’re done with inserting your tags, save your document, return to the browser, reload the same and now you should be able to view the changes implemented.
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 12/05/2009
