Html.md

Module Html

A port of Elm's HTML library to Purescript.

Html

type Html msg = Node msg

The core building block used to build up HTML. Here we create an Html value with no attributes and one child:

hello : Html msg
hello =
  div [] [ text "Hello!" ]

Attribute

type Attribute msg = Property msg

Set attributes on your Html. Learn more in the Html.Attributes module.

text

text :: forall msg. String -> Html msg

Just put plain text in the DOM. It will escape the string so that it appears exactly as you specify.

text "Hello World!"

node

node :: forall f g msg. Foldable f => Foldable g => String -> f (Attribute msg) -> g (Html msg) -> Html msg

General way to create HTML nodes. It is used to define all of the helper functions in this library.

div : List (Attribute msg) -> List (Html msg) -> Html msg
div attributes children =
    node "div" attributes children

You can use this to create custom nodes if you need to create something that is not covered by the helper functions in this library.

map

map :: forall msg a. (a -> msg) -> Html a -> Html msg

Transform the messages produced by some Html. In the following example, we have viewButton that produces () messages, and we transform those values into Msg values in view.

type Msg = Left | Right

view : model -> Html Msg
view model =
  div []
    [ map (\_ -> Left) (viewButton "Left")
    , map (\_ -> Right) (viewButton "Right")
    ]

viewButton : String -> Html ()
viewButton name =
  button [ onClick () ] [ text name ]

This should not come in handy too often. Definitely read this before deciding if this is what you want.

beginnerProgram

beginnerProgram :: forall msg model. { model :: model, view :: model -> Html msg, update :: msg -> model -> model } -> Program Unit model msg

Create a Program that describes how your whole app works.

Read about The Elm Architecture to learn how to use this. Just do it. The additional context is very worthwhile! (Honestly, it is best to just read that guide from front to back instead of muddling around and reading it piecemeal.)

program

program :: forall msg model. { init :: model /\ (Cmd msg), update :: msg -> model -> (model /\ (Cmd msg)), subscriptions :: model -> Sub msg, view :: model -> Html msg } -> Program Unit model msg

Create a Program that describes how your whole app works.

Read about The Elm Architecture to learn how to use this. Just do it. Commands and subscriptions make way more sense when you work up to them gradually and see them in context with examples.

programWithFlags

programWithFlags :: forall flags msg model. { init :: flags -> (model /\ (Cmd msg)), update :: msg -> model -> (model /\ (Cmd msg)), subscriptions :: model -> Sub msg, view :: model -> Html msg } -> Program flags model msg

Create a Program that describes how your whole app works.

It works just like program but you can provide “flags” from JavaScript to configure your application. Read more about that here.

h1

h1 :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

h2

h2 :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

h3

h3 :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

h4

h4 :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

h5

h5 :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

h6

h6 :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

div

div :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a generic container with no special meaning.

p

p :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a portion that should be displayed as a paragraph.

hr

hr :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a thematic break between paragraphs of a section or article or any longer content.

pre

pre :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Indicates that its content is preformatted and that this format must be preserved.

blockquote

blockquote :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a content that is quoted from another source.

span

span :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents text with no specific meaning. This has to be used when no other text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.

a

a :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a hyperlink, linking to another resource.

code

code :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents computer code.

em

em :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents emphasized text, like a stress accent.

strong

strong :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents especially important text.

i

i :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents some text in an alternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought, or a ship name.

b

b :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a text which to which attention is drawn for utilitarian purposes. It doesn't convey extra importance and doesn't imply an alternate voice.

u

u :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a non-textual annoatation for which the conventional presentation is underlining, such labeling the text as being misspelt or labeling a proper name in Chinese text.

sub

sub :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represent a subscript.

sup

sup :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represent a superscript.

br

br :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a line break.

ol

ol :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines an ordered list of items.

ul

ul :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines an unordered list of items.

li

li :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a item of an enumeration list.

dl

dl :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a definition list, that is, a list of terms and their associated definitions.

dt

dt :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a term defined by the next dd.

dd

dd :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the definition of the terms immediately listed before it.

img

