---
area: "Learn"
parent: "Getting started chapter"
url: "https://unpoly.com/learn/start/links"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [Getting started chapter](https://unpoly.com/learn/start/overview.md)</nav>

# Link to a fragment

Your first move with Unpoly is a link that updates a fragment, instead of loading a full new page.

## Following a link {#following-a-link}

Take any link in your app and add an [`[up-follow]`](https://unpoly.com/api/up-follow.md) attribute:

```html
<a href="/preferences" up-follow>Preferences</a>
```

Click it. Unpoly fetches `/preferences` without leaving the page, and your server responds with a full HTML page, the same way it would for a regular page load. Unpoly extracts the response's [main fragment](https://unpoly.com/api/main.md) and **swaps it into the current page**. The URL and history are updated, and the Back button keeps working.

Your backend saw a normal request and rendered a normal page. Nothing on the server needs to change.

## Targeting a fragment {#targeting-a-fragment}

To update a smaller fragment, name it with an `[up-target]` attribute:

```html
<nav>
  <a href="/pages/a" up-target="article">A</a>
  <a href="/pages/b" up-target="article">B</a>
</nav>

<article>
  Page A
</article>
```

Clicking _B_ fetches `/pages/b` and replaces **only the `<article>` element** with its counterpart from the response. Everything around it keeps its state.

An `[up-target]` attribute implies [`[up-follow]`](https://unpoly.com/api/up-follow.md), so you don't need to set both.

<nav aria-label="Reading order">

- [Previous: Installation](https://unpoly.com/learn/install.md)
- [Next: Submit a form](https://unpoly.com/learn/start/forms.md)

</nav>