HTML Basics: The Ultimate Guide to Anchor Links – Simplifying Navigation and Enhancing User Experience

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.

How to define an anchor link

<a href="URL#JumpTarget"> 

This HTML code is used to define a link to a Jump Mark, i.e. a unique identifier that is assigned to an HTML element. The hash character # 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:

Link to an anchor on the same page using <a href="…">

<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:

Link to an anchor on any web page using <a href="…">

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

1. The URL can be a different web page on your site, or it can be any web page on any website.

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

3. For AnchorName, use the name that you want to be used as a mark for the jump target of the link.

4. 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 Mark

In order to make the Anchor Link working, the Jump Mark 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.

How to define jump marks

<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.