This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Html.Styled

Drop-in replacement for the Html module from the elm-lang/html package. The only functions added are styled, toUnstyled and fromUnstyled:

styled : (List (Attribute a) -> List (Html b) -> Html msg) -> List Style -> List (Attribute a) -> List (Html b) -> Html msg

Takes a function that creates an element, and pre-applies styles to it.

bigButton : List (Attribute msg) -> List (Html msg) -> Html msg
bigButton =
    styled button
        [ padding (px 30)
        , fontWeight bold
        ]

view : Model -> Html msg
view model =
    [ text "These two buttons are identical:"
    , bigButton [] [ text "Hi!" ]
    , button [ css [ padding (px 30), fontWeight bold ] ] [] [ text "Hi!" ]
    ]

Here, the bigButton function we've defined using styled button is identical to the normal button function, except that it has pre-applied the attribute of css [ padding (px 30), fontWeight bold ].

You can pass more attributes to bigButton as usual (including other css attributes). They will be applied after the pre-applied styles.

fromUnstyled : VirtualDom.Node msg -> Html msg
toUnstyled : Html msg -> VirtualDom.Node msg

This file is organized roughly in order of popularity. The tags which you'd expect to use frequently will be closer to the top.

Primitives

type alias Html msg = VirtualDom.Styled.Node msg

Styled Html.

You can convert from this to the normal Html type from elm-lang/html (which is a type alias for VirtualDom.Node) by using toUnstyled.

You can convert the other way using fromUnstyled.

type alias Attribute msg = VirtualDom.Styled.Property msg

An Attribute which supports the css attribute.

You can obtain one of these from the normal Attribute type from elm-lang/html by using fromUnstyled.

text : String -> Html msg
node : String -> List (Attribute msg) -> List (Html msg) -> Html msg
map : (a -> b) -> Html a -> Html b

Programs

beginnerProgram : { model : model , view : model -> Html msg , update : msg -> model -> model } -> Program Never model msg

Create a [Program][program] that describes how your whole app works. Read about [The Elm Architecture][tea] 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]: http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program [tea]: https://guide.elm-lang.org/architecture/

program : { init : ( model, Cmd msg ) , update : msg -> model -> ( model, Cmd msg ) , subscriptions : model -> Sub msg , view : model -> Html msg } -> Program Never model msg

Create a [Program][program] that describes how your whole app works. Read about [The Elm Architecture][tea] 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. [program]: http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program [tea]: https://guide.elm-lang.org/architecture/

programWithFlags : { 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][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]. [program]: http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program [here]: https://guide.elm-lang.org/interop/javascript.html

Tags

Headers

h1 : List (Attribute msg) -> List (Html msg) -> Html msg
h2 : List (Attribute msg) -> List (Html msg) -> Html msg
h3 : List (Attribute msg) -> List (Html msg) -> Html msg
h4 : List (Attribute msg) -> List (Html msg) -> Html msg
h5 : List (Attribute msg) -> List (Html msg) -> Html msg
h6 : List (Attribute msg) -> List (Html msg) -> Html msg

Grouping Content

div : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a generic container with no special meaning.

p : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a portion that should be displayed as a paragraph.

hr : List (Attribute msg) -> List (Html msg) -> Html msg

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

pre : List (Attribute msg) -> List (Html msg) -> Html msg

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

blockquote : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a content that is quoted from another source.

Text

span : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a hyperlink, linking to another resource.

code : List (Attribute msg) -> List (Html msg) -> Html msg

Represents computer code.

em : List (Attribute msg) -> List (Html msg) -> Html msg

Represents emphasized text, like a stress accent.

strong : List (Attribute msg) -> List (Html msg) -> Html msg

Represents especially important text.

i : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

Represent a subscript.

sup : List (Attribute msg) -> List (Html msg) -> Html msg

Represent a superscript.

br : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a line break.

Lists

ol : List (Attribute msg) -> List (Html msg) -> Html msg

Defines an ordered list of items.

ul : List (Attribute msg) -> List (Html msg) -> Html msg

Defines an unordered list of items.

li : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a item of an enumeration list.

dl : List (Attribute msg) -> List (Html msg) -> Html msg

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

dt : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a term defined by the next dd.

dd : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the definition of the terms immediately listed before it.

Emdedded Content

img : List (Attribute msg) -> List (Html msg) -> Html msg

Represents an image.

