Blogging and Writing

Fancy Yet Easy: Using HTML Anchors

blogging word cloud

Sometimes, I stumble across things on websites and think huh, that’s pretty fancy. Occasionally, I later discover that it’s something that can be done on good ol’ WordPress. HTML anchors are one of my latest discoveries.

This particular fancy trick is being able to jump ahead to a particular spot on post/page. Wikipedia uses this a lot. It involves creating an HTML anchor, which can be navigated to much in the same way you might navigate between pages.

Heading A

You can create HTML anchors for various block types, including headings, paragraphs, and images. Headings seem like a logical option, so for this post, I’m creating HTML anchors for Heading A (above) and Heading B (below).

When you’ve got a post open in the block editor, you’ll need to look at the block settings over on the right side of the screen. Then scroll down to the “Advanced” section and click on the little arrow to expand it. As shown in the screenshot below, it will display a box where you can enter an HTML anchor, followed by a short blurb and a link to get more info about anchors.

screen shot of block settings: HTML anchor

There are a couple of things to keep in mind when creating your anchors. HTML anchors are case sensitive, so heading-a and Heading-A aren’t the same thing. You can’t have spaces, for the same reason my URL isn’t https://mental health at home.org. If you’ve got 2 words, you can connect them with a dash.

Heading B

Okay, that’s how you create the anchors, but how do you use them?

They can be added on to your post’s URL using a hash (#) symbol, which gives a link that you can insert wherever the heck you’d like. So, for my two example headings, those links would look like:

Fancy Yet Easy: Using HTML Anchors

Fancy Yet Easy: Using HTML Anchors

Those links don’t just work on the post where I’ve created the anchors; I can use them anywhere.

If I were to create a table of contents right here, just because I can, I could do something like this:

As far as I know, you can’t test these until you’ve published a post, because the URL doesn’t really exist yet until it’s published. If you make a mistake, which I do pretty regularly (whether that’s a typo in your anchor/link or mismatch in upper/lowercase), there won’t be any sort of error message when someone clicks on the link; instead, nothing will happen, as long as the actual post link is correct.

As an example of this, in the little table of contents above, I’ve created a link to a heading C anchor that doesn’t exist. Click the link, and nothing will happen.

For more info, see what WordPress has to say about page jumps.

More fancy: Cover blocks

One fancy feature I discovered that I think is cool to be able to do, but isn’t actually useful on my site, is the “cover” block with a fixed background. It’s a cool little trick, but it only works with vertical images. Otherwise, the image will end up very stretched out horizontally, giving a very zoomed in effect.

Cover Title

Well, there you have it, a couple of fancy-ish tricks that may not actually be useful in your life at all, but they’re still there for you if you need them. And I hope my explanation of HTML anchors is somewhat understandable. I wasted rather excessive amounts of time trying to figure them out in the first place.

Have you come across any fancy features of WP that you like to whip out on occasion?

The regular blogger's guide to blogging - graphic of WordPress logo and cogs turning

The Regular Blogger’s Guide to Blogging has tips and tools that are relevant and useful for the average blogger.

21 thoughts on “Fancy Yet Easy: Using HTML Anchors”

  1. These are cool features. Thank you for making it understandable. Sometimes the features are confusing. Your posts help this more manageable- quiet a lot more!

  2. Canva is one of the coolest graphic design tools I found through the WordPress archives. It saves me hours of time on graphic art coding — and their free version offers enough options for non-programmers to feel like pros! (The paid version can also be used at $12.95/month, and you’re able to save any and all projects you make, even if you cancel your subscription. Just download them as you finish.)

    I use a combination of Adobe Photoshop Express tools, then Canva, and usually tweak some of the code.

    You would think that my skills as an amateur programmer would make it easy for me to navigate the block editor; but CSS is a separate language, and HTML prowess doesn’t always translate well. So, I thank you for the tip!

    1. Yeah, the block editor is a beast all its own.

      I love Canva. I use the free version. I’ve contemplated the paid version, but so far, my desire hasn’t outweighed my cheapness.

      1. LOL! I feel you. They do offer a 30-day free trial… and it’s a fantastic option for playing around and seeing if you’d enjoy the paid platform. (I join for a month here and there… just for when I’m really feeling creative. ๐Ÿ˜‰)

  3. Hmm – When I clicked on Heading C it went to a page that said “Oops, that page can’t be found” Doesn’t matter tho because I’m sitting here wondering of what use this would be. Anway since I don’t use WP it’s moot (and confusing! LOL). Have a good week…

  4. Thank you for this. I was wondering about the cover blocks. It seems insta and other places (tumblr?) use these for their ads they inject into their content. It’s interesting because I didn’t know there was a name for it. AND, I use a theme that does this as well (where my header is, if you look on my actual website)…

    I appreciate the explanations.

  5. I like html anchors for long informative posts but the inability to preview easily is annoying.

    I think you _can_ test them by hitting “preview” instead of “publish” though? It’s also nice that you can have an anchor that jumps to another point in another page.

    1. I’m sure there is a way to test them before publishing; I just haven’t figured it out. I think the problem I’ve run into is that the permalink that I’m attaching the anchor to doesn’t actually exist until the post is published.

Leave a Reply