All standard HTML attributes and tags. Some attributes and tags have the same name, e.g. style
. To disambiguate them, attributes have a _
(underscore) suffix.
Attributes
Standard, most non-deprecated attributes from https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes. Where an attribute name conflicts with an OCaml keyword, the name is suffixed with _
. Most attributes are constructed by passing in a value of some type.
All string-valued attributes allow formatting (interpolation):
div [id "section-%d" section_id] []
Or plain strings:
p [id "toast"] []
Most boolean attributes are plain values and don't need to be constructed with function calls:
input [required]
However, boolean attributes which may be inherited and toggled on/off in children, are constructed by passing in a value:
div [contenteditable true] [
p [] [txt "Edit me!"];
p [contenteditable false] [txt "Can't edit me!"];
]
Enumerated attributes accept specific values:
input [inputmode `tel]
type enctype = [
| `urlencoded
| `formdata
| `text_plain
]
type method_ = [
| `GET
| `POST
| `dialog
]
An attribute that will not be rendered in the markup. Useful for conditional logic where you sometimes want to render an attribute and sometimes not.
p [if should_show then null_ else style_ "display:none"] [txt "Show and tell"]
val autocapitalize :
[< `off | `none | `on | `sentences | `words | `characters ] to_attr
val autocomplete :
[< `off
| `on
| `name
| `honorific_prefix
| `given_name
| `additional_name
| `honorific_suffix
| `nickname
| `email
| `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
| `tel
| `tel_country_code
| `tel_national
| `tel_area_code
| `tel_local
| `tel_extension
| `impp
| `url
| `photo
| `webauthn ]
to_attr
val capture : [< `user | `environment ] to_attr
val crossorigin : [< `anonymous | `use_credentials ] to_attr
val decoding : [< `sync | `async | `auto ] to_attr
val dir : [< `ltr | `rtl | `auto ] to_attr
val fetchpriority : [< `high | `low | `auto ] to_attr
val hidden : [< `hidden | `until_found ] to_attr
val http_equiv :
[< `content_security_policy
| `content_type
| `default_style
| `x_ua_compatible
| `refresh ]
to_attr
val kind :
[< `subtitles | `captions | `descriptions | `chapters | `metadata ] to_attr
Note that the value of this attribute is not escaped.
Note that the value of this attribute is not escaped.
val preload : [< `none | `metadata | `auto ] to_attr
val referrerpolicy :
[< `no_referrer
| `no_referrer_when_downgrade
| `origin
| `origin_when_cross_origin
| `same_origin
| `strict_origin
| `strict_origin_when_cross_origin
| `unsafe_url ]
to_attr
val role :
[ `alert
| `alertdialog
| `application
| `article
| `banner
| `button
| `cell
| `checkbox
| `columnheader
| `combobox
| `comment
| `complementary
| `contentinfo
| `definition
| `dialog
| `document
| `feed
| `figure
| `form
| `generic
| `grid
| `gridcell
| `group
| `heading
| `img
| `link
| `list
| `listbox
| `listitem
| `log
| `main
| `mark
| `marquee
| `math
| `menu
| `menubar
| `menuitem
| `menuitemcheckbox
| `menuitemradio
| `meter
| `navigation
| `none
| `note
| `option
| `presentation
| `progressbar
| `radio
| `radiogroup
| `region
| `row
| `rowgroup
| `rowheader
| `scrollbar
| `search
| `searchbox
| `separator
| `slider
| `spinbutton
| `status
| `suggestion
| `switch
| `tab
| `table
| `tablist
| `tabpanel
| `term
| `textbox
| `timer
| `toolbar
| `tooltip
| `tree
| `treegrid
| `treeitem ]
to_attr
Note that the value of this attribute is not escaped.
val translate : [< `yes | `no ] to_attr
Note: this can't be restricted to just the allowed values for <input type>
, because it's used in other elements e.g. <link type>
.
val wrap : [< `hard | `soft ] to_attr
HTML tags. Most (standard tags) are constructed by passing a list of attributes and a list of children:
div [id "my-div"] [p [] [txt "Hello"]]
Some (void elements) are constructed only with a list of attributes:
input [required; type_ "email"; name "email-addr"]
Finally, a few (text elements) are constructed with a list of attributes and a single format string child:
title [] "Document title"
title [] "My App ・ %s" page_name
script [] {|alert('Careful, this is not escaped :-)');|}
A tag that will not be rendered in the markup. Useful for containing a bunch of child nodes inside a single node without having to litter the DOM with an actual node. Also may be called 'splicing'.
null [
p [] [txt "This paragraph."];
p [] [txt "And this paragraph."];
p [] [txt "Are spliced directly into the document without a containing node."];
]
Also useful for constructing a completely empty node that is erased when printing:
null []
A <!DOCTYPE html>
declaration is automatically prefixed when this tag is printed.
Note that the content of this tag is not escaped.
Note that the content of this tag is not escaped.