Typed HTML
Documentation for the typed functions.
A typed layer over raw HTML elements.
The html module provides a typed layer over the raw html.elem function that allows you to conveniently create HTML elements. HTML attributes are exposed as function parameters that accept Typst types and automatically take care of converting those into the appropriate HTML.
Some parameters are common to all typed HTML functions. These are listed at the bottom in the Global Attributes section instead of explicitly on each element for readability.
Example
#html.video(
controls: true,
width: 1280,
height: 720,
src: "sunrise.mp4",
)[
Your browser does not support the video tag.
]Hyperlink.
#html.a(
download: str,
href: str,
hreflang: str,
ping: str | array,
referrerpolicy: none | str,
rel: str | array,
target: str,
type: str,
body
) -> contentParameters
Prop
Type
Abbreviation.
#html.abbr(
body
) -> contentParameters
Prop
Type
Contact information for a page or article element.
#html.address(
body
) -> contentParameters
Prop
Type
Hyperlink or dead area on an image map.
#html.area(
alt: str,
coords: array,
download: str,
href: str,
ping: str | array,
referrerpolicy: none | str,
rel: str | array,
shape: str,
target: str
) -> contentParameters
Prop
Type
Self-contained syndicatable or reusable composition.
#html.article(
body
) -> contentParameters
Prop
Type
Sidebar for tangentially related content.
#html.aside(
body
) -> contentParameters
Prop
Type
Audio player.
#html.audio(
autoplay: bool,
controls: bool,
crossorigin: str,
loop: bool,
muted: bool,
preload: none | auto | str,
src: str,
body
) -> contentParameters
Prop
Type
Keywords.
#html.b(
body
) -> contentParameters
Prop
Type
Base URL and default target navigable for hyperlinks and forms.
#html.base(
href: str,
target: str
) -> contentParameters
Prop
Type
Text directionality isolation.
#html.bdi(
body
) -> contentParameters
Prop
Type
Text directionality formatting.
#html.bdo(
body
) -> contentParameters
Prop
Type
A section quoted from another source.
#html.blockquote(
cite: str,
body
) -> contentParameters
Prop
Type
Document body.
#html.body(
body
) -> contentParameters
Prop
Type
Line break, e.g. in poem or postal address.
Button control.
#html.button(
command: str,
commandfor: str,
disabled: bool,
form: str,
formaction: str,
formenctype: str,
formmethod: str,
formnovalidate: bool,
formtarget: str,
name: str,
popovertarget: str,
popovertargetaction: str,
type: str,
value: str,
body
) -> contentParameters
Prop
Type
Scriptable bitmap canvas.
#html.canvas(
height: int,
width: int,
body
) -> contentParameters
Prop
Type
Table caption.
#html.caption(
body
) -> contentParameters
Prop
Type
Title of a work.
#html.cite(
body
) -> contentParameters
Prop
Type
Computer code.
#html.code(
body
) -> contentParameters
Prop
Type
Table column.
#html.col(
span: int
) -> contentParameters
Prop
Type
Group of columns in a table.
#html.colgroup(
span: int,
body
) -> contentParameters
Prop
Type
Machine-readable equivalent.
#html.data(
value: str,
body
) -> contentParameters
Prop
Type
Container for options for combo box control.
#html.datalist(
body
) -> contentParameters
Prop
Type
Content for corresponding dt element(s).
#html.dd(
body
) -> contentParameters
Prop
Type
A removal from the document.
#html.del(
cite: str,
datetime: datetime,
body
) -> contentParameters
Prop
Type
Disclosure control for hiding details.
#html.details(
name: str,
open: bool,
body
) -> contentParameters
Prop
Type
Defining instance.
#html.dfn(
body
) -> contentParameters
Prop
Type
Dialog box or window.
#html.dialog(
open: bool,
body
) -> contentParameters
Prop
Type
Generic flow container, or container for name-value groups in dl elements.
#html.div(
body
) -> contentParameters
Prop
Type
Association list consisting of zero or more name-value groups.
#html.dl(
body
) -> contentParameters
Prop
Type
Legend for corresponding dd element(s).
#html.dt(
body
) -> contentParameters
Prop
Type
Stress emphasis.
#html.em(
body
) -> contentParameters
Prop
Type
Plugin.
#html.embed(
height: int,
src: str,
type: str,
width: int
) -> contentParameters
Prop
Type
Group of form controls.
#html.fieldset(
disabled: bool,
form: str,
name: str,
body
) -> contentParameters
Prop
Type
Caption for figure.
#html.figcaption(
body
) -> contentParameters
Prop
Type
Figure with optional caption.
#html.figure(
body
) -> contentParameters
Prop
Type
Footer for a page or section.
#html.footer(
body
) -> contentParameters
Prop
Type
User-submittable form.
#html.form(
accept-charset: str,
action: str,
autocomplete: bool,
enctype: str,
method: str,
name: str,
novalidate: bool,
rel: str | array,
target: str,
body
) -> contentParameters
Prop
Type
Heading.
#html.h1(
body
) -> contentParameters
Prop
Type
Heading.
#html.h2(
body
) -> contentParameters
Prop
Type
Heading.
#html.h3(
body
) -> contentParameters
Prop
Type
Heading.
#html.h4(
body
) -> contentParameters
Prop
Type
Heading.
#html.h5(
body
) -> contentParameters
Prop
Type
Heading.
#html.h6(
body
) -> contentParameters
Prop
Type
Container for document metadata.
#html.head(
body
) -> contentParameters
Prop
Type
Introductory or navigational aids for a page or section.
#html.header(
body
) -> contentParameters
Prop
Type
Heading container.
#html.hgroup(
body
) -> contentParameters
Prop
Type
Thematic break.
Root element.
#html.html(
body
) -> contentParameters
Prop
Type
Alternate voice.
#html.i(
body
) -> contentParameters
Prop
Type
Child navigable.
#html.iframe(
allow: str,
allowfullscreen: bool,
height: int,
loading: str,
name: str,
referrerpolicy: none | str,
sandbox: str | array,
src: str,
srcdoc: str,
width: int,
body
) -> contentParameters
Prop
Type
Image.
#html.img(
alt: str,
crossorigin: str,
decoding: auto | str,
fetchpriority: auto | str,
height: int,
ismap: bool,
loading: str,
referrerpolicy: none | str,
sizes: array,
src: str,
srcset: array,
usemap: str,
width: int
) -> contentParameters
Prop
Type
Form control.
#html.input(
accept: str | array,
alpha: bool,
alt: str,
autocomplete: str | array,
checked: bool,
colorspace: str,
dirname: str,
disabled: bool,
form: str,
formaction: str,
formenctype: str,
formmethod: str,
formnovalidate: bool,
formtarget: str,
height: int,
list: str,
max: float | datetime | str,
maxlength: int,
min: float | datetime | str,
minlength: int,
multiple: bool,
name: str,
pattern: str,
placeholder: str,
popovertarget: str,
popovertargetaction: str,
readonly: bool,
required: bool,
size: int,
src: str,
step: float | str,
type: str,
value: float | color | datetime | str | array,
width: int
) -> contentParameters
Prop
Type
An addition to the document.
#html.ins(
cite: str,
datetime: datetime,
body
) -> contentParameters
Prop
Type
User input.
#html.kbd(
body
) -> contentParameters
Prop
Type
Caption for a form control.
#html.label(
for: str,
body
) -> contentParameters
Prop
Type
Caption for fieldset.
#html.legend(
body
) -> contentParameters
Prop
Type
List item.
#html.li(
value: int,
body
) -> contentParameters
Prop
Type
Link metadata.
#html.link(
as: str,
blocking: str | array,
color: color,
crossorigin: str,
disabled: bool,
fetchpriority: auto | str,
href: str,
hreflang: str,
imagesizes: array,
imagesrcset: array,
integrity: str,
media: str,
referrerpolicy: none | str,
rel: str | array,
sizes: array,
type: str
) -> contentParameters
Prop
Type
Container for the dominant contents of the document.
#html.main(
body
) -> contentParameters
Prop
Type
Image map.
#html.map(
name: str,
body
) -> contentParameters
Prop
Type
Highlight.
#html.mark(
body
) -> contentParameters
Prop
Type
Menu of commands.
#html.menu(
body
) -> contentParameters
Prop
Type
Text metadata.
#html.meta(
charset: str,
content: str,
http-equiv: str,
media: str,
name: str
) -> contentParameters
Prop
Type
Gauge.
#html.meter(
high: float,
low: float,
max: float,
min: float,
optimum: float,
value: float,
body
) -> contentParameters
Prop
Type
Section with navigational links.
#html.nav(
body
) -> contentParameters
Prop
Type
Fallback content for script.
#html.noscript(
body
) -> contentParameters
Prop
Type
Image, child navigable, or plugin.
#html.object(
data: str,
form: str,
height: int,
name: str,
type: str,
width: int,
body
) -> contentParameters
Prop
Type
Ordered list.
#html.ol(
reversed: bool,
start: int,
type: str,
body
) -> contentParameters
Prop
Type
Group of options in a list box.
#html.optgroup(
disabled: bool,
label: str,
body
) -> contentParameters
Prop
Type
Option in a list box or combo box control.
#html.option(
disabled: bool,
label: str,
selected: bool,
value: str,
body
) -> contentParameters
Prop
Type
Calculated output value.
#html.output(
for: str | array,
form: str,
name: str,
body
) -> contentParameters
Prop
Type
Paragraph.
#html.p(
body
) -> contentParameters
Prop
Type
Image.
#html.picture(
body
) -> contentParameters
Prop
Type
Block of preformatted text.
#html.pre(
body
) -> contentParameters
Prop
Type
Progress bar.
#html.progress(
max: float,
value: float,
body
) -> contentParameters
Prop
Type
Quotation.
#html.q(
cite: str,
body
) -> contentParameters
Prop
Type
Parenthesis for ruby annotation text.
#html.rp(
body
) -> contentParameters
Prop
Type
Ruby annotation text.
#html.rt(
body
) -> contentParameters
Prop
Type
Ruby annotation(s).
#html.ruby(
body
) -> contentParameters
Prop
Type
Inaccurate text.
#html.s(
body
) -> contentParameters
Prop
Type
Computer output.
#html.samp(
body
) -> contentParameters
Prop
Type
Embedded script.
#html.script(
async: bool,
blocking: str | array,
crossorigin: str,
defer: bool,
fetchpriority: auto | str,
integrity: str,
nomodule: bool,
referrerpolicy: none | str,
src: str,
type: str,
body
) -> contentParameters
Prop
Type
Container for search controls.
#html.search(
body
) -> contentParameters
Prop
Type
Generic document or application section.
#html.section(
body
) -> contentParameters
Prop
Type
List box control.
#html.select(
autocomplete: str | array,
disabled: bool,
form: str,
multiple: bool,
name: str,
required: bool,
size: int,
body
) -> contentParameters
Prop
Type
Shadow tree slot.
#html.slot(
name: str,
body
) -> contentParameters
Prop
Type
Side comment.
#html.small(
body
) -> contentParameters
Prop
Type
Image source for img or media source for video or audio.
#html.source(
height: int,
media: str,
sizes: array,
src: str,
srcset: array,
type: str,
width: int
) -> contentParameters
Prop
Type
Generic phrasing container.
#html.span(
body
) -> contentParameters
Prop
Type
Importance.
#html.strong(
body
) -> contentParameters
Prop
Type
Embedded styling information.
#html.style(
blocking: str | array,
media: str,
body
) -> contentParameters
Prop
Type
Subscript.
#html.sub(
body
) -> contentParameters
Prop
Type
Caption for details.
#html.summary(
body
) -> contentParameters
Prop
Type
Superscript.
#html.sup(
body
) -> contentParameters
Prop
Type
Table.
#html.table(
body
) -> contentParameters
Prop
Type
Group of rows in a table.
#html.tbody(
body
) -> contentParameters
Prop
Type
Table cell.
#html.td(
colspan: int,
headers: str | array,
rowspan: int,
body
) -> contentParameters
Prop
Type
Template.
#html.template(
shadowrootclonable: bool,
shadowrootcustomelementregistry: bool,
shadowrootdelegatesfocus: bool,
shadowrootmode: str,
shadowrootserializable: bool,
body
) -> contentParameters
Prop
Type
Multiline text controls.
#html.textarea(
autocomplete: str | array,
cols: int,
dirname: str,
disabled: bool,
form: str,
maxlength: int,
minlength: int,
name: str,
placeholder: str,
readonly: bool,
required: bool,
rows: int,
wrap: str,
body
) -> contentParameters
Prop
Type
Group of footer rows in a table.
#html.tfoot(
body
) -> contentParameters
Prop
Type
Table header cell.
#html.th(
abbr: str,
colspan: int,
headers: str | array,
rowspan: int,
scope: str,
body
) -> contentParameters
Prop
Type
Group of heading rows in a table.
#html.thead(
body
) -> contentParameters
Prop
Type
Machine-readable equivalent of date- or time-related data.
#html.time(
datetime: datetime | duration,
body
) -> contentParameters
Prop
Type
Document title.
#html.title(
body
) -> contentParameters
Prop
Type
Table row.
#html.tr(
body
) -> contentParameters
Prop
Type
Timed text track.
#html.track(
default: bool,
kind: str,
label: str,
src: str,
srclang: str
) -> contentParameters
Prop
Type
Unarticulated annotation.
#html.u(
body
) -> contentParameters
Prop
Type
List.
#html.ul(
body
) -> contentParameters
Prop
Type
Variable.
#html.var(
body
) -> contentParameters
Prop
Type
Video player.
#html.video(
autoplay: bool,
controls: bool,
crossorigin: str,
height: int,
loop: bool,
muted: bool,
playsinline: bool,
poster: str,
preload: none | auto | str,
src: str,
width: int,
body
) -> contentParameters
Prop
Type
Line breaking opportunity.