img :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents an image.

iframe

iframe :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Embedded an HTML document.

canvas

canvas :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a bitmap area for graphics rendering.

math

math :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a mathematical formula.

form

form :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a form, consisting of controls, that can be submitted to a server for processing.

input

input :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a typed data field allowing the user to edit the data.

textarea

textarea :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a multiline text edit control.

button

button :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a button.

select

select :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a control allowing selection among a set of options.

option

option :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents an option in a select element or a suggestion of a datalist element.

section

section :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a section in a document.

nav

nav :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a section that contains only navigation links.

article

article :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines self-contained content that could exist independently of the rest of the content.

aside

aside :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.

header

header :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines the header of a page or section. It often contains a logo, the title of the web site, and a navigational table of content.

footer

footer :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.

address

address :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a section containing contact information.

main_

main_ :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines the main or important content in the document. There is only one main element in the document.

body

body :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the content of an HTML document. There is only one body element in a document.

figure

figure :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a figure illustrated as part of the document.

figcaption

figcaption :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the legend of a figure.

table

table :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents data with more than one dimension.

caption

caption :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the title of a table.

colgroup

colgroup :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a set of one or more columns of a table.

col

col :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a column of a table.

tbody

tbody :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the block of rows that describes the concrete data of a table.

thead

thead :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the block of rows that describes the column labels of a table.

tfoot

tfoot :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the block of rows that describes the column summaries of a table.

tr

tr :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a row of cells in a table.

td

td :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a data cell in a table.

th

th :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a header cell in a table.

fieldset

fieldset :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a set of controls.

legend

legend :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the caption for a fieldset.

label

label :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the caption of a form control.

datalist

datalist :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a set of predefined options for other controls.

optgroup

optgroup :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a set of options, logically grouped.

keygen

keygen :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a key-pair generator control.

output

output :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the result of a calculation.

progress

progress :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the completion progress of a task.

meter

meter :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a scalar measurement (or a fractional value), within a known range.

audio

audio :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a sound or audio stream.

video

video :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a video, the associated audio and captions, and controls.

source

source :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Allows authors to specify alternative media resources for media elements like video or audio.

track

track :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Allows authors to specify timed text track for media elements like video or audio.

embed

embed :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a integration point for an external, often non-HTML, application or interactive content.

object

object :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents an external resource, which is treated as an image, an HTML sub-document, or an external resource to be processed by a plug-in.

param

param :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines parameters for use by plug-ins invoked by object elements.

ins

ins :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines an addition to the document.

del

del :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Defines a removal from the document.

small

small :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a side comment, that is, text like a disclaimer or a copyright, which is not essential to the comprehension of the document.

cite

cite :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the title of a work.

dfn

dfn :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a term whose definition is contained in its nearest ancestor content.

abbr

abbr :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents an abbreviation or an acronym; the expansion of the abbreviation can be represented in the title attribute.

time

time :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a date and time value; the machine-readable equivalent can be represented in the datetime attribute.

var

var :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a variable. Specific cases where it should be used include an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.

samp

samp :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the output of a program or a computer.

kbd

kbd :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents user input, often from the keyboard, but not necessarily; it may represent other input, like transcribed voice commands.

s

s :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents content that is no longer accurate or relevant.

q

q :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents an inline quotation.

mark

mark :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents text highlighted for reference purposes, that is for its relevance in another context.

ruby

ruby :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents content to be marked with ruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.

rt

rt :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the text of a ruby annotation.

rp

rp :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.

bdi

bdi :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality.

bdo

bdo :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents the directionality of its children, in order to explicitly override the Unicode bidirectional algorithm.

wbr

wbr :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a line break opportunity, that is a suggested point for wrapping text in order to improve readability of text split on several lines.

details

details :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a widget from which the user can obtain additional information or controls.

summary

summary :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a summary, caption, or legend for a given details.

menuitem

menuitem :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a command that the user can invoke.

menu

menu :: forall f g msg. Foldable f => Foldable g => f (Attribute msg) -> g (Html msg) -> Html msg

Represents a list of commands.