iframe : List (Attribute msg) -> List (Html msg) -> Html msg

Embedded an HTML document.

canvas : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a bitmap area for graphics rendering.

math : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a mathematical formula.

Inputs

form : List (Attribute msg) -> List (Html msg) -> Html msg

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

input : List (Attribute msg) -> List (Html msg) -> Html msg

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

textarea : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a multiline text edit control.

button : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a button.

select : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a control allowing selection among a set of options.

option : List (Attribute msg) -> List (Html msg) -> Html msg

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

Sections

section : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a section in a document.

nav : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a section that contains only navigation links.

article : List (Attribute msg) -> List (Html msg) -> Html msg

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

aside : List (Attribute msg) -> List (Html msg) -> Html msg

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

header : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a section containing contact information.

body : List (Attribute msg) -> List (Html msg) -> Html msg

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

Figures

figure : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a figure illustrated as part of the document.

figcaption : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the legend of a figure.

Tables

table : List (Attribute msg) -> List (Html msg) -> Html msg

Represents data with more than one dimension.

caption : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the title of a table.

colgroup : List (Attribute msg) -> List (Html msg) -> Html msg

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

col : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a column of a table.

tbody : List (Attribute msg) -> List (Html msg) -> Html msg

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

thead : List (Attribute msg) -> List (Html msg) -> Html msg

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

tfoot : List (Attribute msg) -> List (Html msg) -> Html msg

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

tr : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a row of cells in a table.

td : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a data cell in a table.

th : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a header cell in a table.

Less Common Elements

details : List (Attribute msg) -> List (Html msg) -> Html msg

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

menu : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a list of commands.

menuitem : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a command that the user can invoke.

summary : List (Attribute msg) -> List (Html msg) -> Html msg

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

Less Common Inputs

fieldset : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a set of controls.

legend : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the caption for a fieldset.

label : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the caption of a form control.

datalist : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a set of predefined options for other controls.

optgroup : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a set of options, logically grouped.

keygen : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a key-pair generator control.

output : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the result of a calculation.

progress : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the completion progress of a task.

meter : List (Attribute msg) -> List (Html msg) -> Html msg

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

Audio and Video

audio : List (Attribute msg) -> List (Html msg) -> Html msg

Represents a sound or audio stream.

video : List (Attribute msg) -> List (Html msg) -> Html msg

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

source : List (Attribute msg) -> List (Html msg) -> Html msg

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

track : List (Attribute msg) -> List (Html msg) -> Html msg

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

Embedded Objects

embed : List (Attribute msg) -> List (Html msg) -> Html msg

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

object : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

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

Text Edits

ins : List (Attribute msg) -> List (Html msg) -> Html msg

Defines an addition to the document.

del : List (Attribute msg) -> List (Html msg) -> Html msg

Defines a removal from the document.

Semantic Text

small : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the title of a work.

dfn : List (Attribute msg) -> List (Html msg) -> Html msg

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

abbr : List (Attribute msg) -> List (Html msg) -> Html msg

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

time : List (Attribute msg) -> List (Html msg) -> Html msg

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

var : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the output of a program or a computer.

kbd : List (Attribute msg) -> List (Html msg) -> Html msg

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

s : List (Attribute msg) -> List (Html msg) -> Html msg

Represents content that is no longer accurate or relevant.

q : List (Attribute msg) -> List (Html msg) -> Html msg

Represents an inline quotation.

Less Common Text Tags

mark : List (Attribute msg) -> List (Html msg) -> Html msg

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

ruby : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

Represents the text of a ruby annotation.

