How to Link to Sections Within a Post

Photo of Ashley
Posted by
Coding
, , , ,

If you like to neatly organize your posts into “section”, then listen up!

Hey, Ashley.

So, this is reeeaaaally embarrassing for me because I consider myself pretty computer/coding savvy, and I totally used to know how to do this, but I seem to have forgotten and can’t even Google it. Let me explain:

On a blog post, say about Space and Time, if I wanted to write the first section about space, I’d header it “Space,” and then I’d header the second section “Time” because I want it to be about time.

How do I make these linkable inside the actual blog post? Because I know the URL would be, for instance, www.blog.com/space-and-time, but how do I get the space-and-time#space or space-and-time#time part to work, so that if I wanted to link to that particular section, I could do so?

I know it’s super specific (so feel free to truncate my question), but I can’t find this out anywhere, and it’s been driving me nuts trying to remember/finagle my way to it with no results whatsoever.

Sierra

Hi Sierra! What you’re referring to is the ID attribute. I don’t think there’s any way to do this with the visual editor, so you will have to use HTML.

Let’s say your first header is “Space”. You’d write it out in your post like this:

<h2>Space</h2>

It doesn’t have to be inside an h2 tag, but if it’s a section title it really should be. 😉 Now all we have to do is assign that HTML tag an ID, like this:

<h2 id="space">Space</h2>

That tells us that the header section for “Space” has an ID of “space”. Now to link to that, the URL would be http://www.yourblog.com/post-title#space. So you just have that hash with the ID at the end.

But as I said, you don’t have to use h2 tags. You can assign an ID to anything. Here are a few more examples:

<div id="space">Space</div>

<span id="space">Space</span>

<p id="space">Space</p>

Note about “good practices”

It used to be common practice to assign IDs like this when you want to link within a page:

<a id="space">Space</a>

This is no longer considered good practice. If you don’t actually want that “Space” text to be a link, there’s no reason to use the anchor tag. Stick to headings instead (or anything else).

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

14 comments

  4. Hey Ash, would that also work as a class (instead of id)?
    Space

    I find they are easier (for me) when writing css, but it doesn’t seem this particular issue would even need css. But, when coding, I lean more on css, my hubby moreso on html, so for me to do this, I could use class?

    Thanks. xo
    ~AR

    2. It’s not possible with using a class because classes are used when you want to use it multiple times within one page. So if you were to (try) to use a class with this method, it would assume it appears multiple times and it wouldn’t know which one to jump do.

      But IDs are used for totally unique elements, which is why it works here, because it then knows exactly which one to jump to, since there’s only one!

      So you have to use ID, but as you said, you wouldn’t really need to use CSS in this case. You could add both though if you wanted. Like this:

      <div id=”thisistheid” class=”thisistheclass”>

      1. Got it. Thanks girl. Sometimes I wish I could trade brains for a day with all that puter knowledge u have 😉 I’m still so green even though I’ve been doing my classes for months now. ~AR

  6. Pingback: Bookish Recap: August 4th – 10th | A Bookish Heart

  8. Thank you ! I was just thinking of this the other day and I try to google it and there’s no result ! >_< I'm happy I find your website Imma gonna subscribes now~ really helpful

Recent Posts

    Random Posts