Home
Do you know how to use named anchor links?
  v5.0 Posted at 22/01/2013 12:26 AM by Tiago Araujo

The attribute "name" allows you to link to specific places within the page, via the <a> tag.

This is especially useful in long pages that can be separated into sections. You can create a named anchor in each of these section headings to provide "jump-to" functionality. In other words, you can have a different URL for each piece of content on the same page.

<h2><a name="get-started"></a>Get Started</h2> Figure: This is how you add an anchor name to an specific section of your page. Note it doesn't have the hash mark and the anchor tag is empty

You now have a custom URL that points to the specific section of the page. It is the page URL followed by the hash mark and the name you chose:

http://www.yourpage.com#get-started Figure: This is how your custom URL will look like

You can use this new URL to point users to that specific section of your page.

To create a link to your anchor named section inside the same page, simply add a new "href" anchor tag - now with a hash mark followed by the name you chose:

<a href="#get-started">Go to Get Started section</a> Figure: This is how you add a *link* to that anchor name you created inside the same page. Remember to add the hash mark

Tip #1: Use the hash mark only to go to the top of a page. 
E.g. <a href="#">&Go to top</a>

Tip #2: Some browsers consider capitalization for anchor names (E.g. Firefox). Always check your links and anchor names are identical, matching the capitalization.

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments: