# Getting header IDs to work

**URL:** <https://discourse.gohugo.io/t/getting-header-ids-to-work/16953>\
**Category:** support\
**Created:** [February 11, 2019, 11:36pm UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953 "2019-02-11T23:36:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bobdc](https://avatars.discourse-cdn.com/v4/letter/b/dc4da7/32.png) [@bobdc](https://discourse.gohugo.io/u/bobdc)\
**Post date:** [February 11, 2019, 11:36pm UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/1 "2019-02-11T23:36:53Z")

</div>

When I have this in a document (4 spaces added at the beginning here in case the forum software treats it as rendering instructions)

```
Here is my test header {#id31}
----------------------

```

Hugo creates this HTML:

```
<h2 id="here-is-my-test-header-id31">Here is my test header {#id31}</h2>

```

I was under the impression that I would get this, which I was hoping for

```
<h2 id="id31">Here is my test header</h2>

```

(These are legacy IDs from another application, so I’d rather keep them than have Hugo generate new ones.)

I see from [https://gohugo.io/content-management/formats/](https://gohugo.io/content-management/formats/) that headerIds is enabled by default, so I thought would give me this behavior. I even tried adding headerIds = true to my config.toml, but this had no effect. (I am new to Hugo, so still figuring out some basics.)

What am I doing wrong?

Thanks,

Bob

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [February 12, 2019, 1:27am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/2 "2019-02-12T01:27:24Z")

</div>

~~By default, hugo creates heading ids based on the heading text.~~

~~Now, you could write some find-n-replace code in your templates get what you want. Checkout the `replace` and `replaceRE` functions~~

**Edit:** I stand corrected. I didn’t know it was possible to specify heading ids like that

---

<div class="post-metadata">

**Author:** ![bobdc](https://avatars.discourse-cdn.com/v4/letter/b/dc4da7/32.png) [@bobdc](https://discourse.gohugo.io/u/bobdc)\
**Post date:** [February 12, 2019, 1:38am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/3 "2019-02-12T01:38:01Z")

</div>

Thanks. Are their alternatives to the default? Like when [https://gohugo.io/content-management/formats/](https://gohugo.io/content-management/formats/) says about the headerIds keyword "When enabled, allow specifying header IDs with `{#id}`", what does that mean and how do I use it?

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [February 12, 2019, 1:43am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/4 "2019-02-12T01:43:17Z")

</div>

> [@bobdc](#):
>
> I was under the impression that I would get this, which I was hoping for
> 
> ```auto
> <h2 id="id31">Here is my test header</h2>
> 
> ```

That’s how it should work. And that’s how it has worked on my Hugo sites.

Can you provide info about the Hugo version you are using and your site repo?

---

<div class="post-metadata">

**Author:** ![bobdc](https://avatars.discourse-cdn.com/v4/letter/b/dc4da7/32.png) [@bobdc](https://discourse.gohugo.io/u/bobdc)\
**Post date:** [February 12, 2019, 2:08am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/5 "2019-02-12T02:08:37Z")

</div>

I’m using v0.54.0 on an Ubuntu machine with everything local for now. I’m viewing the pages at [http://localhost:1313/](http://localhost:1313/) and haven’t made any changes to my config.toml besides changing some string values.

I temporarily removed my static/css/add-on.css file to see if it was anything that I did in there (and I didn’t do much) but that had no effect.

I’m using the Hugo Future Imperfect theme.

Thanks,

Bob

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [February 12, 2019, 2:25am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/6 "2019-02-12T02:25:47Z")

</div>

> [@bobdc](#):
>
> I’m using the Hugo Future Imperfect theme.

I’m away from my computer so couldn’t investigate much … can you try switching the themes (try the Ananke theme used in the quick start) and see if you still see that issue?

Here’s [an example](https://hugo-bare-min.netlify.com/post/migrate-from-jekyll/) from my test site which shows that the header ID’s work as expected ([Markdown source](https://raw.githubusercontent.com/kaushalmodi/hugo-bare-min-theme/master/exampleSite/content/post/migrate-from-jekyll.md)). See this part:

```html
<h2 id="set-your-configuration-publish-folder-to-site">Set your configuration publish folder to <code>_site</code></h2>

```

---

<div class="post-metadata">

**Author:** ![bobdc](https://avatars.discourse-cdn.com/v4/letter/b/dc4da7/32.png) [@bobdc](https://discourse.gohugo.io/u/bobdc)\
**Post date:** [February 12, 2019, 2:38am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/7 "2019-02-12T02:38:34Z")

</div>

ananke is the only other theme in my themes directory, but when I change theme to equal “ananke” instead of “hugo future imperfect” in my config.toml, it looks like no theme at all is affecting the rendering. (Do I need to do more to switch the theme? Or maybe the different directory layout that hugo future imperfect wants is throwing ananke off?)

Either way, I am seeing the same effect, where the IDs and curly braces are rendered as displayed content instead of being converted to id attributes for the h2 and related elements.

Thanks,

Bob

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [February 12, 2019, 2:44am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/8 "2019-02-12T02:44:05Z")

</div>

Difficult to guess … if you share your site source, I can have a look at it when I get to a computer tomorrow (or even someone else might, before I get to it).

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [February 12, 2019, 3:03am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/9 "2019-02-12T03:03:17Z")

</div>

@bobdc Writing your heading like this should grab the id correctly

```nohighlight
## Here is my test header {#id31}

```

---

<div class="post-metadata">

**Author:** ![bobdc](https://avatars.discourse-cdn.com/v4/letter/b/dc4da7/32.png) [@bobdc](https://discourse.gohugo.io/u/bobdc)\
**Post date:** [February 12, 2019, 3:18am UTC](https://discourse.gohugo.io/t/getting-header-ids-to-work/16953/10 "2019-02-12T03:18:37Z")

</div>

Bingo, that fixed it! Thanks so much zwbetz, and thanks kaushalmodi as well.

Bob