rp : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (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 : List (Attribute msg) -> List (Html msg) -> Html msg

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

wbr : List (Attribute msg) -> List (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.

Interactive Elements

module Html.Styled exposing
    ( styled, fromUnstyled, toUnstyled
    , Html, Attribute, text, node, map
    , beginnerProgram, program, programWithFlags
    , h1, h2, h3, h4, h5, h6
    , div, p, hr, pre, blockquote
    , span, a, code, em, strong, i, b, u, sub, sup, br
    , ol, ul, li, dl, dt, dd
    , img, iframe, canvas, math
    , form, input, textarea, button, select, option
    , section, nav, article, aside, header, footer, address, main_, body
    , figure, figcaption
    , table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
    , details, menu, menuitem, summary
    , fieldset, legend, label, datalist, optgroup, keygen, output, progress, meter
    , audio, video, source, track
    , embed, object, param
    , ins, del
    , small, cite, dfn, abbr, time, var, samp, kbd, s, q
    , mark, ruby, rt, rp, bdi, bdo, wbr
    )

{-| Drop-in replacement for the `Html` module from the `elm-lang/html` package.
The only functions added are `styled`, `toUnstyled` and `fromUnstyled`:

@docs styled, fromUnstyled, toUnstyled

This file is organized roughly in order of popularity. The tags which you'd
expect to use frequently will be closer to the top.


# Primitives

@docs Html, Attribute, text, node, map


# Programs

@docs beginnerProgram, program, programWithFlags


# Tags


## Headers

@docs h1, h2, h3, h4, h5, h6


## Grouping Content

@docs div, p, hr, pre, blockquote


## Text

@docs span, a, code, em, strong, i, b, u, sub, sup, br


## Lists

@docs ol, ul, li, dl, dt, dd


## Emdedded Content

@docs img, iframe, canvas, math


## Inputs

@docs form, input, textarea, button, select, option


## Sections

@docs section, nav, article, aside, header, footer, address, main_, body


## Figures

@docs figure, figcaption


## Tables

@docs table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th


## Less Common Elements

@docs details, menu, menuitem, summary


### Less Common Inputs

@docs fieldset, legend, label, datalist, optgroup, keygen, output, progress, meter


### Audio and Video

@docs audio, video, source, track


### Embedded Objects

@docs embed, object, param


### Text Edits

@docs ins, del


### Semantic Text

@docs small, cite, dfn, abbr, time, var, samp, kbd, s, q


### Less Common Text Tags

@docs mark, ruby, rt, rp, bdi, bdo, wbr


## Interactive Elements

-}

import Css exposing (Style)
import Html.Styled.Internal as Internal
import VirtualDom
import VirtualDom.Styled


{-| Styled [`Html`](http://package.elm-lang.org/packages/elm-lang/html/latest/Html#Html).

You can convert from this to the normal [`Html`](http://package.elm-lang.org/packages/elm-lang/html/latest/Html#Html) type from [`elm-lang/html`](http://package.elm-lang.org/packages/elm-lang/html/latest)
(which is a type alias for [`VirtualDom.Node`](http://package.elm-lang.org/packages/elm-lang/virtual-dom/latest/VirtualDom#Node))
by using [`toUnstyled`](#toUnstyled).

You can convert the other way using [`fromUnstyled`](#fromUnstyled).

-}
type alias Html msg =
    VirtualDom.Styled.Node msg


{-| An [`Attribute`](http://package.elm-lang.org/packages/elm-lang/html/latest/Html#Attribute) which supports the [`css`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Attributes#css) attribute.

You can obtain one of these from the normal [`Attribute`](http://package.elm-lang.org/packages/elm-lang/html/latest/Html#Attribute) type from [`elm-lang/html`](http://package.elm-lang.org/packages/elm-lang/html/latest)
by using [`fromUnstyled`](http://package.elm-lang.org/packages/elm-lang/html/latest/Html-Styled-Attributes#fromUnstyled).

-}
type alias Attribute msg =
    VirtualDom.Styled.Property msg



-- MAKING HTML VALUES --


{-| -}
node : String -> List (Attribute msg) -> List (Html msg) -> Html msg
node =
    VirtualDom.Styled.node


{-| -}
text : String -> Html msg
text =
    VirtualDom.Styled.text


{-| -}
map : (a -> b) -> Html a -> Html b
map =
    VirtualDom.Styled.map


{-| Takes a function that creates an element, and pre-applies styles to it.

    bigButton : List (Attribute msg) -> List (Html msg) -> Html msg
    bigButton =
        styled button
            [ padding (px 30)
            , fontWeight bold
            ]

    view : Model -> Html msg
    view model =
        [ text "These two buttons are identical:"
        , bigButton [] [ text "Hi!" ]
        , button [ css [ padding (px 30), fontWeight bold ] ] [] [ text "Hi!" ]
        ]

Here, the `bigButton` function we've defined using `styled button` is
identical to the normal `button` function, except that it has pre-applied
the attribute of `css [ padding (px 30), fontWeight bold ]`.

You can pass more attributes to `bigButton` as usual (including other `css`
attributes). They will be applied after the pre-applied styles.

-}
styled :
    (List (Attribute a) -> List (Html b) -> Html msg)
    -> List Style
    -> List (Attribute a)
    -> List (Html b)
    -> Html msg
styled fn styles attrs children =
    fn (Internal.css styles :: attrs) children


{-| -}
toUnstyled : Html msg -> VirtualDom.Node msg
toUnstyled =
    VirtualDom.Styled.toUnstyled


{-| -}
fromUnstyled : VirtualDom.Node msg -> Html msg
fromUnstyled =
    VirtualDom.Styled.unstyledNode



-- CREATING PROGRAMS


{-| Create a [`Program`][program] that describes how your whole app works.
Read about [The Elm Architecture][tea] 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]: <http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program>
[tea]: <https://guide.elm-lang.org/architecture/>
-}
beginnerProgram :
    { model : model
    , view : model -> Html msg
    , update : msg -> model -> model
    }
    -> Program Never model msg
beginnerProgram { model, view, update } =
    program
        { init = model ! []
        , update = \msg model -> update msg model ! []
        , view = view
        , subscriptions = \_ -> Sub.none
        }


{-| Create a [`Program`][program] that describes how your whole app works.
Read about [The Elm Architecture][tea] 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.
[program]: <http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program>
[tea]: <https://guide.elm-lang.org/architecture/>
-}
program :
    { init : ( model, Cmd msg )
    , update : msg -> model -> ( model, Cmd msg )
    , subscriptions : model -> Sub msg
    , view : model -> Html msg
    }
    -> Program Never model msg
program config =
    VirtualDom.program { config | view = config.view >> toUnstyled }


{-| Create a [`Program`][program] that describes how your whole app works.
It works just like `program` but you can provide &ldquo;flags&rdquo; from
JavaScript to configure your application. Read more about that [here].
[program]: <http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program>
[here]: <https://guide.elm-lang.org/interop/javascript.html>
-}
programWithFlags :
    { init : flags -> ( model, Cmd msg )
    , update : msg -> model -> ( model, Cmd msg )
    , subscriptions : model -> Sub msg
    , view : model -> Html msg
    }
    -> Program flags model msg
programWithFlags config =
    VirtualDom.programWithFlags { config | view = config.view >> toUnstyled }



-- SECTIONS


{-| Represents the content of an HTML document. There is only one `body`
element in a document.
-}
body : List (Attribute msg) -> List (Html msg) -> Html msg
body =
    node "body"


{-| Defines a section in a document.
-}
section : List (Attribute msg) -> List (Html msg) -> Html msg
section =
    node "section"


{-| Defines a section that contains only navigation links.
-}
nav : List (Attribute msg) -> List (Html msg) -> Html msg
nav =
    node "nav"


{-| Defines self-contained content that could exist independently of the rest
of the content.
-}
article : List (Attribute msg) -> List (Html msg) -> Html msg
article =
    node "article"


{-| Defines some content loosely related to the page content. If it is removed,
the remaining content still makes sense.
-}
aside : List (Attribute msg) -> List (Html msg) -> Html msg
aside =
    node "aside"


{-| -}
h1 : List (Attribute msg) -> List (Html msg) -> Html msg
h1 =
    node "h1"


{-| -}
h2 : List (Attribute msg) -> List (Html msg) -> Html msg
h2 =
    node "h2"


{-| -}
h3 : List (Attribute msg) -> List (Html msg) -> Html msg
h3 =
    node "h3"


{-| -}
h4 : List (Attribute msg) -> List (Html msg) -> Html msg
h4 =
    node "h4"


{-| -}
h5 : List (Attribute msg) -> List (Html msg) -> Html msg
h5 =
    node "h5"


{-| -}
h6 : List (Attribute msg) -> List (Html msg) -> Html msg
h6 =
    node "h6"


{-| 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.
-}
header : List (Attribute msg) -> List (Html msg) -> Html msg
header =
    node "header"


{-| Defines the footer for a page or section. It often contains a copyright
notice, some links to legal information, or addresses to give feedback.
-}
footer : List (Attribute msg) -> List (Html msg) -> Html msg
footer =
    node "footer"


{-| Defines a section containing contact information.
-}
address : List (Attribute msg) -> List (Html msg) -> Html msg
address =
    node "address"


{-| Defines the main or important content in the document. There is only one
`main` element in the document.
-}
main_ : List (Attribute msg) -> List (Html msg) -> Html msg
main_ =
    node "main"



-- GROUPING CONTENT


{-| Defines a portion that should be displayed as a paragraph.
-}
p : List (Attribute msg) -> List (Html msg) -> Html msg
p =
    node "p"


{-| Represents a thematic break between paragraphs of a section or article or
any longer content.
-}
hr : List (Attribute msg) -> List (Html msg) -> Html msg
hr =
    node "hr"


{-| Indicates that its content is preformatted and that this format must be
preserved.
-}
pre : List (Attribute msg) -> List (Html msg) -> Html msg
pre =
    node "pre"


{-| Represents a content that is quoted from another source.
-}
blockquote : List (Attribute msg) -> List (Html msg) -> Html msg
blockquote =
    node "blockquote"


{-| Defines an ordered list of items.
-}
ol : List (Attribute msg) -> List (Html msg) -> Html msg
ol =
    node "ol"


{-| Defines an unordered list of items.
-}
ul : List (Attribute msg) -> List (Html msg) -> Html msg
ul =
    node "ul"


{-| Defines a item of an enumeration list.
-}
li : List (Attribute msg) -> List (Html msg) -> Html msg
li =
    node "li"


{-| Defines a definition list, that is, a list of terms and their associated
definitions.
-}
dl : List (Attribute msg) -> List (Html msg) -> Html msg
dl =
    node "dl"


{-| Represents a term defined by the next `dd`.
-}
dt : List (Attribute msg) -> List (Html msg) -> Html msg
dt =
    node "dt"


{-| Represents the definition of the terms immediately listed before it.
-}
dd : List (Attribute msg) -> List (Html msg) -> Html msg
dd =
    node "dd"


{-| Represents a figure illustrated as part of the document.
-}
figure : List (Attribute msg) -> List (Html msg) -> Html msg
figure =
    node "figure"


{-| Represents the legend of a figure.
-}
figcaption : List (Attribute msg) -> List (Html msg) -> Html msg
figcaption =
    node "figcaption"


{-| Represents a generic container with no special meaning.
-}
div : List (Attribute msg) -> List (Html msg) -> Html msg
div =
    node "div"



-- TEXT LEVEL SEMANTIC


{-| Represents a hyperlink, linking to another resource.
-}
a : List (Attribute msg) -> List (Html msg) -> Html msg
a =
    node "a"


{-| Represents emphasized text, like a stress accent.
-}
em : List (Attribute msg) -> List (Html msg) -> Html msg
em =
    node "em"


{-| Represents especially important text.
-}
strong : List (Attribute msg) -> List (Html msg) -> Html msg
strong =
    node "strong"


{-| Represents a side comment, that is, text like a disclaimer or a
copyright, which is not essential to the comprehension of the document.
-}
small : List (Attribute msg) -> List (Html msg) -> Html msg
small =
    node "small"


{-| Represents content that is no longer accurate or relevant.
-}
s : List (Attribute msg) -> List (Html msg) -> Html msg
s =
    node "s"


{-| Represents the title of a work.
-}
cite : List (Attribute msg) -> List (Html msg) -> Html msg
cite =
    node "cite"


{-| Represents an inline quotation.
-}
q : List (Attribute msg) -> List (Html msg) -> Html msg
q =
    node "q"


{-| Represents a term whose definition is contained in its nearest ancestor
content.
-}
dfn : List (Attribute msg) -> List (Html msg) -> Html msg
dfn =
    node "dfn"


{-| Represents an abbreviation or an acronym; the expansion of the
abbreviation can be represented in the title attribute.
-}
abbr : List (Attribute msg) -> List (Html msg) -> Html msg
abbr =
    node "abbr"


{-| Represents a date and time value; the machine-readable equivalent can be
represented in the datetime attribute.
-}
time : List (Attribute msg) -> List (Html msg) -> Html msg
time =
    node "time"


{-| Represents computer code.
-}
code : List (Attribute msg) -> List (Html msg) -> Html msg
code =
    node "code"


{-| 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.
-}
var : List (Attribute msg) -> List (Html msg) -> Html msg
var =
    node "var"


{-| Represents the output of a program or a computer.
-}
samp : List (Attribute msg) -> List (Html msg) -> Html msg
samp =
    node "samp"


{-| Represents user input, often from the keyboard, but not necessarily; it
may represent other input, like transcribed voice commands.
-}
kbd : List (Attribute msg) -> List (Html msg) -> Html msg
kbd =
    node "kbd"


{-| Represent a subscript.
-}
sub : List (Attribute msg) -> List (Html msg) -> Html msg
sub =
    node "sub"


{-| Represent a superscript.
-}
sup : List (Attribute msg) -> List (Html msg) -> Html msg
sup =
    node "sup"


{-| 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.
-}
i : List (Attribute msg) -> List (Html msg) -> Html msg
i =
    node "i"


{-| 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.
-}
b : List (Attribute msg) -> List (Html msg) -> Html msg
b =
    node "b"


{-| 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.
-}
u : List (Attribute msg) -> List (Html msg) -> Html msg
u =
    node "u"


{-| Represents text highlighted for reference purposes, that is for its
relevance in another context.
-}
mark : List (Attribute msg) -> List (Html msg) -> Html msg
mark =
    node "mark"


{-| 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.
-}
ruby : List (Attribute msg) -> List (Html msg) -> Html msg
ruby =
    node "ruby"


{-| Represents the text of a ruby annotation.
-}
rt : List (Attribute msg) -> List (Html msg) -> Html msg
rt =
    node "rt"


{-| Represents parenthesis around a ruby annotation, used to display the
annotation in an alternate way by browsers not supporting the standard display
for annotations.
-}
rp : List (Attribute msg) -> List (Html msg) -> Html msg
rp =
    node "rp"


{-| 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.
-}
bdi : List (Attribute msg) -> List (Html msg) -> Html msg
bdi =
    node "bdi"


{-| Represents the directionality of its children, in order to explicitly
override the Unicode bidirectional algorithm.
-}
bdo : List (Attribute msg) -> List (Html msg) -> Html msg
bdo =
    node "bdo"


{-| 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`.
-}
span : List (Attribute msg) -> List (Html msg) -> Html msg
span =
    node "span"


{-| Represents a line break.
-}
br : List (Attribute msg) -> List (Html msg) -> Html msg
br =
    node "br"


{-| Represents a line break opportunity, that is a suggested point for
wrapping text in order to improve readability of text split on several lines.
-}
wbr : List (Attribute msg) -> List (Html msg) -> Html msg
wbr =
    node "wbr"



-- EDITS


{-| Defines an addition to the document.
-}
ins : List (Attribute msg) -> List (Html msg) -> Html msg
ins =
    node "ins"


{-| Defines a removal from the document.
-}
del : List (Attribute msg) -> List (Html msg) -> Html msg
del =
    node "del"



-- EMBEDDED CONTENT


{-| Represents an image.
-}
img : List (Attribute msg) -> List (Html msg) -> Html msg
img =
    node "img"


{-| Embedded an HTML document.
-}
iframe : List (Attribute msg) -> List (Html msg) -> Html msg
iframe =
    node "iframe"


{-| Represents a integration point for an external, often non-HTML,
application or interactive content.
-}
embed : List (Attribute msg) -> List (Html msg) -> Html msg
embed =
    node "embed"


{-| 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.
-}
object : List (Attribute msg) -> List (Html msg) -> Html msg
object =
    node "object"


{-| Defines parameters for use by plug-ins invoked by `object` elements.
-}
param : List (Attribute msg) -> List (Html msg) -> Html msg
param =
    node "param"


{-| Represents a video, the associated audio and captions, and controls.
-}
video : List (Attribute msg) -> List (Html msg) -> Html msg
video =
    node "video"


{-| Represents a sound or audio stream.
-}
audio : List (Attribute msg) -> List (Html msg) -> Html msg
audio =
    node "audio"


{-| Allows authors to specify alternative media resources for media elements
like `video` or `audio`.
-}
source : List (Attribute msg) -> List (Html msg) -> Html msg
source =
    node "source"


{-| Allows authors to specify timed text track for media elements like `video`
or `audio`.
-}
track : List (Attribute msg) -> List (Html msg) -> Html msg
track =
    node "track"


{-| Represents a bitmap area for graphics rendering.
-}
canvas : List (Attribute msg) -> List (Html msg) -> Html msg
canvas =
    node "canvas"


{-| Defines a mathematical formula.
-}
math : List (Attribute msg) -> List (Html msg) -> Html msg
math =
    node "math"



-- TABULAR DATA


{-| Represents data with more than one dimension.
-}
table : List (Attribute msg) -> List (Html msg) -> Html msg
table =
    node "table"


{-| Represents the title of a table.
-}
caption : List (Attribute msg) -> List (Html msg) -> Html msg
caption =
    node "caption"


{-| Represents a set of one or more columns of a table.
-}
colgroup : List (Attribute msg) -> List (Html msg) -> Html msg
colgroup =
    node "colgroup"


{-| Represents a column of a table.
-}
col : List (Attribute msg) -> List (Html msg) -> Html msg
col =
    node "col"


{-| Represents the block of rows that describes the concrete data of a table.
-}
tbody : List (Attribute msg) -> List (Html msg) -> Html msg
tbody =
    node "tbody"


{-| Represents the block of rows that describes the column labels of a table.
-}
thead : List (Attribute msg) -> List (Html msg) -> Html msg
thead =
    node "thead"


{-| Represents the block of rows that describes the column summaries of a table.
-}
tfoot : List (Attribute msg) -> List (Html msg) -> Html msg
tfoot =
    node "tfoot"


{-| Represents a row of cells in a table.
-}
tr : List (Attribute msg) -> List (Html msg) -> Html msg
tr =
    node "tr"


{-| Represents a data cell in a table.
-}
td : List (Attribute msg) -> List (Html msg) -> Html msg
td =
    node "td"


{-| Represents a header cell in a table.
-}
th : List (Attribute msg) -> List (Html msg) -> Html msg
th =
    node "th"



-- FORMS


{-| Represents a form, consisting of controls, that can be submitted to a
server for processing.
-}
form : List (Attribute msg) -> List (Html msg) -> Html msg
form =
    node "form"


{-| Represents a set of controls.
-}
fieldset : List (Attribute msg) -> List (Html msg) -> Html msg
fieldset =
    node "fieldset"


{-| Represents the caption for a `fieldset`.
-}
legend : List (Attribute msg) -> List (Html msg) -> Html msg
legend =
    node "legend"


{-| Represents the caption of a form control.
-}
label : List (Attribute msg) -> List (Html msg) -> Html msg
label =
    node "label"


{-| Represents a typed data field allowing the user to edit the data.
-}
input : List (Attribute msg) -> List (Html msg) -> Html msg
input =
    node "input"


{-| Represents a button.
-}
button : List (Attribute msg) -> List (Html msg) -> Html msg
button =
    node "button"


{-| Represents a control allowing selection among a set of options.
-}
select : List (Attribute msg) -> List (Html msg) -> Html msg
select =
    node "select"


{-| Represents a set of predefined options for other controls.
-}
datalist : List (Attribute msg) -> List (Html msg) -> Html msg
datalist =
    node "datalist"


{-| Represents a set of options, logically grouped.
-}
optgroup : List (Attribute msg) -> List (Html msg) -> Html msg
optgroup =
    node "optgroup"


{-| Represents an option in a `select` element or a suggestion of a `datalist`
element.
-}
option : List (Attribute msg) -> List (Html msg) -> Html msg
option =
    node "option"


{-| Represents a multiline text edit control.
-}
textarea : List (Attribute msg) -> List (Html msg) -> Html msg
textarea =
    node "textarea"


{-| Represents a key-pair generator control.
-}
keygen : List (Attribute msg) -> List (Html msg) -> Html msg
keygen =
    node "keygen"


{-| Represents the result of a calculation.
-}
output : List (Attribute msg) -> List (Html msg) -> Html msg
output =
    node "output"


{-| Represents the completion progress of a task.
-}
progress : List (Attribute msg) -> List (Html msg) -> Html msg
progress =
    node "progress"


{-| Represents a scalar measurement (or a fractional value), within a known
range.
-}
meter : List (Attribute msg) -> List (Html msg) -> Html msg
meter =
    node "meter"



-- INTERACTIVE ELEMENTS


{-| Represents a widget from which the user can obtain additional information
or controls.
-}
details : List (Attribute msg) -> List (Html msg) -> Html msg
details =
    node "details"


{-| Represents a summary, caption, or legend for a given `details`.
-}
summary : List (Attribute msg) -> List (Html msg) -> Html msg
summary =
    node "summary"


{-| Represents a command that the user can invoke.
-}
menuitem : List (Attribute msg) -> List (Html msg) -> Html msg
menuitem =
    node "menuitem"


{-| Represents a list of commands.
-}
menu : List (Attribute msg) -> List (Html msg) -> Html msg
menu =
    node "menu"