How to Create Anchor Links example

  *Show All Contents, Tips and Tricks

<h2 id=”your-anchor-link-id”>Example Heading</h2>

 

What Are Anchor Links?

An anchor link is a link (or hyperlink).  The anchor element (represented as the a tag) is common for all links (term “jump link”) is a link that jumps to a specific element on a page. So the main difference between anchor links (or jump links) and regular links is the destination.

Traditional hyperlinks send users to a page while anchor links send users to a specific section of a page. Anchor links can link to a section on the same page or to a section of a different page.

There are two major components that make an anchor link work.

    • An element with a specific anchor ID (the anchor). This is the element you wish to jump to on the page.

With this, we can create an anchor link that jumps to this heading element. The key to an anchor link is the unique href attribute value.

Instead of a normal URL, you must include a pound sign “#” before the corresponding anchor ID.

Scroll Down

 

 

 

 

 

 

 

 

 

 

Examples of Anchor Links

 

Click Here to Jump to Heading
<a href=”#your-anchor-link-id”>Click Here to Jump to Heading</a>

 

Click here to jump to “A Link to the element”
<a href=”#link-anchor-link-id”>Click here to jump to “A Link to the element”</a>

 

Also, if you wanted to add an anchor link to a specific section of an external page, you would need to include the URL of the page before the anchor ID as follows:

Anchor Link
<a href=”https://website.com/page/#your-anchor-link-id”>Anchor Link</a>