# Best Practice Adding Link to Heading

**URL:** <https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698>\
**Category:** support\
**Created:** [August 19, 2018, 6:43pm UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698 "2018-08-19T18:43:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [August 19, 2018, 6:43pm UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698/1 "2018-08-19T18:43:27Z")

</div>

Hi all,

I need to add a link to every heading inside the content, for example

```auto
<!-- Before -->
<h2 id="foo">Foo</h2>

<!-- After -->
<h2 id="foo">
 <a title="foo" href="#foo">Foo</a>
</h2>

```

I try using [replaceRE](https://gohugo.io/functions/replacere/) function in my partial template

```auto
{{ .Content | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" "${3}<a title=\"${2}\">${1}</a>${3}" | safeHTML }}

```

almost succeeded as expected, but I found the oddity by the appearance of an empty link element above the headline

here’s the output

```auto
<a title="foo"></a> 
<h2 id="foo">
 <a title="foo" href="#foo">Foo</a>
</h2>

```

kindly tell me the error from the function that I made

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [August 19, 2018, 8:18pm UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698/2 "2018-08-19T20:18:29Z")

</div>

In the event you want to do this on the client:

> <https://github.com/gohugoio/hugoDocs/blob/master/themes/gohugoioTheme/src/js/anchorforid.js>

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/totallyinformation/32/5668_2.png) [@TotallyInformation](https://discourse.gohugo.io/u/TotallyInformation)\
**Post date:** [August 19, 2018, 8:41pm UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698/3 "2018-08-19T20:41:20Z")

</div>

This is what I have in my single.html:

```auto
    {{- with .Content -}}
    <div itemid="articleBody">
      {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}
    </div>
    {{- end -}}

```

That adds an anchor to every heading. It is hidden by default, I use the following CSS to make it visible when you mouse over the heading (I only use heading 1-4):

```css
.hanchor { font-size: 100%; visibility: hidden; color:silver;}
h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}

```

I think someone in this forum put me onto that, I originally used JavaScript but this is much better.

---

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [August 25, 2018, 5:50am UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698/4 "2018-08-25T05:50:01Z")

</div>

@rdwatters javascript is awesome, but this time I would like to use Hugo function. I will save your suggestion if it cannot eventually use the hugo function

@TotallyInformation

> [@TotallyInformation](#):
>
> I think someone in this forum put me onto that,

me too 🙂 but I found no solution if the goal is to change regular heading into heading with link

thank you guys

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/totallyinformation/32/5668_2.png) [@TotallyInformation](https://discourse.gohugo.io/u/TotallyInformation)\
**Post date:** [August 25, 2018, 2:24pm UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698/5 "2018-08-25T14:24:54Z")

</div>

> [@Yudy\_Ananda](#):
>
> me too 🙂 but I found no solution if the goal is to change regular heading into heading with link
> 
> thank you guys

I’m slightly confused. The code I gave is easily adapted to output the heading as a link. I just choose to add a link at the end instead.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [August 25, 2018, 5:53pm UTC](https://discourse.gohugo.io/t/best-practice-adding-link-to-heading/13698/6 "2018-08-25T17:53:08Z")

</div>

I figured as much, but also figured there wasn’t much harm in throwing out the way the Hugo docs is getting it done 🙂

LMK when you get this figured out. Thanks!