---
title: "@quario/html — API reference"
description: "The HTML render target for quario, covering the html() factory, its options, and the fragment it resolves."
url: "https://getquario.com/docs/reference/html"
---

# @quario/html

The HTML render target. It resolves an escaped fragment that you put into your
own page shell.

## `html(options?)`

```ts title="signature"
function html(options?: HtmlOptions): Target<'html', Promise<string>>
```

It returns the target. `report.render(html(), data)` resolves the fragment. It takes
two options: `fonts` and `paths`. Any other key, or one of the wrong type, throws
a `TypeError` naming the path.

## `HtmlOptions`

| Field | Type | Meaning |
| --- | --- | --- |
| `fonts` | `Record<string, string>` | A declared `family` name mapped to a CSS `font-family` value. Names match case-insensitively, and a mapping may cover the generics `sans` / `serif` / `mono` like any other. |
| `paths` | `boolean` | Emit `data-q-path` on each element whose event carries a schema `path`. Off by default. |

A `fonts` value containing `;` or `}` throws from `html()`. So does an array in
place of the record: families named `0`, `1` and `2` are a mapping nobody meant
to write. `paths` takes `true` or `false` and nothing else, so `paths: 'no'`
throws rather than turning stamping on.

## `capabilities`

```ts title="signature"
const capabilities: {
  readonly target: 'html'
  readonly declarations: Readonly<Record<string, Fate>>
}

type Fate = 'resolved' | 'approximated' | 'withdrawn' | 'unread'
```

What this target makes of each declaration the [support
matrix](https://getquario.com/docs/reference/support-matrix.md) names, keyed by the schema name an
author writes. Pass it to `plan(schema, functions, { targets })` to check a
document’s `required` marking before you render. It carries no version of its
own. The package that ships it sets the version.

## The stylesheet

```css title="page.css"
@import '@quario/html/style.css';
```

The reference stylesheet is a separate export. Without it the fragment inherits
whatever the host page sets.

The sheet puts its left default on the row rather than the cells, so a row’s
`align` reaches its cells. A cell’s own `align` still wins.

Each band-role rule selects `.q-<role>:not(.q-slot > *)`, a band’s text item or
split and never an item in a split’s slot. A slot’s item takes its type from
the split. A host rule on `.q-item.q-report-header` loaded after the sheet
still wins.

A document that declares its paper gets one `<style>` in the fragment, an
`@page` rule with that size and each margin. It’s the only `<style>` the
fragment carries.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://getquario.com/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://getquario.com/docs"},{"@type":"ListItem","position":3,"name":"@quario/html","item":"https://getquario.com/docs/reference/html"}]}
```