title: Hugo: Adding anchor for a link to a different page in markdown
body: <p>I have 2 pages, lets call them <code>www.mywebsite.com/page1.html</code> and <code>www.mywebsite.com/page2.html</code>.
  On <code>page1.md</code> I have a link like:</p>
  
  <pre><code>[My Link](/page2.html)
  </code></pre>
  
  <p>So when the user clicks on this link it goes to the top of <code>www.mywebsite.com/page2.html</code>.</p>
  
  <p>Here is a snippet of my page2.md:</p>
  
  <pre><code>&lt;h2&gt;Topic 1&lt;/h2&gt;
  some text
  .
  .
  &lt;h2&gt;Topic 2&lt;/h2&gt;
  more text
  </code></pre>
  
  <p>Now I want to add an anchor such that when user click on the link on page1, it goes to page2 but top of the page that is shown to be Topic 2.
  How can I do that?</p>
  
  <p><em>NOTE:</em>
  Someone suggested doing this:</p>
  
  <p>If you’re using markdown to author your pages, Hugo markdown engine will automatically add id attributes to your headings. For example, for your content:</p>
  
  <pre><code>&lt;!-- write page in markdown --&gt;
  ## Topic 1
  some text
  ...
  ## Topic 2
  more text
  </code></pre>
  
  <p>Hugo would generate you content as follows:</p>
  
  <pre><code>&lt;!-- generated content --&gt;
  &lt;h2 id="topic-1"&gt;Topic 1&lt;/h2&gt;
  some text
  ...
  &lt;h2 id="topic-2"&gt;Topic 2&lt;/h2&gt;
  more text
  </code></pre>
  
  <p>You could then link to part of your page as follows:</p>
  
  <pre><code>&lt;!-- link to section --&gt;
  ![Topic 2](/page2/#topic-2)
  </code></pre>
  
  <p>Unfortunately this didn't work for me. When I included <code>!</code> in the <code>![Topic 2](/page2/#topic-2)</code> it didn't create a clickable link. And when I removed <code>!</code> and only had <code>[Topic 2](/page2/#topic-2)</code> it created a link but anchor didn't work.</p>
  
  <p><strong>UPDATE</strong>
  If I use:</p>
  
  <pre><code>[Topic 2](/page2.html#topic-2)
  </code></pre>
  
  <p>Then anchor works on Firefox but not Chrome.</p>