A special attribute that uniquely identifies a node during the diffing process. If you have a list of 20 items and want to remove the 4th one, adding keys ensures that you do not end up doing misaligned diffs on the following 15 items.

This function makes it easier to specify a set of styles.

myStyle : Attribute
myStyle =
  style
    [ ("backgroundColor", "red")
    , ("height", "90px")
    , ("width", "100%")
    ]


greeting : Html
greeting =
  div [ myStyle ] [ text "Hello!" ]

There is no Html.Styles module because best practices for working with HTML suggest that this should primarily be specified in CSS files. So the general recommendation is to use this function lightly.

Often used with CSS to style elements with common properties.

This function makes it easier to build a space-separated class attribute. Each class can easily be added and removed depending on the boolean value it is paired with.

renderMessage : Msg -> Html
renderMessage msg =
  div
    [
      classList [
        ("message", True),
        ("message-important", msg.isImportant),
        ("message-read", msg.isRead)
      ]
    ]
    [ text msg.content ]

Often used with CSS to style a specific element. The value of this attribute must be unique.

Text to be displayed in a tooltip when hovering over the element.

Indicates the relevance of an element.

Defines the type of a button, input, embed, object, script, source, style, or menu.

Defines a default value which will be displayed in a button, option, input, li, meter, progress, or param.

Indicates whether an input of type checkbox is checked.

Provides a hint to the user of what can be entered into an input or textarea.

Defines which option will be selected on page load.

List of types the server accepts, typically a file type. For form and input.

List of supported charsets in a form.

The URI of a program that processes the information submitted via a form.

Indicates whether a form anor input can have their values automatically completed by the browser.

The element should be automatically focused after the page loaded. For button, input, keygen, select, and textarea.

Previous entries into an input will be persisted across page loads, associated with a unique ID. The previous entries will be displayed as suggestions when the user types into an input that has an autosave attribute with the same unique ID.

Indicates whether the user can interact with a button, fieldset, input, keygen, optgroup, option, select or textarea.

How form data should be encoded when submitted with the POST method. Options include: application/x-www-form-urlencoded, multipart/form-data, and text/plain.

Indicates the action of an input or button. This overrides the action defined in the surrounding form.

Associates an input with a datalist tag. The datalist gives some pre-defined options to suggest to the user as they interact with an input. The value of the list attribute must match the id of a datalist node. For input.

Defines the maximum number of characters allowed in an input or textarea.

Defines the minimum number of characters allowed in an input or textarea.

Defines which HTTP method to use when submitting a form. Can be GET (default) or POST.

Indicates whether multiple values can be entered in an input of type email or file. Can also indicate that you can select many options.

Name of the element. For example used by the server to identify the fields in form submits. For button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, and param.

This attribute indicates that a form shouldn't be validated when submitted.

Defines a regular expression which an input's value will be validated against.

Indicates whether an input or textarea can be edited.

Indicates whether this element is required to fill out or not. For input, select, and textarea.

For input specifies the width of an input in characters.

For select specifies the number of visible options in a drop-down list.

The element ID described by this label or the element IDs that are used for an output.

Indicates the element ID of the form that owns this particular button, fieldset, input, keygen, label, meter, object, output, progress, select, or textarea.

Indicates the maximum value allowed. When using an input of type number or date, the max value must be a number or date. For input, meter, and progress.

Indicates the minimum value allowed. When using an input of type number or date, the min value must be a number or date. For input and meter.

Add a step size to an input. Use step "any" to allow any floating-point number to be used in the input.

Defines the number of columns in a textarea.

Defines the number of rows in a textarea.

Indicates whether the text should be wrapped in a textarea. Possible values are "hard" and "soft".

The URL of a linked resource, such as a, area, base, or link.

Specify where the results of clicking an a, area, base, or form should appear. Possible special values include:

* _blank — a new window or tab * _self — the same frame (this is default) * _parent — the parent frame * _top — the full body of the window

You can also give the name of any frame you have created.

Indicates that clicking an a and area will download the resource directly.

Indicates that clicking an a and area will download the resource directly, and that the downloaded resource with have the given filename.

Two-letter language code of the linked resource of an a, area, or link.

