Link#

Classic syntax#

To define a link, use the following syntax:

• [Link_text](Link_URL)

[I'm a relative link to another page (in the same folder) of the website](image/)

[I'm a relative link to another page (parent page) of the website](./)

[I'm an absolute link to another page of the website](/markdown/image/)

[I'm an absolute link to a static resource of the website](/images/favicon.png)

[I'm a link to a title ID](#link)

[I'm a link to the homepage](/)

[I'm a link to the homepage in another language](/fr/)

[I'm an external link](https://www.google.com)

Classic syntax with title#

To define a link with a title, use the following syntax:

• [Link_text](Link_URL "Link_title")

[I'm a link](#classic-syntax-with-title "And I'm its title")

Alternative syntax#

To define an external link it is possible to use alternative syntaxes:

• Write the link URL (rendering will be automatically made by the markdown converter).
• Surround the link URL between the lower-than (<) and greater-than (>) characters.

https://www.google.com

<https://www.google.com>

<foo@bar.com>

Escape a link#

To escape a link (display a URL as a text) and avoid its automatic rendering by the markdown converter, it is possible to use alternative syntaxes:

• Add a backtick (`) before and after the link URL (Define link as a code fragment).
• Escape the first slash (/) of the link URL.

`https://www.google.com`

https:\//www.google.com

Emphasize a link#

To emphasize a link, surround the markdown code of the link with the chosen emphasis code. In case of a code fragment link, place backticks (`) inside the link text (between the brackets).

*[I'm an italic link](/markdown/link/)*

**[I'm a bold link](/markdown/link/)**

***[I'm an italic and bold link](/markdown/link/)***

[`I'm a code fragment link`](/markdown/link/)

Referenced link#

To define a link whose URL is referenced (therefore reusable), it must be formatted in 2 parts.

• First part (link text)

  To define the first part of the link, which corresponds to the text that will be rendered and a reference to be defined in the second part, use the following syntax:

  • [Link_text][Link_URL_reference]
  The link URL reference is not case sensitive and may contain alphanumeric characters, spaces, and punctuation.

• Second part (link reference)

  To define the second part of the link, which is the link between the link URL reference defined in the first part, and the value of the URL, use one of the following syntaxes:

  • [Link_URL_reference]: Link_URL
  • [Link_URL_reference]: Link_URL "Link_title"
  • [Link_URL_reference]: Link_URL 'Link_title'
  • [Link_URL_reference]: Link_URL (Link_title)
  • <[Link_URL_reference]>: Link_URL "Link_title"
  • <[Link_URL_reference]>: Link_URL 'Link_title'
  • <[Link_URL_reference]>: Link_URL (Link_title)
  The second part of the link can be placed anywhere in the document. For example all references of a document can be grouped together at the end of a document for readability and simplicity reasons.

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: #referenced-link

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: #referenced-link "And I'm its title"

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: #referenced-link 'And I\'m its title'

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: #referenced-link (And I'm its title)

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: <#referenced-link> "And I'm its title"

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: <#referenced-link> 'And I\'m its title'

[I'm a link][Reference A]

[I'm a second link][Reference A]

I'm a lonely text

[Reference A]: <#referenced-link> (And I'm its title)

Link with space#

To define a link whose URL contains spaces, encode the URL with the associated percentage code of the space character (%20).

[Hugo themes](https://www.google.com/?query=Hugo%20themes)

Link ID (Theme specific)#

To define a link ID, write a link following the classic syntax with title . The ID is automatically added to the link (using the theme) and its value is the output of Hugo’s anchorize function with the link title as input value:

• [Link_text](Link_URL "Link_title")

[I'm a link](#link-id-theme-specific "And I'm its title")

Ref/Relref#

To define a link using the ref or relref, follow the associated default built-in Hugo shortcodes syntax .

[I'm a ref link]({{%/* ref "image/" */%}})

[I'm a ref link with named parameters]({{%/* ref path="image/" lang="fr" outputFormat="html" */%}})

[I'm a relref link]({{%/* relref "image/" */%}})

[I'm a relref link with named parameters]({{%/* relref path="image/" lang="fr" outputFormat="html" */%}})