Markdown 103: link, image, table และ footnoteMarkdown 103: links, images, tables, and footnotes

By now you can write a readable Markdown page. This lesson adds the parts that make a README useful on GitHub: links, images, tables, and footnotes.

These features are powerful, but the rule stays the same:

Add structure only when it helps the reader decide what to do next.

Links

Use this shape:

[visible text](https://example.com)

Example:

Read the [Next.js documentation](https://nextjs.org/docs).

Good link text tells the reader where the link goes. Avoid "click here" because it gives no context when someone scans the page.

Better:

Read the [deployment guide](https://example.com/deploy).

Weaker:

Click [here](https://example.com/deploy).

Relative links

Inside a repository, link to files by path:

See [the setup guide](docs/setup.md).

For folders:

Open the [examples folder](examples/).

Relative links survive when the repository moves to another GitHub org or domain.

Images

Images use the same shape as links, with ! at the front:

![Screenshot of the dashboard](assets/dashboard.png)

The text inside [] is alt text. Write what the image communicates, not "image" or "screenshot."

Good:

![Dashboard showing three active projects and one blocked task](assets/dashboard.png)

Weak:

![screenshot](assets/dashboard.png)

Tables

Tables are useful when you compare a small set of facts.

| Command | Use |
| --- | --- |
| `pnpm install` | Install dependencies |
| `pnpm run dev` | Start local development |
| `pnpm run build` | Check production build |

Rendered:

Avoid giant tables. If a table has more than about six columns, a list or separate document may be easier to read.

Footnotes

Footnotes are good for context that matters but would interrupt the main flow.¹

This project uses local-only credentials during development.[^env]

[^env]: Never commit `.env` files to a public repository.

Use them sparingly in READMEs. Most important warnings should be visible in the main text, not hidden below the page.

What is GitHub-flavored Markdown?

GitHub-flavored Markdown, often called GFM, is Markdown plus GitHub's practical additions.

The features you will use most:

• tables
• task lists
• automatic link handling
• strikethrough with ~~old text~~
• footnotes

Example:

~~Old setup command~~

- [x] Replace with the new command

README structure with richer parts

Use links, images, and tables inside a simple outline:

# Project Name

Short description.

![Product screenshot](assets/screenshot.png)

## Quick start

| Step | Command |
| --- | --- |
| Install | `pnpm install` |
| Run | `pnpm run dev` |

## Docs

- [Setup](docs/setup.md)
- [Deployment](docs/deploy.md)

Notice the pattern: a README stays calm when the structure is simple and the rich elements serve a job.

Checkpoint

Before the final lesson, make sure you can write:

• one external link
• one relative link
• one image with useful alt text
• one small table
• one task list

Next: Markdown 104 - build a GitHub README.