Typed HTML
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.
]
Functions
a
Hyperlink.
download
Whether to download the resource instead of navigating to it, and its filename if so.
href
Address of the hyperlink.
hreflang
Language of the linked resource.
ping
URLs to ping.
referrerpolicy
Referrer policy for fetches initiated by the element.
Variant | Details |
---|---|
"no-referrer" | |
"no-referrer-when-downgrade" | |
"same-origin" | |
"origin" | |
"strict-origin" | |
"origin-when-cross-origin" | |
"strict-origin-when-cross-origin" | |
"unsafe-url" |
rel
Relationship between the location in the document containing the hyperlink and the destination resource.
View options
Variant | Details |
---|---|
"alternate" | |
"canonical" | |
"author" | |
"bookmark" | |
"dns-prefetch" | |
"expect" | |
"external" | |
"help" | |
"icon" | |
"manifest" | |
"modulepreload" | |
"license" | |
"next" | |
"nofollow" | |
"noopener" | |
"noreferrer" | |
"opener" | |
"pingback" | |
"preconnect" | |
"prefetch" | |
"preload" | |
"prev" | |
"privacy-policy" | |
"search" | |
"stylesheet" | |
"tag" | |
"terms-of-service" |
target
Navigable for hyperlink navigation.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
type
Hint for the type of the referenced resource.
body
The contents of the HTML element.
abbr
Abbreviation.
body
The contents of the HTML element.
address
Contact information for a page or article element.
body
The contents of the HTML element.
area
Hyperlink or dead area on an image map.
alt
Replacement text for use when images are not available.
coords
Coordinates for the shape to be created in an image map. Expects an array of floating point numbers.
download
Whether to download the resource instead of navigating to it, and its filename if so.
href
Address of the hyperlink.
ping
URLs to ping.
referrerpolicy
Referrer policy for fetches initiated by the element.
Variant | Details |
---|---|
"no-referrer" | |
"no-referrer-when-downgrade" | |
"same-origin" | |
"origin" | |
"strict-origin" | |
"origin-when-cross-origin" | |
"strict-origin-when-cross-origin" | |
"unsafe-url" |
rel
Relationship between the location in the document containing the hyperlink and the destination resource.
View options
Variant | Details |
---|---|
"alternate" | |
"canonical" | |
"author" | |
"bookmark" | |
"dns-prefetch" | |
"expect" | |
"external" | |
"help" | |
"icon" | |
"manifest" | |
"modulepreload" | |
"license" | |
"next" | |
"nofollow" | |
"noopener" | |
"noreferrer" | |
"opener" | |
"pingback" | |
"preconnect" | |
"prefetch" | |
"preload" | |
"prev" | |
"privacy-policy" | |
"search" | |
"stylesheet" | |
"tag" | |
"terms-of-service" |
shape
The kind of shape to be created in an image map.
Variant | Details |
---|---|
"circle" | |
"default" | |
"poly" | |
"rect" |
target
Navigable for hyperlink navigation.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
article
Self-contained syndicatable or reusable composition.
body
The contents of the HTML element.
aside
Sidebar for tangentially related content.
body
The contents of the HTML element.
audio
Audio player.
autoplay
Hint that the media resource can be started automatically when the page is loaded.
controls
Show user agent controls.
crossorigin
How the element handles crossorigin requests.
Variant | Details |
---|---|
"anonymous" | |
"use-credentials" |
loop
Whether to loop the media resource.
muted
Whether to mute the media resource by default.
preload
Hints how much buffering the media resource will likely need.
Variant | Details |
---|---|
"metadata" |
src
Address of the resource.
body
The contents of the HTML element.
b
Keywords.
body
The contents of the HTML element.
base
Base URL and default target navigable for hyperlinks and forms.
href
Document base URL.
target
Default navigable for hyperlink navigation and form submission.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
bdi
Text directionality isolation.
body
The contents of the HTML element.
bdo
Text directionality formatting.
body
The contents of the HTML element.
blockquote
A section quoted from another source.
cite
Link to the source of the quotation or more information about the edit.
body
The contents of the HTML element.
body
Document body.
body
The contents of the HTML element.
br
Line break, e.g. in poem or postal address.
button
Button control.
command
Indicates to the targeted element which action to take.
Variant | Details |
---|---|
"toggle-popover" | |
"show-popover" | |
"hide-popover" | |
"close" | |
"request-close" | |
"show-modal" |
commandfor
Targets another element to be invoked.
disabled
Whether the form control is disabled.
form
Associates the element with a form element.
formaction
URL to use for form submission.
formenctype
Entry list encoding type to use for form submission.
Variant | Details |
---|---|
"application/x-www-form-urlencoded" | |
"multipart/form-data" | |
"text/plain" |
formmethod
Variant to use for form submission.
Variant | Details |
---|---|
"GET" | |
"POST" | |
"dialog" |
formnovalidate
Bypass form control validation for form submission.
formtarget
Navigable for form submission.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
name
Name of the element to use for form submission and in the form.elements API.
popovertarget
Targets a popover element to toggle, show, or hide.
popovertargetaction
Indicates whether a targeted popover element is to be toggled, shown, or hidden.
Variant | Details |
---|---|
"toggle" | |
"show" | |
"hide" |
type
Type of button.
Variant | Details |
---|---|
"submit" | |
"reset" | |
"button" |
value
Value to be used for form submission.
body
The contents of the HTML element.
canvas
Scriptable bitmap canvas.
height
Vertical dimension.
width
Horizontal dimension.
body
The contents of the HTML element.
caption
Table caption.
body
The contents of the HTML element.
cite
Title of a work.
body
The contents of the HTML element.
code
Computer code.
body
The contents of the HTML element.
col
Table column.
span
Number of columns spanned by the element.
colgroup
Group of columns in a table.
span
Number of columns spanned by the element.
body
The contents of the HTML element.
data
Machine-readable equivalent.
value
Machine-readable value.
body
The contents of the HTML element.
datalist
Container for options for combo box control.
body
The contents of the HTML element.
dd
Content for corresponding dt element(s).
body
The contents of the HTML element.
del
A removal from the document.
cite
Link to the source of the quotation or more information about the edit.
datetime
Date and (optionally) time of the change.
body
The contents of the HTML element.
details
Disclosure control for hiding details.
name
Name of group of mutually-exclusive details elements.
open
Whether the details are visible.
body
The contents of the HTML element.
dfn
Defining instance.
body
The contents of the HTML element.
dialog
Dialog box or window.
open
Whether the dialog box is showing.
body
The contents of the HTML element.
div
Generic flow container, or container for name-value groups in dl elements.
body
The contents of the HTML element.
dl
Association list consisting of zero or more name-value groups.
body
The contents of the HTML element.
dt
Legend for corresponding dd element(s).
body
The contents of the HTML element.
em
Stress emphasis.
body
The contents of the HTML element.
embed
Plugin.
height
Vertical dimension.
src
Address of the resource.
type
Type of embedded resource.
width
Horizontal dimension.
fieldset
Group of form controls.
disabled
Whether the descendant form controls, except any inside legend, are disabled.
form
Associates the element with a form element.
name
Name of the element to use for form submission and in the form.elements API.
body
The contents of the HTML element.
figcaption
Caption for figure.
body
The contents of the HTML element.
figure
Figure with optional caption.
body
The contents of the HTML element.
footer
Footer for a page or section.
body
The contents of the HTML element.
form
User-submittable form.
accept-charset
Character encodings to use for form submission.
Variant | Details |
---|---|
"utf-8" |
action
URL to use for form submission.
autocomplete
Default setting for autofill feature for controls in the form.
enctype
Entry list encoding type to use for form submission.
Variant | Details |
---|---|
"application/x-www-form-urlencoded" | |
"multipart/form-data" | |
"text/plain" |
method
Variant to use for form submission.
Variant | Details |
---|---|
"GET" | |
"POST" | |
"dialog" |
name
Name of form to use in the document.forms API.
novalidate
Bypass form control validation for form submission.
rel
Relationship between the document containing the form and its action destination
View options
Variant | Details |
---|---|
"alternate" | |
"canonical" | |
"author" | |
"bookmark" | |
"dns-prefetch" | |
"expect" | |
"external" | |
"help" | |
"icon" | |
"manifest" | |
"modulepreload" | |
"license" | |
"next" | |
"nofollow" | |
"noopener" | |
"noreferrer" | |
"opener" | |
"pingback" | |
"preconnect" | |
"prefetch" | |
"preload" | |
"prev" | |
"privacy-policy" | |
"search" | |
"stylesheet" | |
"tag" | |
"terms-of-service" |
target
Navigable for form submission.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
body
The contents of the HTML element.
h1
Heading.
body
The contents of the HTML element.
h2
Heading.
body
The contents of the HTML element.
h3
Heading.
body
The contents of the HTML element.
h4
Heading.
body
The contents of the HTML element.
h5
Heading.
body
The contents of the HTML element.
h6
Heading.
body
The contents of the HTML element.
head
Container for document metadata.
body
The contents of the HTML element.
header
Introductory or navigational aids for a page or section.
body
The contents of the HTML element.
hgroup
Heading container.
body
The contents of the HTML element.
hr
Thematic break.
html
Root element.
body
The contents of the HTML element.
i
Alternate voice.
body
The contents of the HTML element.
iframe
Child navigable.
allow
Permissions policy to be applied to the iframe's contents.
allowfullscreen
Whether to allow the iframe's contents to use requestFullscreen().
height
Vertical dimension.
loading
Used when determining loading deferral.
Variant | Details |
---|---|
"lazy" | |
"eager" |
name
Name of content navigable.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
referrerpolicy
Referrer policy for fetches initiated by the element.
Variant | Details |
---|---|
"no-referrer" | |
"no-referrer-when-downgrade" | |
"same-origin" | |
"origin" | |
"strict-origin" | |
"origin-when-cross-origin" | |
"strict-origin-when-cross-origin" | |
"unsafe-url" |
sandbox
Security rules for nested content.
View options
Variant | Details |
---|---|
"allow-downloads" | |
"allow-forms" | |
"allow-modals" | |
"allow-orientation-lock" | |
"allow-pointer-lock" | |
"allow-popups" | |
"allow-popups-to-escape-sandbox" | |
"allow-presentation" | |
"allow-same-origin" | |
"allow-scripts" | |
"allow-top-navigation" | |
"allow-top-navigation-by-user-activation" | |
"allow-top-navigation-to-custom-protocols" |
src
Address of the resource.
srcdoc
A document to render in the iframe.
width
Horizontal dimension.
body
The contents of the HTML element.
img
Image.
alt
Replacement text for use when images are not available.
crossorigin
How the element handles crossorigin requests.
Variant | Details |
---|---|
"anonymous" | |
"use-credentials" |
decoding
Decoding hint to use when processing this image for presentation.
Variant | Details |
---|---|
"sync" | |
"async" |
fetchpriority
Sets the priority for fetches initiated by the element.
Variant | Details |
---|---|
"high" | |
"low" |
height
Vertical dimension.
ismap
Whether the image is a server-side image map.
loading
Used when determining loading deferral.
Variant | Details |
---|---|
"lazy" | |
"eager" |
referrerpolicy
Referrer policy for fetches initiated by the element.
Variant | Details |
---|---|
"no-referrer" | |
"no-referrer-when-downgrade" | |
"same-origin" | |
"origin" | |
"strict-origin" | |
"origin-when-cross-origin" | |
"strict-origin-when-cross-origin" | |
"unsafe-url" |
sizes
Image sizes for different page layouts. Expects an array of dictionaries with the keys condition
(string) and size
(length).
src
Address of the resource.
srcset
Images to use in different situations, e.g., high-resolution displays, small monitors, etc. Expects an array of dictionaries with the keys src
(string) and width
(integer) or density
(float).
usemap
Name of image map to use.
width
Horizontal dimension.
input
Form control.
accept
Hint for expected file type in file upload controls.
alpha
Allow the color's alpha component to be set.
alt
Replacement text for use when images are not available.
autocomplete
Hint for form autofill feature.
View options
Variant | Details |
---|---|
"shipping" | |
"billing" | |
"name" | |
"honorific-prefix" | |
"given-name" | |
"additional-name" | |
"family-name" | |
"honorific-suffix" | |
"nickname" | |
"username" | |
"new-password" | |
"current-password" | |
"one-time-code" | |
"organization-title" | |
"organization" | |
"street-address" | |
"address-line1" | |
"address-line2" | |
"address-line3" | |
"address-level4" | |
"address-level3" | |
"address-level2" | |
"address-level1" | |
"country" | |
"country-name" | |
"postal-code" | |
"cc-name" | |
"cc-given-name" | |
"cc-additional-name" | |
"cc-family-name" | |
"cc-number" | |
"cc-exp" | |
"cc-exp-month" | |
"cc-exp-year" | |
"cc-csc" | |
"cc-type" | |
"transaction-currency" | |
"transaction-amount" | |
"language" | |
"bday" | |
"bday-day" | |
"bday-month" | |
"bday-year" | |
"sex" | |
"url" | |
"photo" | |
"home" | |
"work" | |
"mobile" | |
"fax" | |
"pager" | |
"tel" | |
"tel-country-code" | |
"tel-national" | |
"tel-area-code" | |
"tel-local" | |
"tel-local-prefix" | |
"tel-local-suffix" | |
"tel-extension" | |
"email" | |
"impp" |
checked
Whether the control is checked.
colorspace
The color space of the serialized color.
Variant | Details |
---|---|
"limited-srgb" | |
"display-p3" |
dirname
Name of form control to use for sending the element's directionality in form submission.
disabled
Whether the form control is disabled.
form
Associates the element with a form element.
formaction
URL to use for form submission.
formenctype
Entry list encoding type to use for form submission.
Variant | Details |
---|---|
"application/x-www-form-urlencoded" | |
"multipart/form-data" | |
"text/plain" |
formmethod
Variant to use for form submission.
Variant | Details |
---|---|
"GET" | |
"POST" | |
"dialog" |
formnovalidate
Bypass form control validation for form submission.
formtarget
Navigable for form submission.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
height
Vertical dimension.
list
List of autocomplete options.
max
Maximum value.
maxlength
Maximum length of value.
min
Minimum value.
minlength
Minimum length of value.
multiple
Whether to allow multiple values.
name
Name of the element to use for form submission and in the form.elements API.
pattern
Pattern to be matched by the form control's value.
placeholder
User-visible label to be placed within the form control.
popovertarget
Targets a popover element to toggle, show, or hide.
popovertargetaction
Indicates whether a targeted popover element is to be toggled, shown, or hidden.
Variant | Details |
---|---|
"toggle" | |
"show" | |
"hide" |
readonly
Whether to allow the value to be edited by the user.
required
Whether the control is required for form submission.
size
Size of the control.
src
Address of the resource.
step
Granularity to be matched by the form control's value.
Variant | Details |
---|---|
"any" |
type
Type of form control.
View options
Variant | Details |
---|---|
"hidden" | |
"text" | |
"search" | |
"tel" | |
"url" | |
"email" | |
"password" | |
"date" | |
"month" | |
"week" | |
"time" | |
"datetime-local" | |
"number" | |
"range" | |
"color" | |
"checkbox" | |
"radio" | |
"file" | |
"submit" | |
"image" | |
"reset" | |
"button" |
value
Value of the form control.
width
Horizontal dimension.
ins
An addition to the document.
cite
Link to the source of the quotation or more information about the edit.
datetime
Date and (optionally) time of the change.
body
The contents of the HTML element.
kbd
User input.
body
The contents of the HTML element.
label
Caption for a form control.
for
Associate the label with form control.
body
The contents of the HTML element.
legend
Caption for fieldset.
body
The contents of the HTML element.
li
List item.
value
Ordinal value of the list item.
body
The contents of the HTML element.
link
Link metadata.
as
Potential destination for a preload request (for rel="preload" and rel="modulepreload").
View options
Variant | Details |
---|---|
"audio" | |
"audioworklet" | |
"document" | |
"embed" | |
"font" | |
"frame" | |
"iframe" | |
"image" | |
"json" | |
"manifest" | |
"object" | |
"paintworklet" | |
"report" | |
"script" | |
"serviceworker" | |
"sharedworker" | |
"style" | |
"track" | |
"video" | |
"webidentity" | |
"worker" | |
"xslt" |
blocking
Whether the element is potentially render-blocking.
Variant | Details |
---|---|
"blocking" |
color
Color to use when customizing a site's icon (for rel="mask-icon").
crossorigin
How the element handles crossorigin requests.
Variant | Details |
---|---|
"anonymous" | |
"use-credentials" |
disabled
Whether the link is disabled.
fetchpriority
Sets the priority for fetches initiated by the element.
Variant | Details |
---|---|
"high" | |
"low" |
href
Address of the hyperlink.
hreflang
Language of the linked resource.
imagesizes
Image sizes for different page layouts (for rel="preload"). Expects an array of dictionaries with the keys condition
(string) and size
(length).
imagesrcset
Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for rel="preload"). Expects an array of dictionaries with the keys src
(string) and width
(integer) or density
(float).
integrity
Integrity metadata used in Subresource Integrity checks.
media
Applicable media.
referrerpolicy
Referrer policy for fetches initiated by the element.
Variant | Details |
---|---|
"no-referrer" | |
"no-referrer-when-downgrade" | |
"same-origin" | |
"origin" | |
"strict-origin" | |
"origin-when-cross-origin" | |
"strict-origin-when-cross-origin" | |
"unsafe-url" |
rel
Relationship between the document containing the hyperlink and the destination resource.
View options
Variant | Details |
---|---|
"alternate" | |
"canonical" | |
"author" | |
"bookmark" | |
"dns-prefetch" | |
"expect" | |
"external" | |
"help" | |
"icon" | |
"manifest" | |
"modulepreload" | |
"license" | |
"next" | |
"nofollow" | |
"noopener" | |
"noreferrer" | |
"opener" | |
"pingback" | |
"preconnect" | |
"prefetch" | |
"preload" | |
"prev" | |
"privacy-policy" | |
"search" | |
"stylesheet" | |
"tag" | |
"terms-of-service" |
sizes
Sizes of the icons (for rel="icon"). Expects an array of sizes. Each size is specified as an array of two integers (width and height).
type
Hint for the type of the referenced resource.
main
Container for the dominant contents of the document.
body
The contents of the HTML element.
map
Image map.
name
Name of image map to reference from the usemap attribute.
body
The contents of the HTML element.
mark
Highlight.
body
The contents of the HTML element.
menu
Menu of commands.
body
The contents of the HTML element.
meta
Text metadata.
charset
Character encoding declaration.
Variant | Details |
---|---|
"utf-8" |
content
Value of the element.
http-equiv
Pragma directive.
Variant | Details |
---|---|
"content-type" | |
"default-style" | |
"refresh" | |
"x-ua-compatible" | |
"content-security-policy" |
media
Applicable media.
name
Metadata name.
meter
Gauge.
high
Low limit of high range.
low
High limit of low range.
max
Upper bound of range.
min
Lower bound of range.
optimum
Optimum value in gauge.
value
Current value of the element.
body
The contents of the HTML element.
nav
Section with navigational links.
body
The contents of the HTML element.
noscript
Fallback content for script.
body
The contents of the HTML element.
object
Image, child navigable, or plugin.
data
Address of the resource.
form
Associates the element with a form element.
height
Vertical dimension.
name
Name of content navigable.
Variant | Details |
---|---|
"_blank" | |
"_self" | |
"_parent" | |
"_top" |
type
Type of embedded resource.
width
Horizontal dimension.
body
The contents of the HTML element.
ol
Ordered list.
reversed
Number the list backwards.
start
Starting value of the list.
type
Kind of list marker.
Variant | Details |
---|---|
"1" | |
"a" | |
"A" | |
"i" | |
"I" |
body
The contents of the HTML element.
optgroup
Group of options in a list box.
disabled
Whether the form control is disabled.
label
User-visible label.
body
The contents of the HTML element.
option
Option in a list box or combo box control.
disabled
Whether the form control is disabled.
label
User-visible label.
selected
Whether the option is selected by default.
value
Value to be used for form submission.
body
The contents of the HTML element.
output
Calculated output value.
for
Specifies controls from which the output was calculated.
form
Associates the element with a form element.
name
Name of the element to use for form submission and in the form.elements API.
body
The contents of the HTML element.
p
Paragraph.
body
The contents of the HTML element.
picture
Image.
body
The contents of the HTML element.
pre
Block of preformatted text.
body
The contents of the HTML element.
progress
Progress bar.
max
Upper bound of range.
value
Current value of the element.
body
The contents of the HTML element.
q
Quotation.
cite
Link to the source of the quotation or more information about the edit.
body
The contents of the HTML element.
rp
Parenthesis for ruby annotation text.
body
The contents of the HTML element.
rt
Ruby annotation text.
body
The contents of the HTML element.
ruby
Ruby annotation(s).
body
The contents of the HTML element.
s
Inaccurate text.
body
The contents of the HTML element.
samp
Computer output.
body
The contents of the HTML element.
script
Embedded script.
async
Execute script when available, without blocking while fetching.
blocking
Whether the element is potentially render-blocking.
Variant | Details |
---|---|
"blocking" |
crossorigin
How the element handles crossorigin requests.
Variant | Details |
---|---|
"anonymous" | |
"use-credentials" |
defer
Defer script execution.
fetchpriority
Sets the priority for fetches initiated by the element.
Variant | Details |
---|---|
"high" | |
"low" |
integrity
Integrity metadata used in Subresource Integrity checks.
nomodule
Prevents execution in user agents that support module scripts.
referrerpolicy
Referrer policy for fetches initiated by the element.
Variant | Details |
---|---|
"no-referrer" | |
"no-referrer-when-downgrade" | |
"same-origin" | |
"origin" | |
"strict-origin" | |
"origin-when-cross-origin" | |
"strict-origin-when-cross-origin" | |
"unsafe-url" |
src
Address of the resource.
type
Type of script.
Variant | Details |
---|---|
"module" |
body
The contents of the HTML element.
search
Container for search controls.
body
The contents of the HTML element.
section
Generic document or application section.
body
The contents of the HTML element.
select
List box control.
autocomplete
Hint for form autofill feature.
View options
Variant | Details |
---|---|
"shipping" | |
"billing" | |
"name" | |
"honorific-prefix" | |
"given-name" | |
"additional-name" | |
"family-name" | |
"honorific-suffix" | |
"nickname" | |
"username" | |
"new-password" | |
"current-password" | |
"one-time-code" | |
"organization-title" | |
"organization" | |
"street-address" | |
"address-line1" | |
"address-line2" | |
"address-line3" | |
"address-level4" | |
"address-level3" | |
"address-level2" | |
"address-level1" | |
"country" | |
"country-name" | |
"postal-code" | |
"cc-name" | |
"cc-given-name" | |
"cc-additional-name" | |
"cc-family-name" | |
"cc-number" | |
"cc-exp" | |
"cc-exp-month" | |
"cc-exp-year" | |
"cc-csc" | |
"cc-type" | |
"transaction-currency" | |
"transaction-amount" | |
"language" | |
"bday" | |
"bday-day" | |
"bday-month" | |
"bday-year" | |
"sex" | |
"url" | |
"photo" | |
"home" | |
"work" | |
"mobile" | |
"fax" | |
"pager" | |
"tel" | |
"tel-country-code" | |
"tel-national" | |
"tel-area-code" | |
"tel-local" | |
"tel-local-prefix" | |
"tel-local-suffix" | |
"tel-extension" | |
"email" | |
"impp" |
disabled
Whether the form control is disabled.
form
Associates the element with a form element.
multiple
Whether to allow multiple values.
name
Name of the element to use for form submission and in the form.elements API.
required
Whether the control is required for form submission.
size
Size of the control.
body
The contents of the HTML element.
slot
Shadow tree slot.
name
Name of shadow tree slot.
body
The contents of the HTML element.
small
Side comment.
body
The contents of the HTML element.
source
Image source for img or media source for video or audio.
height
Vertical dimension.
media
Applicable media.
sizes
Image sizes for different page layouts. Expects an array of dictionaries with the keys condition
(string) and size
(length).
src
Address of the resource.
srcset
Images to use in different situations, e.g., high-resolution displays, small monitors, etc. Expects an array of dictionaries with the keys src
(string) and width
(integer) or density
(float).
type
Type of embedded resource.
width
Horizontal dimension.
span
Generic phrasing container.
body
The contents of the HTML element.
strong
Importance.
body
The contents of the HTML element.
style
Embedded styling information.
blocking
Whether the element is potentially render-blocking.
Variant | Details |
---|---|
"blocking" |
media
Applicable media.
body
The contents of the HTML element.
sub
Subscript.
body
The contents of the HTML element.
summary
Caption for details.
body
The contents of the HTML element.
sup
Superscript.
body
The contents of the HTML element.
table
Table.
body
The contents of the HTML element.
tbody
Group of rows in a table.
body
The contents of the HTML element.
td
Table cell.
colspan
Number of columns that the cell is to span.
headers
The header cells for this cell.
rowspan
Number of rows that the cell is to span.
body
The contents of the HTML element.
template
Template.
shadowrootclonable
Sets clonable on a declarative shadow root.
shadowrootcustomelementregistry
Enables declarative shadow roots to indicate they will use a custom element registry.
shadowrootdelegatesfocus
Sets delegates focus on a declarative shadow root.
shadowrootmode
Enables streaming declarative shadow roots.
Variant | Details |
---|---|
"open" | |
"closed" |
shadowrootserializable
Sets serializable on a declarative shadow root.
body
The contents of the HTML element.
textarea
Multiline text controls.
autocomplete
Hint for form autofill feature.
View options
Variant | Details |
---|---|
"shipping" | |
"billing" | |
"name" | |
"honorific-prefix" | |
"given-name" | |
"additional-name" | |
"family-name" | |
"honorific-suffix" | |
"nickname" | |
"username" | |
"new-password" | |
"current-password" | |
"one-time-code" | |
"organization-title" | |
"organization" | |
"street-address" | |
"address-line1" | |
"address-line2" | |
"address-line3" | |
"address-level4" | |
"address-level3" | |
"address-level2" | |
"address-level1" | |
"country" | |
"country-name" | |
"postal-code" | |
"cc-name" | |
"cc-given-name" | |
"cc-additional-name" | |
"cc-family-name" | |
"cc-number" | |
"cc-exp" | |
"cc-exp-month" | |
"cc-exp-year" | |
"cc-csc" | |
"cc-type" | |
"transaction-currency" | |
"transaction-amount" | |
"language" | |
"bday" | |
"bday-day" | |
"bday-month" | |
"bday-year" | |
"sex" | |
"url" | |
"photo" | |
"home" | |
"work" | |
"mobile" | |
"fax" | |
"pager" | |
"tel" | |
"tel-country-code" | |
"tel-national" | |
"tel-area-code" | |
"tel-local" | |
"tel-local-prefix" | |
"tel-local-suffix" | |
"tel-extension" | |
"email" | |
"impp" |
cols
Maximum number of characters per line.
dirname
Name of form control to use for sending the element's directionality in form submission.
disabled
Whether the form control is disabled.
form
Associates the element with a form element.
maxlength
Maximum length of value.
minlength
Minimum length of value.
name
Name of the element to use for form submission and in the form.elements API.
placeholder
User-visible label to be placed within the form control.
readonly
Whether to allow the value to be edited by the user.
required
Whether the control is required for form submission.
rows
Number of lines to show.
wrap
How the value of the form control is to be wrapped for form submission.
Variant | Details |
---|---|
"soft" | |
"hard" |
body
The contents of the HTML element.
tfoot
Group of footer rows in a table.
body
The contents of the HTML element.
th
Table header cell.
abbr
Alternative label to use for the header cell when referencing the cell in other contexts.
colspan
Number of columns that the cell is to span.
headers
The header cells for this cell.
rowspan
Number of rows that the cell is to span.
scope
Specifies which cells the header cell applies to.
Variant | Details |
---|---|
"row" | |
"col" | |
"rowgroup" | |
"colgroup" |
body
The contents of the HTML element.
thead
Group of heading rows in a table.
body
The contents of the HTML element.
time
Machine-readable equivalent of date- or time-related data.
datetime
Machine-readable value.
body
The contents of the HTML element.
title
Document title.
body
The contents of the HTML element.
tr
Table row.
body
The contents of the HTML element.
track
Timed text track.
default
Enable the track if no other text track is more suitable.
kind
The type of text track.
Variant | Details |
---|---|
"subtitles" | |
"captions" | |
"descriptions" | |
"chapters" | |
"metadata" |
label
User-visible label.
src
Address of the resource.
srclang
Language of the text track.
u
Unarticulated annotation.
body
The contents of the HTML element.
ul
List.
body
The contents of the HTML element.
var
Variable.
body
The contents of the HTML element.
video
Video player.
autoplay
Hint that the media resource can be started automatically when the page is loaded.
controls
Show user agent controls.
crossorigin
How the element handles crossorigin requests.
Variant | Details |
---|---|
"anonymous" | |
"use-credentials" |
height
Vertical dimension.
loop
Whether to loop the media resource.
muted
Whether to mute the media resource by default.
playsinline
Encourage the user agent to display video content within the element's playback area.
poster
Poster frame to show prior to video playback.
preload
Hints how much buffering the media resource will likely need.
Variant | Details |
---|---|
"metadata" |
src
Address of the resource.
width
Horizontal dimension.
body
The contents of the HTML element.
wbr
Line breaking opportunity.
Global Attributes
These parameters are common to all typed HTML functions. They are listed here once instead of explicitly on each element for readability.
accesskey
Keyboard shortcut to activate or focus element. Expects a single-codepoint string or an array thereof.
aria-activedescendant
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
Variant | Details |
---|---|
"inline" | When a user is providing input, text suggesting one way to complete the provided input may be dynamically inserted after the caret. |
"list" | When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. |
"both" | When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input. |
aria-busy
Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. See related aria-pressed and aria-selected.
Variant | Details |
---|---|
"mixed" | An intermediate value between true and false. |
aria-colcount
Defines the total number of columns in a table, grid, or treegrid. See related aria-colindex.
aria-colindex
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. See related aria-colcount and aria-colspan.
aria-colspan
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. See related aria-colindex and aria-rowspan.
aria-controls
Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns.
aria-current
Indicates the element that represents the current item within a container or set of related elements.
Variant | Details |
---|---|
"page" | Represents the current page within a set of pages. |
"step" | Represents the current step within a process. |
"location" | Represents the current location within an environment or context. |
"date" | Represents the current date within a collection of dates. |
"time" | Represents the current time within a set of times. |
aria-describedby
Identifies the element (or elements) that describes the object. See related aria-labelledby.
aria-details
Identifies the element that provides a detailed, extended description for the object. See related aria-describedby.
aria-disabled
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related aria-hidden and aria-readonly.
aria-errormessage
Identifies the element that provides an error message for the object. See related aria-invalid and aria-describedby.
aria-expanded
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-haspopup
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
Variant | Details |
---|---|
"menu" | Indicates the popup is a menu. |
"listbox" | Indicates the popup is a listbox. |
"tree" | Indicates the popup is a tree. |
"grid" | Indicates the popup is a grid. |
"dialog" | Indicates the popup is a dialog. |
aria-hidden
Indicates whether the element is exposed to an accessibility API. See related aria-disabled.
aria-invalid
Indicates the entered value does not conform to the format expected by the application. See related aria-errormessage.
Variant | Details |
---|---|
"grammar" | A grammatical error was detected. |
"spelling" | A spelling error was detected. |
aria-keyshortcuts
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label
Defines a string value that labels the current element. See related aria-labelledby.
aria-labelledby
Identifies the element (or elements) that labels the current element. See related aria-describedby.
aria-level
Defines the hierarchical level of an element within a structure.
aria-live
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
Variant | Details |
---|---|
"assertive" | Indicates that updates to the region have the highest priority and should be presented the user immediately. |
"off" | Indicates that updates to the region should not be presented to the user unless the used is currently focused on that region. |
"polite" | Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing. |
aria-modal
Indicates whether an element is modal when displayed.
aria-multiline
Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable
Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
Variant | Details |
---|---|
"horizontal" | The element is oriented horizontally. |
"undefined" | The element's orientation is unknown/ambiguous. |
"vertical" | The element is oriented vertically. |
aria-owns
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. See related aria-controls.
aria-placeholder
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset
Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-setsize.
aria-pressed
Indicates the current "pressed" state of toggle buttons. See related aria-checked and aria-selected.
Variant | Details |
---|---|
"mixed" | An intermediate value between true and false. |
aria-readonly
Indicates that the element is not editable, but is otherwise operable. See related aria-disabled.
aria-relevant
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. See related aria-atomic.
Variant | Details |
---|---|
"additions" | Element nodes are added to the accessibility tree within the live region. |
"additions text" | Equivalent to the combination of values, "additions text". |
"all" | Equivalent to the combination of all values, "additions removals text". |
"removals" | Text content, a text alternative, or an element node within the live region is removed from the accessibility tree. |
"text" | Text content or a text alternative is added to any descendant in the accessibility tree of the live region. |
aria-required
Indicates that user input is required on the element before a form may be submitted.
aria-roledescription
Defines a human-readable, author-localized description for the role of an element.
aria-rowcount
Defines the total number of rows in a table, grid, or treegrid. See related aria-rowindex.
aria-rowindex
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. See related aria-rowcount and aria-rowspan.
aria-rowspan
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. See related aria-rowindex and aria-colspan.
aria-selected
Indicates the current "selected" state of various widgets. See related aria-checked and aria-pressed.
aria-setsize
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-posinset.
aria-sort
Indicates if items in a table or grid are sorted in ascending or descending order.
Variant | Details |
---|---|
"ascending" | Items are sorted in ascending order by this column. |
"descending" | Items are sorted in descending order by this column. |
"other" | A sort algorithm other than ascending or descending has been applied. |
aria-valuemax
Defines the maximum allowed value for a range widget.
aria-valuemin
Defines the minimum allowed value for a range widget.
aria-valuenow
Defines the current value for a range widget. See related aria-valuetext.
aria-valuetext
Defines the human readable text alternative of aria-valuenow for a range widget.
autocapitalize
Recommended autocapitalization behavior (for supported input methods).
Variant | Details |
---|---|
"sentences" | |
"words" | |
"characters" |
autocorrect
Recommended autocorrection behavior (for supported input methods).
autofocus
Automatically focus the element when the page is loaded.
class
Classes to which the element belongs.
contenteditable
Whether the element is editable.
Variant | Details |
---|---|
"plaintext-only" |
dir
The text directionality of the element.
draggable
Whether the element is draggable.
enterkeyhint
Hint for selecting an enter key action.
Variant | Details |
---|---|
"enter" | |
"done" | |
"go" | |
"next" | |
"previous" | |
"search" | |
"send" |
hidden
Whether the element is relevant.
Variant | Details |
---|---|
"until-found" |
id
The element's ID.
inert
Whether the element is inert.
inputmode
Hint for selecting an input modality.
Variant | Details |
---|---|
"text" | |
"tel" | |
"email" | |
"url" | |
"numeric" | |
"decimal" | |
"search" |
is
Creates a customized built-in element.
itemid
Global identifier for a microdata item.
itemprop
Property names of a microdata item.
itemref
Referenced elements.
itemscope
Introduces a microdata item.
itemtype
Item types of a microdata item.
lang
Language of the element.
nonce
Cryptographic nonce used in Content Security Policy checks.
popover
Makes the element a popover element.
Variant | Details |
---|---|
"manual" |
role
An ARIA role.
View options
Variant | Details |
---|---|
"alert" | A type of live region with important, and usually time-sensitive, information. See related alertdialog and status. |
"alertdialog" | A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See related alert and dialog. |
"application" | A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a widget role. |
"article" | A section of a page that consists of a composition that forms an independent part of a document, page, or site. |
"banner" | A region that contains mostly site-oriented content, rather than page-specific content. |
"button" | An input that allows for user-triggered actions when clicked or pressed. See related link. |
"cell" | A cell in a tabular container. See related gridcell. |
"checkbox" | A checkable input that has three possible values: true, false, or mixed. |
"columnheader" | A cell containing header information for a column. |
"combobox" | A composite widget containing a single-line textbox and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the textbox. |
"command" | A form of widget that performs an action but does not receive input data. |
"complementary" | A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. |
"composite" | A widget that may contain navigable descendants or owned children. |
"contentinfo" | A large perceivable region that contains information about the parent document. |
"definition" | A definition of a term or concept. See related term. |
"dialog" | A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. |
"directory" | A list of references to members of a group, such as a static table of contents. |
"document" | An element containing content that assistive technology users may want to browse in a reading mode. |
"feed" | A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list. |
"figure" | A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. |
"form" | A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search. |
"grid" | A composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys. |
"gridcell" | A cell in a grid or treegrid. |
"group" | A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. |
"heading" | A heading for a section of the page. |
"img" | A container for a collection of elements that form an image. |
"input" | A generic type of widget that allows user input. |
"landmark" | A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology. |
"link" | An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related button. |
"list" | A section containing listitem elements. See related listbox. |
"listbox" | A widget that allows the user to select one or more items from a list of choices. See related combobox and list. |
"listitem" | A single item in a list or directory. |
"log" | A type of live region where new information is added in meaningful order and old information may disappear. See related marquee. |
"main" | The main content of a document. |
"marquee" | A type of live region where non-essential information changes frequently. See related log. |
"math" | Content that represents a mathematical expression. |
"menu" | A type of widget that offers a list of choices to the user. |
"menubar" | A presentation of menu that usually remains visible and is usually presented horizontally. |
"menuitem" | An option in a set of choices contained by a menu or menubar. |
"menuitemcheckbox" | A menuitem with a checkable state whose possible values are true, false, or mixed. |
"menuitemradio" | A checkable menuitem in a set of elements with the same role, only one of which can be checked at a time. |
"navigation" | A collection of navigational elements (usually links) for navigating the document or related documents. |
"note" | A section whose content is parenthetic or ancillary to the main content of the resource. |
"option" | A selectable item in a select list. |
"presentation" | An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym none. |
"progressbar" | An element that displays the progress status for tasks that take a long time. |
"radio" | A checkable input in a group of elements with the same role, only one of which can be checked at a time. |
"radiogroup" | A group of radio buttons. |
"range" | An input representing a range of values that can be set by the user. |
"region" | A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology. |
"roletype" | The base role from which all other roles in this taxonomy inherit. |
"row" | A row of cells in a tabular container. |
"rowgroup" | A structure containing one or more row elements in a tabular container. |
"rowheader" | A cell containing header information for a row in a grid. |
"scrollbar" | A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. |
"search" | A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form and searchbox. |
"searchbox" | A type of textbox intended for specifying search criteria. See related textbox and search. |
"section" | A renderable structural containment unit in a document or application. |
"sectionhead" | A structure that labels or summarizes the topic of its related section. |
"select" | A form widget that allows the user to make selections from a set of choices. |
"separator" | A divider that separates and distinguishes sections of content or groups of menuitems. |
"slider" | A user input where the user selects a value from within a given range. |
"spinbutton" | A form of range that expects the user to select from among discrete choices. |
"status" | A type of live region whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. |
"structure" | A document structural element. |
"switch" | A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related checkbox. |
"tab" | A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. |
"table" | A section containing data arranged in rows and columns. See related grid. |
"tablist" | A list of tab elements, which are references to tabpanel elements. |
"tabpanel" | A container for the resources associated with a tab, where each tab is contained in a tablist. |
"term" | A word or phrase with a corresponding definition. See related definition. |
"textbox" | A type of input that allows free-form text as its value. |
"timer" | A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. |
"toolbar" | A collection of commonly used function buttons or controls represented in compact visual form. |
"tooltip" | A contextual popup that displays a description for an element. |
"tree" | A type of list that may contain sub-level nested groups that can be collapsed and expanded. |
"treegrid" | A grid whose rows can be expanded and collapsed in the same manner as for a tree. |
"treeitem" | An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of tree item elements. |
"widget" | An interactive component of a graphical user interface (GUI). |
"window" | A browser or application window. |
slot
The element's desired slot.
spellcheck
Whether the element is to have its spelling and grammar checked.
style
Presentational and formatting instructions.
tabindex
Whether the element is focusable and sequentially focusable, and the relative order of the element for the purposes of sequential focus navigation.
title
Advisory information for the element.
translate
Whether the element is to be translated when the page is localized.
writingsuggestions
Whether the element can offer writing suggestions or not.