808

I have come across a number of mentions of MultiMarkdown's support for internal links / named anchors but I am unable to find a single example of how to actually do it.

So, what is the syntax for denoting the named anchor, and what is the syntax for linking to it the same as linking to any other URLs (only using #foo instead of http://....)?

Jacek Laskowski
  • 72,696
  • 27
  • 242
  • 420
masukomi
  • 10,313
  • 10
  • 40
  • 49
  • If you're doing this to create a table of contents I'd recommend [doctoc](https://github.com/thlorenz/doctoc) to automate this (requires [node.js](http://nodejs.org/)). Doctoc generates the markdown code so it will provide an example of how to link to headings throughout the document too (as described in @user1789493's answer). – James Owers Mar 08 '14 at 21:38
  • 3
    Possible duplicate of [Cross-reference (named anchor) in markdown](http://stackoverflow.com/questions/5319754/cross-reference-named-anchor-in-markdown) – Organic Advocate Dec 08 '15 at 16:21

8 Answers8

832

In standard Markdown, place an anchor <a name="abcd"></a> where you want to link to and refer to it on the same page by [link text](#abcd).

(This uses name= and not id=, for reasons explained in this answer.)

Remote references can use [link text](http://...#abcd) of course.

This works like a dream, provided you have control over the source and target texts. The anchor can even appear in a heading, thus:

### <a name="head1234"></a>A Heading in this SO entry!

produces:

A Heading in this SO entry!

and we can even link to it so:

and we can even [link](#head1234) to it so:

(On SO, the link doesn't work because the anchor is stripped.)

Community
  • 1
  • 1
Steve Powell
  • 25,354
  • 8
  • 41
  • 44
  • 27
    @jj1bdx I do now -- the `` form is best. See [this SO question/answer](http://stackoverflow.com/questions/5319754/cross-reference-named-anchor-in-markdown/7335259#7335259). – Steve Powell May 28 '12 at 16:12
  • Nice addition Steve. I'd mark it as the answer except the question was about MultiMarkdown. Obviously people's votes are indicating that this was a helpful addition though. So, thanks. – masukomi Nov 28 '12 at 21:12
  • 5
    Fyi: Github markdown expects you to use name= instead of id, it seems. – Dieter Oct 02 '13 at 08:17
  • 4
    @Dieter: `name=` was deprecated in XHTML, but now I find that `id=` has a side-effect in HTML5, so I am reverting to `name=` in this answer. – Steve Powell Oct 27 '13 at 12:03
  • Is there any way to get this to work on StackOverflow? – Tomáš Zato Dec 01 '14 at 18:24
  • 3
    Works on github-flavored-markdown (the ruby gem renders it as expected) – Kedar Mhaswade May 17 '15 at 13:43
  • This only works for the first time I click on the link. If I click on the link, it scrolls down and changes the URL. If I manually scroll up and click on the link again, it does not navigate back to the link. Anyone else experience this? – Daryn Aug 04 '15 at 10:58
  • Didn't work for me in Pandoc extended markdown, might work elsewhere. – Zelphir Kaltstahl Dec 05 '15 at 14:41
  • It looks to be supported by BitBucket with name attribute (did not try the id attribute). – рüффп Jul 09 '20 at 08:49
  • That's a shame that this is not possible on SO :( the `id="foo"` part of any HMTL element is always stripped – 4wk_ Jan 10 '23 at 10:48
776

If you have headers in the markdown files, you can directly link them in the file.

Markdown Header:

## The Header

this will generate an implicit id #the-header (replace internal spaces with hyphens and make lowercase).

To navigate to this id, you can create the link like this:

[Link to Header](#the-header)

This is equivalent to:

<a href="#the-header">Link to Header</a>

Please note the reference's name is a lower-case #header.

nik7
  • 806
  • 3
  • 12
  • 20
SaurabhM
  • 7,995
  • 1
  • 15
  • 20
  • 48
    BitBucket seems to prefix the anchor id with "markdown-header-". So if your header is `## This Header ##`, the link would be `[To This Header](#markdown-header-this-header)`. If you aren't sure what the id of your header is, use a page inspector to see the HTML values. – Vinney Kelly Mar 19 '14 at 21:13
  • 2
    Didn't work for me in Pandoc extended markdown, might work elsewhere. – Zelphir Kaltstahl Dec 05 '15 at 14:40
  • 23
    @SaurabhM this will ONLY work IF your markdown to html converter DOES NOT adhere to the standard. The standard doesn't create anchor tags. Now, many don't adhere, but you should NOT _expect_ this to work anywhere. – masukomi Jan 15 '16 at 16:55
  • 13
    Why oh why did we have to *standardize* in something as *standard-less* and half-baked as Markdown. Can't wait for AsciiDoc to take the lead. – hmijail Feb 21 '17 at 11:03
  • What if the header is "# The - Header" – Sanmoy Aug 23 '19 at 08:18
  • What do you do if the header has a / in it? – Daniel Kaplan Mar 23 '20 at 20:09
  • 2
    GitHub adds user-content before the name of the header: `[Link](user-content-the-header)` – Melvin Witte Mar 27 '20 at 08:23
  • GitHub will also make `# 5.4` into `user-content-54` and lose the `.` – OrenIshShalom Apr 06 '20 at 08:48
  • Also works to add a "%20" where the blank space is supposed to be, but I guess a hyphen is much more elegant – perepm Jun 09 '20 at 10:47
  • It does not seems to be supported in Bitbucket. I use the anchor `` instead. – рüффп Jul 09 '20 at 08:48
  • If there are some symbols in the string such as /, #, + and others simply omit them; e.g. `## The Header++` has the same linking of the simple `##The Header` . If you have multiple headers that reduce to the same link, the headers following the first should be numbered. For example if you have first `#The Header` and then `#The Header++` the first link will be `[Link to Header](#the-header)`, while the second `[Link to second Header](#the-header-1)` – Aelius Oct 07 '21 at 10:50
  • I want this answer to be the one marked correct, because it is the most useful and best answer IMHO. – Booger Jan 18 '23 at 14:44
151

Taken from the Multimarkdown Users Guide (thanks to @MultiMarkdown on Twitter for pointing it out)

[Some Text][]will link to a header named “Some Text”
e.g.

### Some Text ###

An optional label of your choosing to help disambiguate cases where multiple headers have the same title:

### Overview [MultiMarkdownOverview] ##

This allows you to use [MultiMarkdownOverview] to refer to this section specifically, and not another section named Overview. This works with atx- or settext-style headers.

If you have already defined an anchor using the same id that is used by a header, then the defined anchor takes precedence.

In addition to headers within the document, you can provide labels for images and tables which can then be used for cross-references as well.

mauris
  • 42,982
  • 15
  • 99
  • 131
masukomi
  • 10,313
  • 10
  • 40
  • 49
  • 1
    FWIW, it doesn't work with emacs' markdown-mode as of 23.4.1. – Attila Lendvai Oct 29 '12 at 07:38
  • 7
    Markdown does not support footnotes. As such it won't work in most "Markdown" modes. MultiMarkdown, however supports a number of extensions that make life easier for writers. – masukomi Oct 29 '12 at 11:46
  • 13
    Github does not seem to support labels in headers? – andig Feb 28 '15 at 09:13
  • 1
    This does not work (at least on codepen.io) when there is ':' in the header. – Devs love ZenUML Apr 10 '15 at 00:33
  • 3
    that link is the documentation by the guy who wrote MultiMarkdown. Not sure what you're doing in codepen.io but i'm confident the docs are accurate. Keep in mind *MULTI*Markdown NOT Markdown. – masukomi Apr 10 '15 at 16:02
140

I tested Github Flavored Markdown for a while and can summarize with four rules:

  1. punctuation marks will be dropped
  2. leading white spaces will be dropped
  3. upper case will be converted to lower
  4. spaces between letters will be converted to -

For example, if your section is named this:

## 1.1 Hello World

Create a link to it this way:

[Link](#11-hello-world)
Kevin Panko
  • 8,356
  • 19
  • 50
  • 61
longkai
  • 3,598
  • 3
  • 22
  • 24
  • What if there are hyphens in the name? What does it convert to? Note, there are spaces between the words and the hyphens. example: ``` - [My - Header](#my---header) # My - Header ``` Would that be correct? – Spencer Pollock Dec 14 '18 at 00:00
  • https://stackoverflow.com/a/17820138/2908724 for terminology on this style. I prefer "kebab-case". – bishop Jan 03 '19 at 14:51
  • 1
    All those conversions mean that it's a bit of a crap shoot to rely on anything the markdown formatter does to titles and headings. Much better, IMHO to use anchors (as the most upvoted answer recommends), that way links don't break because someone makes a grammar/spelling correction to a title and breaks untold thousands of internal (and external) links. – Steven the Easily Amused Aug 25 '21 at 17:51
  • @SteventheEasilyAmused indeed — at the cost of polluting a Markdown file with HTML. Depending on the target/audience, this might be a good trade-off... or not. For a simple `README.md` which might be simply read with a non-Markdown viewer, it's best to leave all HTML off — it's less confusing to follow. – Gwyneth Llewelyn Nov 22 '21 at 16:06
52

The best way to create internal links (related with sections) is create list but instead of link, put #section or #section-title if the header includes spaces.

Markdown

Go to section
* [Hello](#hello)  
* [Hello World](#hello-world)
* [Another section](#new-section) <-- it's called 'Another section' in this list but refers to 'New section'


## Hello
### Hello World
## New section

List preview

Go to section
Hello           <-- [Hello](#hello)                 -- go to `Hello` section
Hello World     <-- [Hello World](#hello world)     -- go to `Hello World` section
Another section <-- [Another section](#new-section) -- go to `New section`

HTML

<p>Go to section</p>
<ul>
    <li><a href="#hello">Hello</a></li>
    <li><a href="#hello-world">Hello World</a></li>
    <li><a href="#new-section">Another section</a> &lt;– it’s called ‘Another section’ in this list but refers to ‘New section’</li>
</ul>
<h2 id="hello">Hello</h2>
<h3 id="hello-world">Hello World</h3>
<h2 id="new-section">New section</h2>

It doesn't matter whether it's h1, h2, h3, etc. header, you always refer to it using just one #.
All references in section list should be converted to lowercase text as it is shown in the example above.

The link to the section should be lowercase. It won't work otherwise. This technique works very well for all Markdown variants, also MultiMarkdown.

Currently I'm using the Pandoc to convert documents format. It's much better than MultiMarkdown.
Test Pandoc here

Willi Mentzel
  • 27,862
  • 20
  • 113
  • 121
rflw
  • 1,747
  • 17
  • 26
  • 8
    as noted in other comments here. that will not work in any markdown -> html converter that actually follows the standard. Creating anchor tags in headings only happens in SOME converters. Furthemore, they're not going to all convert spaces to dashes. THIS CAN NOT not be counted on. – masukomi Jan 24 '16 at 04:12
  • 1
    I'm using GitHub Markdown in [Atom](https://atom.io/) code editor which has a built-in package named "Markdown Preview". From preview mode I create an html files using context menu "Save as HTML...". – rflw Jan 24 '16 at 14:44
  • yes, my point is that you can't count on your technique working anywhere else, and neither the question, nor your answer is specifically about markdown in Atom. The question isn't even about Markdown, it's about MultiMarkdown. – masukomi Jan 24 '16 at 19:00
  • I'm using this link method but it's not working for me. not sliding to the section/that header. – Tom Kustermans Feb 25 '16 at 08:03
  • Give a heads up to case sensitive. If you define a `## Hello` you should refer to it as `[Whatever you want](#Hello)` – Victor Augusto Mar 19 '16 at 12:19
  • It works but you have to use **lowercase for link**. `[Section name](#link-to-section)` – rflw Mar 21 '16 at 08:33
  • The *Markdown* solution worked for me. I used it inside `VSCode` and with `Typora`. – robe007 Apr 21 '21 at 22:32
8

In mdcharm it is like this:

* [Descripción](#descripcion)
* [Funcionamiento](#funcionamiento)
* [Instalación](#instalacion)
* [Configuración](#configuracion)

### Descripción {#descripcion}
### Funcionamiento {#funcionamiento}
### Instalación {#instalacion}
### Configuración {#configuracion}
Gonen09
  • 109
  • 1
  • 3
4

Here is another option (with this, all the links can be placed at the bottom of the file):

Here is an [example label].

  [example label]: #the-anchor-name-or-id "Optional title for mouse hover"
Mahozad
  • 18,032
  • 13
  • 118
  • 133
3

Here is my solution (derived from SaraubhM's answer)

**Jump To**: [Hotkeys & Markers](#hotkeys-markers) / [Radii](#radii) / [Route Wizard 2.0](#route-wizard-2-0)

Which gives you:

Jump To: Hotkeys & Markers / Radii / Route Wizard 2.0

Note the changes from and . to - and also the loss of the & in the links.

Community
  • 1
  • 1
Peet
  • 697
  • 9
  • 9