Markdown Links

You can create a link by enclose the link text in brackets. For example [W3Seekers] and then follow it immediately with the URL in parentheses (https://www.w3seekers.com ).

Example

[W3Seekers](https://www.w3seekers.com)

Try this code ❯

Syntax:

[Text](URL)

URL - URL can be absolute or relative to know more about url path see HTML Link chapter.

Adding Title to Links

You can add a title for a link and it's optional. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in quotation marks after the URL.

Example

[W3Seekers](https://www.W3Seekers.com "W3Seekers")

Try this code ❯

Syntax:

[Text](URL "title")

URL - URL can be absolute or relative to know more about url path see HTML Link chapter.

Create Link Email

You can make email address into a link, just add mailto: before email address, as shown in following example:

Example

[Mail me!](mailto:example@example.com)

Try this code ❯

Syntax:

[Text](mailto:emailId)

Quickly Links

To create quickly links lust add link and enclose it in angle brackets.

Example

<https://www.w3seekers.com>

<example@example.com>

Try this code ❯

Syntax:

<URL>

Formatting Links

You make link italicized by adding add one asterisks before and after the brackets and parentheses.

Bold by adding add two asterisks before and after the brackets and parentheses.

And bold and italicized by adding add three asterisks before and after the brackets and parentheses.

To denote links as code, add backticks in the brackets.

Syntax:

Italicized link

*[text](URL)*

Bold link

**[text](URL)**

Italicized and bold link

***[text](URL)***
 
Code link

[`text`](URL)

Example

### Italicized link

*[W3Seekers](https://www.W3Seekers.com)*

### Bold link

**[W3Seekers](https://www.W3Seekers.com)**

### Italicized and bold link

***[W3Seekers](https://www.W3Seekers.com)***

### Code link

[`W3Seekers`](https://www.W3Seekers.com)

Try this code ❯

Markdown applications don’t agree on how to handle spaces in the middle of a URL. For compatibility, try to URL encode any spaces with %20.

Alternatively, if your Markdown application supports HTML, you could use the a HTML tag.

Example

## Bad Practice:

[flowers](flowers image.jpg)

## Good Practice:

[flowers](flowers%20image.jpg)

Try this code ❯

Targeting Links

You can create target links that open in same page, new tabs, or windows.

Example

### [Chapter 1: Markdown](#chapter1)

### [Chapter 2: HTML](#chapter2)

### [Chapter 3: CSS](#chapter3)

.....

<h1 id="chapter1">Chapter 1: Markdown</h1>

<h1 id="chapter2">Chapter 2: HTML>/h1<

<h1 id="chapter3">Chapter 3: HTML>/h1<

Try this code ❯

If your Markdown processor supports HTML, you can use HTML to create these links.

Example

<a href="#chapter1" >Chapter 1: Markdown</a>

<a href="#chapter2" >Chapter 2: HTML</a>

<a href="#chapter3" >Chapter 3: CSS</a>

.....

<h1 id="chapter1">Chapter 1: Markdown</h1>

<h1 id="chapter2">Chapter 2: HTML>/h1<

<h1 id="chapter3">Chapter 3: HTML>/h1<

Try this code ❯

There are some Markdown processors support custom IDs for headings — some Markdown processors automatically add them.

Adding custom IDs allows you to link directly to headings and modify them with CSS.

To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.

Syntax:

# Heading {#customId}

Example

### [Chapter 1: Markdown](#chapter1)

### [Chapter 2: HTML](#chapter2)

### [Chapter 3: CSS](#chapter3)

.....

# Chapter 1: Markdown {#chapter1}

# Chapter 2: HTML {#chapter2}

# Chapter 3: CSS {#chapter3}

Try this code ❯

Adding Reference Links

The reference links are a special kind of link that make URLs easier to display and read in Markdown.

The reference links are constructed in two parts:

1. The first part you keep inline with your text.
2. The second part you store somewhere else in the file to keep the text easy to read.

First Part of the Link:

The first part of a reference link is formatted with two sets of brackets:

• The first set of brackets surrounds the text that should appear linked.
• The second set of brackets displays a label used to point to the link you’re storing elsewhere in your document.

Although not required, you can include a space between the first and second set of brackets. The label in the second set of brackets is not case sensitive and can include letters, numbers, spaces, or punctuation.

This means the following example is equivalent for the first part of the link:

[meaning] [1]

[meaning] [2]

Second Part of the Link:

The second part of a reference link is formatted with the following attributes:

• The URL for the link, which you can optionally enclose in angle brackets.
• The label, in brackets, followed immediately by a colon and at least one space (e.g., [label]: ).
• The optional title for the link, which you can enclose in double quotes, single quotes, or parentheses.

This means the following example is equivalent for the second part of the link:

[1]: https://www.w3seekers.com/html/html-paragraphs.html

[1]: https://www.w3seekers.com/html/html-paragraphs.html#meaning

[1]: https://www.w3seekers.com/html/html-paragraphs.html#meaning "meaning"

[1]: https://www.w3seekers.com/html/html-paragraphs.html#meaning 'meaning'

[1]: https://www.w3seekers.com/html/html-paragraphs.html#meaning (meaning)

[1]: > https://www.w3seekers.com/html/html-paragraphs.html#meaning> "meaning"

[1]: > https://www.w3seekers.com/html/html-paragraphs.html#meaning> 'meaning'

[1]: > https://www.w3seekers.com/html/html-paragraphs.html#meaning> (meaning)

Where to place it:

It can be placed in second part of the link anywhere in your Markdown document.

It can be placed immediately after the paragraph in which they appear while.

Example

The <p> is a block element, browsers typically insert a blank line, but this rendering should not be assumed, given the rise of style sheets, which can use the display property to override this action [meaning](https://www.w3seekers.com/html/html-paragraphs.html "meaning").

Try this code ❯

It can be placed at the end of the document (like endnotes or footnotes).

Example

The <p> is a block element, browsers typically insert a blank line, but this rendering should not be assumed, given the rise of style sheets, which can use the display property to override this action [meaning][1].

[1]: <https://www.w3seekers.com/html/html-paragraphs.html>

Try this code ❯