How to link within a page, or jump to a section in a page

I don’t know about anyone else, but, there is so much complicated code in my brain, I often forget the simple stuff! So for the sake of reference, I’m creating this post so I don’t forget – and you don’t either!

Linking to anchors is very similar to normal links. Normal links always point to the top of a page. Anchors point to a place within a page.

A # in front of a link location specifies that the link is pointing to an anchor on a page. (Anchor meaning a specific place in the middle of your page).

To link to an anchor you need to:

  • Create a link pointing to the anchor
  • Create the anchor itself

An anchor is created using the <a> tag.
If you want to create an anchor called section5, you simply add this line where you want the anchor to be:

After doing this, you can make a link pointing to the anchor using the normal <a> tag, like this:

An A link with a href attribute

When linking to an anchor on a page you need to put a # in front of the anchor.

When you link to an anchor on the same page, simply enter:

An A link with a href attribute

When you link to anchors on external pages use this syntax:

A hastag used in a link to jump to a section

Anchors are generally used when you create pages with considerable amounts of text, perhaps on a FAQ page, when using an accordion or Policy document.

You would typically make an index at the top of the page linking to the anchors that have been added to key places in the text that follows, such as a Index, or Chapters.

Caroline Hagan

Caroline brings over 15 years as a Designer and Developer; featured in .NET magazine, the only woman in the UK accredited for Google Mobile Sites. A business mentor with Enterprise Nation, STEM Ambassador and Google Women Techmaker Ambassador Previous client projects include Blackberry, FIAT, Clark Shoes and Sky.

More of the same great news & thoughts

similar posts