# Links

> Internal, external and anchor links, page URLs and the base path.

Each page is served at its own folder URL: `guides/build.html` at `/guides/build/`, and `index.html` at its folder, `guides/index.html` at `/guides/`. Every folder and file name is slugified, as in Livemark: `User Guide/Getting Started.html` is served at `/user-guide/getting-started/`. Link to a page by its URL or by its file: a link naming a page's file, relative or root-relative, is rewritten to the page's URL, and any other relative URL resolves from the source file.

## Internal Links

Link to other pages in your documentation, root-relative or relative to the page:

**HTML**

```html
<a href="/introduction/">Introduction</a>
<a href="headings.html">Headings</a>
```

**Markdown**

```md
[Introduction](/introduction/)
[Headings](headings.html)
```

Renders as: [Introduction](/introduction/)

With `base` set in `htmlpress.yaml`, every root-relative URL in the build (in `href`, `src`, `srcset`, `poster` and `action`, in pages, the layout and the config's HTML alike) gets it as a prefix: write `/guide/` and the site links to `/repo/guide/`. Relative and absolute URLs are left alone, and so are `url()`s in a page's own CSS. `start` and `preview` serve the site under the base too, and send `/` there.

The navigation groups the pages of a folder under its `index.html`, named by that page's title. A group's name links to that index page, and the chevron beside it folds the group. A folder without an `index.html` makes no group: its pages sit at the top, beside the root's.

## External Links

Link to external resources:

**HTML**

```html
<a href="https://github.com">GitHub</a>
```

**Markdown**

```md
[GitHub](https://github.com)
```

Renders as: [GitHub](https://github.com)

## Anchor Links

Link to a specific heading on the current page by its id:

**HTML**

```html
<a href="#internal-links">See Internal Links</a>
```

**Markdown**

```md
[See Internal Links](#internal-links)
```

Renders as: [See Internal Links](#internal-links)

A heading on another page is its URL plus the id: [Custom Heading IDs](/authoring/headings/#custom-ids). See [Headings](/authoring/headings/) for how ids are made.

## Auto Links

A bare URL in prose becomes a link at build time, as in GitHub-flavored Markdown: `http://` and `https://` URLs, `www.` addresses and emails. Trailing punctuation stays outside the link.

**HTML**

```html
<p>See https://htmlpress.dev, or mail team@example.com.</p>
```

**Markdown**

```md
See https://htmlpress.dev, or mail team@example.com.
```

Renders as: See <https://htmlpress.dev>, or mail <team@example.com>.

Text in links, code, code blocks and terminals stays as written, and so does any element with `data-literal`, for prose that must show a raw URL:

**HTML**

```html
<p data-literal>Type https://htmlpress.dev in the address bar.</p>
```

**Markdown**

```html
<p data-literal>Type https://htmlpress.dev in the address bar.</p>
```