alisha-mcfarland-website-development-anchor-links

Anchor Links

If you have a page or post with a significant amount of text and would like to add text links that will take someone to a particular place within the page or post, an HTML anchor link is what can help you out.

But don’t worry, you don’t have to be an HTML expert to add them.

An index at the top of a very long post or page with anchor links to sections or topics is a helpful way to show your visitors what is contained on the page and provides a simple and quick way to navigate through the content.

The two actions required to do this are creating a link pointing to the anchor and then creating the anchor itself.

Create a Link Pointing to the Anchor

►Open the post or page.

►Click on the ‘Text’ tab in edit mode.

►Add <a href=”#nameofanchor”>Link text</a> to the location on the post or page that you would like the link to appear.

►Save your changes.

Create an Anchor

►Add <a id=”nameofanchor”></a> to the location you want the visitor to be taken to when they click on the link.

►If you want the anchor to be associated with a Section Heading, add <a id=”nameofanchor”>Section Heading</a>

►If you want the anchor to be associated with an image, add <a id=”nameofanchor”><img src=”image url”/></a> replacing ‘image url’ with the actual image url in quotation marks.

Here’s an example (click on either of the section titles to see what happens):

Section 1

Section 2


Section 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Section 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

If you liked this, you may like ...