Links and 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.

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.

Read the [official docs](https://developer.mozilla.org) today.

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 ().

[MDN Docs](https://developer.mozilla.org "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.

Read the [install guide][setup], then the [API docs][api].

[setup]: https://docs.example.com/install
[api]: https://docs.example.com/api "API Reference"

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>.

Status page: <https://status.example.com>
Contact: <help@example.com>

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

// Markdown LINKS — printed as text so you can study the syntax.
// (Paste any of these into Dillinger.io or a README to see them render.)

console.log("=== Inline link ===");
// Pattern:  [visible text](destination-url)
console.log("[Visit Google](https://google.com)");
//  renders as:  Visit Google   (clicking goes to https://google.com)

console.log("=== Inline link WITH a title (hover tooltip) ===");
// Add  "..."  AFTER the url, inside the parentheses.
console.log('[MDN Docs](https://develo
...

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.

// 🎯 YOUR TURN — replace each ___ then press "Try it Yourself".
// These lines PRINT Markdown. Fix them so the printed text is valid Markdown.

// 1) Make an INLINE link: the words "My Portfolio" pointing to https://me.dev
console.log("[My Portfolio]___");        // 👉 replace ___ with (https://me.dev)

// 2) Add a TITLE tooltip "Source code" to a GitHub link:
console.log('[Repo](https://github.com/me/app ___)'); // 👉 replace ___ with "Source code"

// 3) Turn this bare URL into an AUTOLINK (w
...

5. Images

An image is a link with one extra character: a leading !. The shape is ![alt](url). 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: ![alt](url "title").

![A golden retriever puppy](puppy.jpg "So cute")

6. Clickable (Linked) Images

To make an image clickable, put the whole image syntax inside a link's brackets: [![alt](image)](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.

[![Build passing](build-badge.svg)](https://ci.example.com)

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.

See the [contributing guide](./CONTRIBUTING.md).

![Project banner](images/banner.png)

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

// Markdown IMAGES — the ONLY difference from a link is the leading  !  mark.

console.log("=== Basic image ===");
// Pattern:  ![alt text](image-url)
console.log("![A golden retriever puppy](https://placedog.net/300/200)");
//  renders as:  the image, OR the alt text if it fails to load.

console.log("=== Image with a title ===");
console.log('![Company logo](./logo.png "Acme Inc.")');
//  the "..." becomes a tooltip on hover.

console.log("=== Linked (clickable) image ===");
// Put a WHOLE ima
...

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.

// 🎯 YOUR TURN — replace each ___ then press "Try it Yourself".

// 1) EMBED an image of a cat. alt text = "Sleepy cat", url = cat.jpg
console.log("___[Sleepy cat](cat.jpg)");   // 👉 a link becomes an image by adding ___

// 2) Make a CLICKABLE image: wrap an image of logo.png in a link to https://acme.dev
console.log("[![Acme](logo.png)]___");      // 👉 replace ___ with (https://acme.dev)

// 3) RELATIVE path: embed assets/hero.png with alt text "Hero banner"
console.log("![Hero banner]___")
...

// 🎯 MINI-CHALLENGE: a tiny README footer
// Use console.log to PRINT valid Markdown for ALL of the following:
// 1. An inline link: the word "Docs" -> https://docs.acme.dev
// 2. A reference-style link: "Report a bug" using the label [bugs],
//    then define  [bugs]: https://github.com/acme/app/issues
// 3. A clickable badge image: the image
//    https://img.shields.io/badge/build-passing-green  linked to
//    https://github.com/acme/app/actions
//
// ✅ Expected printed output (order doesn'
...