Need AI Training/Help?CloudYeti.io/meet
MarkdownMe
Markdown editor guide

How to Add Links and Images in Markdown

Add inline links, reference links, and images in Markdown, including titles and clickable image links.

Direct answer

A Markdown link is [visible text](https://url) and an image is the same with a leading exclamation mark: ![alt text](https://url). Use reference-style [text][ref] links to keep long paragraphs clean, and wrap an image in a link to make it clickable. Preview each one to confirm the URL resolves.

Open the Markdown Editor

When to use this

  • You want to add a clickable link or an inline image to Markdown.
  • Your paragraphs are cluttered with long URLs you want to move out of the way.
  • You need an image that links somewhere when clicked.

Steps

  1. Write a basic link as [visible text](https://url).
  2. Add a hover title with [text](https://url "Title text").
  3. Insert an image with ![alt text](https://url); the alt text describes it for accessibility.
  4. Use reference links [text][id] with [id]: https://url defined at the bottom to declutter.
  5. Make an image clickable by wrapping it: [![alt](image-url)](link-url).
  6. Preview to confirm each link opens and each image loads.

Example

Markdown you type
A basic [link to MarkdownMe](https://markdownme.com).

A link with a [tooltip](https://markdownme.com "Free Markdown tools").

An inline image:

![MarkdownMe logo](https://example.com/logo.png)

A clickable image:

[![Open the editor](https://example.com/logo.png)](https://markdownme.com/tools/markdown-editor)

Reference style: see the [docs][1].

[1]: https://markdownme.com/tools
How it renders
A basic link to MarkdownMe.  (underlined, clickable)

A link with a tooltip.  (title shows on hover)

An inline image:
[image: MarkdownMe logo]

A clickable image:
[image that links to /tools/markdown-editor]

Reference style: see the docs.  (resolves to /tools)

Common mistakes

  • Do not leave a space between the ] and the ( in a link, or it renders as literal text.
  • Image alt text is not optional for accessibility; describe the image, do not leave it blank.
  • Reference labels must match exactly, including case, between [text][id] and the [id]: definition.

FAQ

What is the difference between a link and an image in Markdown?
They use the same bracket syntax, but an image starts with an exclamation mark: [text](url) is a link and ![alt](url) is an image.
How do I make an image clickable in Markdown?
Nest the image inside a link: [![alt text](image-url)](destination-url). Clicking the image then opens the destination URL.
When should I use reference-style links?
Use them when long URLs make a paragraph hard to read. You write [text][id] inline and define [id]: https://url once, usually at the bottom of the document.

Related Markdown editor guides

Markdown Syntax Cheat Sheet

A copy-ready Markdown cheat sheet covering headings, bold, italics, lists, links, images, code, tables, and blockquotes.

How to Write a README in Markdown

Structure a clear README.md with a title, badges, install and usage sections, and a live preview before you commit.

Markdown Table Syntax

Write Markdown tables with pipes and dashes, set column alignment, and keep them readable in the editor before you paste.

Markdown for GitHub Comments

Format GitHub issue and pull request comments with task lists, code blocks, mentions, and collapsible sections.

Markdown Editor With Live Preview Online

Edit Markdown on the left and see the rendered result on the right in real time, with no login and browser-only drafts.

Markdown Task List and Checkboxes

Create checkbox task lists in Markdown for READMEs, GitHub issues, and personal to-do notes with live preview.

Markdown Code Blocks and Syntax Highlighting

Add fenced code blocks with a language for syntax highlighting, plus inline code, in Markdown.