How to Use HTML Bookmarks: Add HTML Anchor Links to a Web Page


html anchor code

If you have created a long page of content on your blog, then you might want to offer your readers a chance to ‘jump to a particular section in a post‘ straight away.

For example, in the 1st half of your article, you might be describing products in your niche. In the 2nd half of the article you might have included a comparative table that ranks these products. You can easily give your reader the choice of skipping the content and going straight to the product table by using an HTML bookmark (anchor link).

This functionality is easily added with HTML bookmark code.

HTML Anchor Tag Jump

There are only 2 lines of code that you need to add to your page:

The jump-from link looks like the following code and uses the hash tag (#) to denote an HTML bookmark:

<a href=”#NameOfBookmark”>Text that invites reader to click to jump to another section</a>

The HTML jump to anchor code looks like this and uses the id atribute:

<div id=”NameOfBookmark”></div>

This provides an HTML jump-to section functionality to your page.

Let’s look at the steps in detail:

Creating a WordPress HTML Bookmark without a Plugin

Here are some brief steps that you can use to set up your bookmark.
These steps show you how to provide the html link within page content.

wordpress editor

  1. Login to your WordPress site.
  2. Open the post that needs a bookmark or start your new post that will need a bookmark. You will now be in the editing screen.
  3. When you are in the editor, you will see 2 tabs at the top right of your editing screen:
    Visual and Text
    Click on the Text tab so that you can see the HTML code.
  4. Find the spot when you want your reader to be able to ‘jump to’.
    This will be your HTML bookmark anchor.

    The id attribute is used to create the HTML anchor name.
    For example, it might be the start of your product table. On the line, just before this target, enter the following code and give the bookmark a unique name like so:

    <a id= “ProductTable”></a>

    In this example, I have used the name ProductTable which is fine so long as that name is not used for another purpose on the page.
    The bookmark name needs to be unique.
    It is also case sensitive

  5. Now find where in the article you want the reader to be given the choice to jump from in order to get to the bookmarked text.
    Enter the following hyperlink around your phrase:

    <a href = “#ProductTable”Click here to skip to the Product Comparison Table </a>

    Notice the use of a hash (#) prior to the name of the bookmark. This denotes the use of a bookmark.

  6. Test the results prior to publishing or updating the post.

Simple isn’t it. I prefer to use code wherever possible for this type of simple functionality. But if you have a disdain for going near the HTML code, then you can use a plugin for the purpose.

Using a WordPress Plugin to Link to Other Page Sections

You can use a WordPress plugin to provide some similar functionality if you prefer.

Here are a couple of the more popular plugins that you can use for the purpose:

  1.  Floating Links – Fancy Top Bottom & Next Previous Post Links
    This plugin allows you to HTML link to same page sections such as:

    • Jump to the bottom of a page
    • Jump to the top of a page
    • Skip to the next post
    • Skip to a previous post
    • etc.
  2. Scroll to Anchor
    This plugin allows your reader to smoothly scroll to another section in your post. 
    The setting up your bookmarks or anchors is made all the easier by an anchor icon installed in your visual editor toolbar.

How Often to Use Content Anchors

I probably prefer to use content anchors selectively.

If they are overdone, they probably lose some of their usefulness. And I certainly don’t use them in every post.

However, if you have content that you definitely want your readers to notice before clicking away from a particular post, then anchors (HTML bookmarks) can be just the ticket for longer content. 

 

Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge