Home : Basic HTML/CSS tutorial : Text expression : Within-page linking
Bullet-point lists
Within-page linking
< Previous: Bullet-point lists

Within-page linking

If you have a long web page, you may want to link to a specific point within that page in order to save the user from scrolling. You can do this using the <a> tag - both to create a link in the normal way, and to provide the "anchors" which mark positions.

Creating an anchor

As well as creating links, the <a> tag is also used to create an "anchor" - a location within the page which you can jump to specifically.

You need to give each location a name, used to reference it. This cannot include spaces or other special characters. This is supplied as the value of the name attribute of the <a> tag.

The <a name="name"> tag should then be used to surround the text you are referencing. When you jump to this link, the text contained within <a> will be scrolled into position by the browser to make sure that it's visible.

Normally you use the <a> tag on the subtitle of the section you want, or a single paragraph. For example:

<a name="contents"><h2>Contents</h2></a>
<p>blah, blah, blah...</p>

Linking to an anchor

You create a link to an anchor in the same way as normal - using the href attribute of the <a> tag. After the address of the page, you add a # symbol and then the name of the location (the same name previously specified as a name attribute.)

If the link is to another location on the same page, you can miss out the page name, beginning the address with the # symbol.

For example, to link to the contents section shown above, from within the same page:

<p><a href="#contents">Return to contents</a></p>

Supposing the section is from a page in the current folder called example.html, then it could be linked from elsewhere:

<p>Return to <a href="example.html#contents">contents on that other page</a></p>