Specifies a hint of the target media of a a, area, link, source, or style.

Specify a URL to send a short POST request to when the user clicks on an a or area. Useful for monitoring and tracking.

Specifies the relationship of the target object to the link object. For a, area, link.

When an img is a descendent of an a tag, the ismap attribute indicates that the click location should be added to the parent a's href as a query string.

Specify the hash name reference of a map that should be used for an img or object. A hash name reference is a hash symbol followed by the element's name or id. E.g. "#planet-map".

Declare the shape of the clickable area in an a or area. Valid values include: default, rect, circle, poly. This attribute can be paired with coords to create more particular shapes.

A set of values specifying the coordinates of the hot-spot region in an area. Needs to be paired with a shape attribute to be meaningful.

The URL of the embeddable content. For audio, embed, iframe, img, input, script, source, track, and video.

Declare the height of a canvas, embed, iframe, img, input, object, or video.

Declare the width of a canvas, embed, iframe, img, input, object, or video.

Alternative text in case an image can't be displayed. Works with img, area, and input.

The audio or video should play as soon as possible.

Indicates whether the browser should show playback controls for the audio or video.

Indicates whether the audio or video should start playing from the start when it's finished.

Control how much of an audio or video resource should be preloaded.

A URL indicating a poster frame to show until the user plays or seeks the video.

Indicates that the track should be enabled unless the user's preferences indicate something different.

Specifies the kind of text track.

A two letter language code indicating the language of the track text data.

A space separated list of security restrictions you'd like to lift for an iframe.

Make an iframe look like part of the containing document.

An HTML document that will be displayed as the body of an iframe. It will override the content of the src attribute if it has been specified.

Indicates whether an ordered list ol should be displayed in a descending order instead of a ascending.

Defines the first number of an ordered list if you want it to be something besides 1.

Specifies the horizontal alignment of a caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot, th, thead, or tr.

The colspan attribute defines the number of columns a cell should span. For td and th.

Defines the number of rows a table cell should span over. For td and th.

A space separated list of element IDs indicating which th elements are headers for this cell. For td and th.

Specifies the scope of a header cell th. Possible values are: col, row, colgroup, rowgroup.

Indicates that the script should be executed asynchronously.

Declares the character encoding of the page or script. Common values include:

* UTF-8 - Character encoding for Unicode * ISO-8859-1 - Character encoding for the Latin alphabet

For meta and script.

A value associated with http-equiv or name depending on the context. For meta.

Indicates that a script should be executed after the page has been parsed.

This attribute is an indicator that is paired with the content attribute, indicating what that content means. httpEquiv can take on three different values: content-type, default-style, or refresh. For meta.

Defines the script language used in a script.

Indicates that a style should only apply to its parent and all of the parents children.

Defines a keyboard shortcut to activate or add focus to the element.

Indicates whether the element's content is editable.

Defines the ID of a menu element which will serve as the element's context menu.

Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).

Defines whether the element can be dragged.

Indicates that the element accept the dropping of content on it.

Defines the language used in the element.

Indicates whether spell checking is allowed for the element.

Overrides the browser's default tab order and follows the one specified instead.

A challenge string that is submitted along with the public key in a keygen.

Specifies the type of key generated by a keygen. Possible values are: rsa, dsa, and ec.

Contains a URI which points to the source of the quote or change in a blockquote, del, ins, or q.

Indicates the date and time associated with the element. For del, ins, time.

Indicates whether this date and time is the date of the nearest article ancestor element. For time.

Specifies the URL of the cache manifest for an html tag.

Create arbitrary properties.

import Json.Encode as Json


greeting : Html
greeting =
    div [ property "className" (Json.string "greeting") ] [
      text "Hello!"
    ]

Notice that you must give the property name, so we use className as it would be in JavaScript, not class as it would appear in HTML.

Create arbitrary HTML attributes. Maps onto JavaScript’s setAttribute function under the hood.

greeting : Html
greeting =
    div [ attribute "class" "greeting" ] [
      text "Hello!"
    ]

Notice that you must give the attribute name, so we use class as it would be in HTML, not className as it would appear in JS.