HTML Basics: Navigating with Style – The Anchor Link and How it Can Change Your Content Game

Create Anchor Links and Define Jump Targets

On a page containing a lot of content, it is often necessary or it makes sense to use a link to jump to a specific section (jump target) within the page. An anchor link will only work if the page has a sufficient amount of content. This means that you would normally have to scroll to get to the desired section.

Define an anchor link by:

<a href="URL#JumpTarget"> 

This HTML code is used to define a link to a jump marker, i.e. a unique identifier that is assigned to an HTML element. The hashtsg symbol # is required. It tells the browser to jump to an specific piece of content on the same page.

The URL is optional and can be omitted if the jump target is on the same page.

To jump to a marker, 2 important conditions must be met:

1. a jump link

2. a unique jump target

What is a Jump Link?

A jump link differs only slightly from the already known HTML Hyperlink.

Any name may be used to name the jump target with the following restrictions.

• The name for the unique ID can be chosen as required. It may only contain lower case and upper case letters without umlauts (a – z resp. A – Z) and the digits 0 – 9. The first character must be a letter.

• Additionally, the hyphen ('-') and the underscore ('_') are valid characters.

• Spaces, umlauts and special characters are not allowed.

• The marker resp. the ID is case sensitive.

• The name may only be used once on the web page.

Link to an Anchor on the Same Page

A link to an anchor in the same HTML document is generated by the following code:

<a href="#AnchorName">LinkText</a>

1. For AnchorName, use the name that will be used to identify the anchor. Note the restrictions for naming the jump target.

2. LinkText is the clickable text that appears on your web page. It can be a single word or a phrase. Spaces, umlauts and special characters are also allowed in the link text. An Image Tag can also be used instead of link text.

Link to an Anchor on Another Page

The following code will create a link to an anchor in another HTML document:

<a href="URL#AnchorName">LinkText</a>

1. The URL can be another web page on your site or any other page on different server.

2. The URL, the #, and the AnchorName mustn't be separated by a space.

3. For AnkerName, use the name that you want to be used as a marker for the target of the jump (anchor).

4. The anchor text resp. LinkText is the clickable text of the link. It should be short and concise. Normally, one or more words are used as link text to describe the content of the link target. Spaces, special characters and umlauts are allowed. An IMG tag can also be used to replace LinkText.

Setting the Jump Marker

In order to make the anchor link working, the jump marker must be set. Headings and subheadings structure text and tell the user what a section is about. The anchor for a section or paragraph is often placed on the corresponding heading or paragraph.

<h2 id="AnkerName">Heading of the section</h2>

1. <h2> … </h2> is the markup of the first subheading of the document. It defines a 2nd Level Heading.

2. The jump target doesn't need to be a heading. The id="AnkerName" attribute can be used for any HTML element. The Headings H1 to H6 and P for paragraphs are particularly useful.

3. For AnkerName, you need to use the name (without the leading # character) that you have specified for the anchor in the anchor link. Pay attention to correct spelling, since upper and lower case is differentiated.

Setting a jump marker increases the ease of use (Usability) of your page and helps the user to navigate through your website. Especially on very long pages, the internal navigation with anchor links and jump markers leads the user to the point of interest.