HTML Anchor link

HTML Anchor link::
In this tutorial we will be extending the table of contents from the previous tutorial by adding a HTML anchor. A HTML anchor is used to link to relevant paragraphs / chapters within a webpage.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

For an Anchor point we have to create a link to a paragraph on a page, then we ad an id tag to the linked paragraph. In this tutorial we will be creating a link to the Buttons section of the page. We will create a link similar to the hyperlink tutorial with a small variation to the link text inside the inverted commas.

To create the link type <a href="#Links"> before the Buttons section in the table of contents and add </a> to finish the link. Instead of a website address inside the inverted commas we will be adding a hash symbol # along with text that will be the id name for the anchor. I will explain the id tag in the next paragraph.

HTML code		Sample of code output
<a name="Top">Table of contents</a> <ol>    <li><a href="#Links">Links</a></li>    <ul>       rest of table of contents  code goes here.......... </ol> rest code goes here..........		Table of contents Links Text Link Text Link with target attribute Buttons Clickable button Onclick event button URL link button Tutorials Completed

Now we will add the id tag to finish the connection for the anchor link. An id tag is the name of the link that you will be using as a bookmark inside the page. The best practice is to use the header title for the paragraph you want to link to.

The code for the id tag looks as follows <a name="Links"> </a>. The a href for a web address link is replaced with a name. The id tag in the code is "Links" . You can replace this text with what every you want to call the anchor id but it must match the link address set out above.

HTML code		Sample of code output
<a name="Top">Table of contents</a> <ol>    <li><a href="#Links">Links</a></li>    <ul>       rest of table of contents  code goes here.......... </ol> <h2><a name="Links">Links:</a></h2> rest code goes here..........		Table of contents Links Text Link Text Link with target attribute Buttons Clickable button Onclick event button URL link button Tutorials Completed Links:

Save your HTML document and test on browser of choice.

Repeat the steps above for the rest of the table of contents and complete the additional anchor links below and save your HTML document and test on browser of choice.

Additional anchor links:
Note: The best use that I have seen for a link anchor on the web is to set a link to the top of the web page under each paragraph. This will allow the user to go to top of page without scrolling on computers, mobiles and tablets.
Sample code for top of page link: <a name="Top">Table of contents</a> to set anchor and <a href="#Top">Top of tutorial page</a> to create the link.
Output for code snippet above as follows Top of tutorial page

Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after Anchor Link in the completed tutorials table.

<tr>    <td>Anchor Link</td>    <td>Yes</td> </tr>

To download the finished example for this tutorial please click here

Note:You can also create a link to an anchor point from another page with the following code.
<a href="http://myprogramingjourney.blogspot.ie/2014/07/test-anchor-link-page.html#testAnchor"> External anchor</a>
Output for code snippet above as follows Test external anchor

Replace the url which I have highlighted in yellow with your own url and the red highlighted text with your anchor text.

Previous tutorial

Next tutorial