Links Images

By the end of this lesson you'll be able to add clickable links, hover tooltips, reusable reference links, autolinks, and embedded (or clickable) images to any Markdown document — and you'll be able to picture the rendered result before you ever open a previewer.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free Markdown course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

A link is a signpost . The words in [square brackets] are what the signpost says — the part readers see and click. The (parentheses) are the direction it points — the URL nobody reads but everybody follows. An image is the exact same signpost with a single ! stamped in front, which tells Markdown: "don't make a clickable label here — actually show the thing at this address." Remember the order — label first [] , address second () — and you've learned 90% of this lesson.

1. Inline Links

An inline link puts the destination right next to the text. The shape is always [text](url) with no space between the ] and the ( . The text in brackets is what your reader sees and clicks; the URL in parentheses is where they go.

Only the bracketed words become the link — the URL itself is hidden from the reader.

2. Links With a Title (Tooltip)

Add a quoted string after the URL, still inside the parentheses, to give the link a title — the little tooltip that pops up on hover. The shape is [text](url "title") . Mind the space before the quote and that the quotes stay inside the () .

Hover the link above — your browser shows the title "Mozilla Developer Network".

3. Reference-Style Links

When the same URL appears many times — or you just want your prose to stay readable — use a reference-style link . You write a short label where the link appears, then define that label once anywhere in the document. The shape is [text][label] plus a separate [label]: url line. The definition line never shows up in the rendered output.

The two [label]: url lines vanish from the output — they only tell Markdown where each label points. Labels are case-insensitive and can be reused as many times as you like.

4. Autolinks

If you just want a raw URL to become clickable with no separate label, wrap it in angle brackets: https://... . The URL becomes both the link text and the destination. This also works for email addresses, e.g. you@example.com .

Without the angle brackets, many parsers leave a bare URL as plain, unclickable text.

Here's all four link styles in one runnable example. Read every comment, run it, and confirm the printed Markdown matches what you expect.

Your turn. The program below is almost complete — fill in the three ___ blanks using the 👉 hints, then run it and check the printed lines against the expected output in the comments.

5. Images

An image is a link with one extra character: a leading ! . The shape is  . The alt text in the brackets is not a label this time — it's the description screen readers announce and the text that shows if the image fails to load. Always write meaningful alt text. You can add a title tooltip exactly like a link:  .

The framed box stands in for the real picture. If the file at puppy.jpg can't load, that alt text — "A golden retriever puppy" — is exactly what readers (and screen readers) get instead.

6. Clickable (Linked) Images

To make an image clickable, put the whole image syntax inside a link's brackets: [](destination) . The image is the "text" of the link. This is how README badges work — a status badge image that links to your build pipeline.

Notice the nesting order: the ![...] image sits in the spot where a link's text would normally go.

7. Relative Links & Paths

URLs starting with https:// are absolute . But inside a project you usually point to files that live alongside your Markdown — that's a relative path , with no https:// . ./docs/setup.md means "the setup file in the docs folder next to me"; images/banner.png works the same way for images. Relative paths keep working when you move the whole repo, which is why GitHub READMEs use them.

Relative links resolve against the file's own location, so the same Markdown works on your machine, on GitHub, and on a docs site.

Here are all the image patterns in one runnable example — basic, titled, clickable, reference-style, and relative.

Your turn again. Fill in the three ___ blanks below — one of them is just adding the missing ! — then run it and check against the expected output.

Q: What's the real difference between an inline and a reference-style link?

Only where the URL lives. Inline keeps the URL right beside the text; reference style moves it to a separate [label]: url line so your paragraph stays clean. They render identically.

Q: Why won't my image show up — I only see the alt text?

The URL or path is wrong, so the file can't load and the alt text is the fallback. Check for a missing ! , a typo in the path, or a relative path pointing at the wrong folder.

Q: Can I resize or centre an image in Markdown?

Not with plain Markdown. Use HTML, which most renderers accept: , and wrap it in {' …

Q: My link has a space in the URL and breaks — what do I do?

Replace each space with %20 (URL encoding), e.g. (report%20final.pdf) . Better yet, avoid spaces in filenames altogether.

No blanks this time — just a brief and an outline. Write the console.log calls that print valid Markdown for an inline link, a reference-style link, and a clickable badge image. Run it and compare against the expected output in the comments.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary