Html.Element

Some Html nodes are text nodes and others are element nodes.

The type Element represents only element nodes. Unlike Html, all Element values have a list of attributes and a list of children.

This module has functions to create and modify Element nodes.

Note: The code examples will assume the following imports:

import Html.Element as Element exposing (Element)
import Html.Element.Attribute as Attribute
import Html.Element.Event as Event

Element

type alias Element msg =

Element msg

An HTML element node.

It has a tag name, a list of attributes and a list of children.

Element nodes can be converted to Html nodes using toHtml.

element : String -> Element msg

Creates an empty Element from an HTML tag name.

button : Element msg
button =
    element "button"


-- <button></button>

Convert to HTML

toHtml : Element msg -> Html msg

Converts an Element into an Html.

Add attributes and children

text : String -> Element msg -> Element msg

Appends a text node to an element.

Element.div
    |> Element.text "Hello"
    |> Element.text " world"


-- <div>Hello world</div>

children : List (Element msg) -> Element msg -> Element msg

Appends a list of elements to an element.

Element.div
    |> Element.children
        [ Element.input
        , Element.button
            |> Element.text "Ok"
        ]


-- <div><input  /><button>Ok</button></div>

You can keep calling this function to add more children.

child : Element msg -> Element msg -> Element msg

Like children but appends only one child element.

The example above can be written like:

Element.div
    |> Element.child Element.input
    |> Element.child
        (Element.button |> Element.text "Ok")

htmlChildren : List (Html msg) -> Element msg -> Element msg

Appends Html children to an element.

htmlChild : Html msg -> Element msg -> Element msg

Appends an Html child to an element.

map : (a -> msg) -> Element a -> Element msg

Transform the messages produced by some Element. 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 -> Element Msg
view model =
    Element.div
        |> Element.children
            [ Element.map (\_ -> Left) (viewButton "Left")
            , Element.map (\_ -> Right) (viewButton "Right")
            ]


viewButton : String -> Element ()
viewButton name =
    Element.button
        |> Event.onClick ()
        |> Element.text name

Tags

Stylesheets

style : Element msg

Creates a CSS style node.

Headers

h1 : Element msg

h2 : Element msg

h3 : Element msg

h4 : Element msg

h5 : Element msg

h6 : Element msg

Grouping Content

div : Element msg

Represents a generic container with no special meaning.

p : Element msg

Defines a portion that should be displayed as a paragraph.

hr : Element msg

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

pre : Element msg

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

blockquote : Element msg

Represents a content that is quoted from another source.

Text

span : Element 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 : Element msg

Represents a hyperlink, linking to another resource.

code : Element msg

Represents computer code.

em : Element msg

Represents emphasized text, like a stress accent.

strong : Element msg

Represents especially important text.

i : Element 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 : Element 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 : Element msg

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

sub : Element msg

Represent a subscript.

sup : Element msg

Represent a superscript.

br : Element msg

Represents a line break.

Lists

ol : Element msg

Defines an ordered list of items.

ul : Element msg

Defines an unordered list of items.

li : Element msg

Defines a item of an enumeration list.

dl : Element msg

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

dt : Element msg

Represents a term defined by the next dd.

dd : Element msg

Represents the definition of the terms immediately listed before it.

Embedded Content

img : Element msg

Represents an image.

iframe : Element msg

Embedded an HTML document.

canvas : Element msg

Represents a bitmap area for graphics rendering.

math : Element msg

Defines a mathematical formula.

Inputs

form : Element msg

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

input : Element msg

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

textarea : Element msg

Represents a multiline text edit control.

button : Element msg

Represents a button.

select : Element msg

Represents a control allowing selection among a set of options.

option : Element msg

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

Sections

section : Element msg

Defines a section in a document.

nav : Element msg

Defines a section that contains only navigation links.

article : Element msg

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

aside : Element msg

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

address : Element msg

Defines a section containing contact information.

main_ : Element msg

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

Figures

figure : Element msg

Represents a figure illustrated as part of the document.

figcaption : Element msg

Represents the legend of a figure.

Tables

table : Element msg

Represents data with more than one dimension.

caption : Element msg

Represents the title of a table.

colgroup : Element msg

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

col : Element msg

Represents a column of a table.

tbody : Element msg

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

thead : Element msg

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

tfoot : Element msg

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

tr : Element msg

Represents a row of cells in a table.

td : Element msg

Represents a data cell in a table.

th : Element msg

Represents a header cell in a table.

Less Common Elements

Less Common Inputs

fieldset : Element msg

Represents a set of controls.

legend : Element msg

Represents the caption for a fieldset.

label : Element msg

Represents the caption of a form control.

datalist : Element msg

Represents a set of predefined options for other controls.

optgroup : Element msg

Represents a set of options, logically grouped.

output : Element msg

Represents the result of a calculation.

progress : Element msg

Represents the completion progress of a task.

meter : Element msg

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

Audio and Video

audio : Element msg

Represents a sound or audio stream.

video : Element msg

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

source : Element msg

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

track : Element msg

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

Embedded Objects

embed : Element msg

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

object : Element 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 : Element msg

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

Text Edits

ins : Element msg

Defines an addition to the document.

del : Element msg

Defines a removal from the document.

Semantic Text

small : Element 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 : Element msg

Represents the title of a work.

dfn : Element msg

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

abbr : Element msg

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

time : Element msg

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

var : Element 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 : Element msg

Represents the output of a program or a computer.

kbd : Element msg

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

s : Element msg

Represents content that is no longer accurate or relevant.

q : Element msg

Represents an inline quotation.

Less Common Text Tags

mark : Element msg

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

ruby : Element 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 : Element msg

Represents the text of a ruby annotation.

rp : Element 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 : Element 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 : Element msg

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

wbr : Element 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

details : Element msg

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

summary : Element msg

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

menuitem : Element msg

Represents a command that the user can invoke.

mauroc8/elm-html-pipeline/2.0.1