Copyright	(C) 2016-2026 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.Html.Element

Contents

Smart constructors
Document metadata
Sectioning root
Content sectioning
Text content
Inline text semantics
Image and multimedia
Embedded content
Scripting
Demarcating edits
Table content
Forms
Interactive elements
Web components
SVG

Description

Overview

Miso.Html.Element provides smart constructors for every HTML element. Each constructor has the signature:

tagName_ :: [Attribute action] -> [View model action] -> View model action

All names are suffixed with _ to avoid clashing with Haskell Prelude names (e.g. div_, head_, map_). This module is re-exported in its entirety by Miso.Html and Miso.

Quick start

import Miso

view :: Model -> View Model Action
view m =
  div_ []
    [ h1_ [] [ text "Hello, miso!" ]
    , p_  [ class_ "intro" ]
             [ text "Counter: ", text (ms m) ]
    , button_ [ onClick Increment ] [ text "+" ]
    ]

Element groups

Document metadata: html_, head_, base_, link_, meta_, style_, title_, doctype_
Sectioning: body_, address_, article_, aside_, footer_, header_, h1_–h6_, hgroup_, main_, nav_, section_, search_
Text content: blockquote_, dd_, div_, dl_, dt_, figcaption_, figure_, hr_, li_, menu_, ol_, p_, pre_, ul_
Inline semantics: a_, abbr_, b_, bdi_, bdo_, br_, cite_, code_, data_, dfn_, em_, i_, kbd_, mark_, q_, rp_, rt_, ruby_, s_, samp_, small_, span_, strong_, sub_, sup_, time_, u_, var_, wbr_
Embedded content: audio_, canvas_, embed_, iframe_, img_, map_, object_, picture_, portal_, source_, track_, video_
Scripting: noscript_, script_
Edits: del_, ins_
Table: caption_, col_, colgroup_, table_, tbody_, td_, tfoot_, th_, thead_, tr_
Forms: button_, datalist_, fieldset_, form_, input_, label_, legend_, meter_, optgroup_, option_, output_, progress_, select_, textarea_
Interactive: details_, dialog_, summary_
Custom: nodeHtml for any tag name not listed above

nodeHtml :: MisoString -> [Attribute action] -> [View model action] -> View model action
html_ :: [Attribute action] -> [View model action] -> View model action
doctype_ :: View model action
base_ :: [Attribute action] -> View model action
head_ :: [Attribute action] -> [View model action] -> View model action
link_ :: [Attribute action] -> View model action
meta_ :: [Attribute action] -> View model action
style_ :: [Attribute action] -> MisoString -> View model action
title_ :: [Attribute action] -> [View model action] -> View model action
body_ :: [Attribute action] -> [View model action] -> View model action
address_ :: [Attribute action] -> [View model action] -> View model action
article_ :: [Attribute action] -> [View model action] -> View model action
aside_ :: [Attribute action] -> [View model action] -> View model action
footer_ :: [Attribute action] -> [View model action] -> View model action
header_ :: [Attribute action] -> [View model action] -> View model action
h1_ :: [Attribute action] -> [View model action] -> View model action
h2_ :: [Attribute action] -> [View model action] -> View model action
h3_ :: [Attribute action] -> [View model action] -> View model action
h4_ :: [Attribute action] -> [View model action] -> View model action
h5_ :: [Attribute action] -> [View model action] -> View model action
h6_ :: [Attribute action] -> [View model action] -> View model action
hgroup_ :: [Attribute action] -> [View model action] -> View model action
main_ :: [Attribute action] -> [View model action] -> View model action
nav_ :: [Attribute action] -> [View model action] -> View model action
section_ :: [Attribute action] -> [View model action] -> View model action
search_ :: [Attribute action] -> [View model action] -> View model action
blockquote_ :: [Attribute action] -> [View model action] -> View model action
dd_ :: [Attribute action] -> [View model action] -> View model action
div_ :: [Attribute action] -> [View model action] -> View model action
dl_ :: [Attribute action] -> [View model action] -> View model action
dt_ :: [Attribute action] -> [View model action] -> View model action
figcaption_ :: [Attribute action] -> [View model action] -> View model action
figure_ :: [Attribute action] -> [View model action] -> View model action
hr_ :: [Attribute action] -> View model action
li_ :: [Attribute action] -> [View model action] -> View model action
menu_ :: [Attribute action] -> [View model action] -> View model action
ol_ :: [Attribute action] -> [View model action] -> View model action
p_ :: [Attribute action] -> [View model action] -> View model action
pre_ :: [Attribute action] -> [View model action] -> View model action
ul_ :: [Attribute action] -> [View model action] -> View model action
a_ :: [Attribute action] -> [View model action] -> View model action
abbr_ :: [Attribute action] -> [View model action] -> View model action
b_ :: [Attribute action] -> [View model action] -> View model action
bdi_ :: [Attribute action] -> [View model action] -> View model action
bdo_ :: [Attribute action] -> [View model action] -> View model action
br_ :: [Attribute action] -> View model action
cite_ :: [Attribute action] -> [View model action] -> View model action
code_ :: [Attribute action] -> [View model action] -> View model action
data_ :: [Attribute action] -> [View model action] -> View model action
dfn_ :: [Attribute action] -> [View model action] -> View model action
em_ :: [Attribute action] -> [View model action] -> View model action
i_ :: [Attribute action] -> [View model action] -> View model action
kbd_ :: [Attribute action] -> [View model action] -> View model action
mark_ :: [Attribute action] -> [View model action] -> View model action
q_ :: [Attribute action] -> [View model action] -> View model action
rp_ :: [Attribute action] -> [View model action] -> View model action
rt_ :: [Attribute action] -> [View model action] -> View model action
ruby_ :: [Attribute action] -> [View model action] -> View model action
s_ :: [Attribute action] -> [View model action] -> View model action
samp_ :: [Attribute action] -> [View model action] -> View model action
small_ :: [Attribute action] -> [View model action] -> View model action
span_ :: [Attribute action] -> [View model action] -> View model action
strong_ :: [Attribute action] -> [View model action] -> View model action
sub_ :: [Attribute action] -> [View model action] -> View model action
sup_ :: [Attribute action] -> [View model action] -> View model action
time_ :: [Attribute action] -> [View model action] -> View model action
u_ :: [Attribute action] -> [View model action] -> View model action
var_ :: [Attribute action] -> [View model action] -> View model action
wbr_ :: [Attribute action] -> View model action
area_ :: [Attribute action] -> View model action
audio_ :: [Attribute action] -> [View model action] -> View model action
img_ :: [Attribute action] -> View model action
map_ :: [Attribute action] -> [View model action] -> View model action
track_ :: [Attribute action] -> View model action
video_ :: [Attribute action] -> [View model action] -> View model action
embed_ :: [Attribute action] -> View model action
fencedframe_ :: [Attribute action] -> [View model action] -> View model action
iframe_ :: [Attribute action] -> [View model action] -> View model action
object_ :: [Attribute action] -> [View model action] -> View model action
picture_ :: [Attribute action] -> [View model action] -> View model action
source_ :: [Attribute action] -> View model action
canvas_ :: [Attribute action] -> [View model action] -> View model action
noscript_ :: [Attribute action] -> [View model action] -> View model action
script_ :: [Attribute action] -> MisoString -> View model action
del_ :: [Attribute action] -> [View model action] -> View model action
ins_ :: [Attribute action] -> [View model action] -> View model action
caption_ :: [Attribute action] -> [View model action] -> View model action
col_ :: [Attribute action] -> View model action
colgroup_ :: [Attribute action] -> [View model action] -> View model action
table_ :: [Attribute action] -> [View model action] -> View model action
tbody_ :: [Attribute action] -> [View model action] -> View model action
td_ :: [Attribute action] -> [View model action] -> View model action
tfoot_ :: [Attribute action] -> [View model action] -> View model action
th_ :: [Attribute action] -> [View model action] -> View model action
thead_ :: [Attribute action] -> [View model action] -> View model action
tr_ :: [Attribute action] -> [View model action] -> View model action
button_ :: [Attribute action] -> [View model action] -> View model action
datalist_ :: [Attribute action] -> [View model action] -> View model action
fieldset_ :: [Attribute action] -> [View model action] -> View model action
form_ :: [Attribute action] -> [View model action] -> View model action
input_ :: [Attribute action] -> View model action
label_ :: [Attribute action] -> [View model action] -> View model action
legend_ :: [Attribute action] -> [View model action] -> View model action
meter_ :: [Attribute action] -> [View model action] -> View model action
optgroup_ :: [Attribute action] -> [View model action] -> View model action
option_ :: [Attribute action] -> [View model action] -> View model action
output_ :: [Attribute action] -> [View model action] -> View model action
progress_ :: [Attribute action] -> [View model action] -> View model action
select_ :: [Attribute action] -> [View model action] -> View model action
textarea_ :: [Attribute action] -> View model action
details_ :: [Attribute action] -> [View model action] -> View model action
dialog_ :: [Attribute action] -> [View model action] -> View model action
summary_ :: [Attribute action] -> [View model action] -> View model action
slot_ :: [Attribute action] -> [View model action] -> View model action
template_ :: [Attribute action] -> [View model action] -> View model action
svg_ :: [Attribute action] -> [View model action] -> View model action

Smart constructors

nodeHtml :: MisoString -> [Attribute action] -> [View model action] -> View model action Source #

Low-level helper used to construct HTML node in View. Almost all functions in this module, like div_, table_ etc. are defined in terms of it.

Document metadata

html_ :: [Attribute action] -> [View model action] -> View model action Source #

<html>

doctype_ :: View model action Source #

base_ :: [Attribute action] -> View model action Source #

<base>

Since: 1.9.0.0

head_ :: [Attribute action] -> [View model action] -> View model action Source #

<head>

link_ :: [Attribute action] -> View model action Source #

<link>

meta_ :: [Attribute action] -> View model action Source #

<meta>

style_ :: [Attribute action] -> MisoString -> View model action Source #

<style>

This takes the raw text to be put in the style tag.

That means that if any part of the text is not trusted there's a potential CSS injection.

You can also easily shoot yourself in the foot with something like:

style_ [] "</style>"

You can use style_ as a safer anternative.

title_ :: [Attribute action] -> [View model action] -> View model action Source #

<title>

Since: 1.9.0.0

Sectioning root

body_ :: [Attribute action] -> [View model action] -> View model action Source #

<body>

Content sectioning

address_ :: [Attribute action] -> [View model action] -> View model action Source #

article_ :: [Attribute action] -> [View model action] -> View model action Source #

aside_ :: [Attribute action] -> [View model action] -> View model action Source #

<aside>

footer_ :: [Attribute action] -> [View model action] -> View model action Source #

header_ :: [Attribute action] -> [View model action] -> View model action Source #

h1_ :: [Attribute action] -> [View model action] -> View model action Source #

<h1>

h2_ :: [Attribute action] -> [View model action] -> View model action Source #

<h2>

h3_ :: [Attribute action] -> [View model action] -> View model action Source #

<h3>

h4_ :: [Attribute action] -> [View model action] -> View model action Source #

<h4>

h5_ :: [Attribute action] -> [View model action] -> View model action Source #

<h5>

h6_ :: [Attribute action] -> [View model action] -> View model action Source #

<h6>

hgroup_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

main_ :: [Attribute action] -> [View model action] -> View model action Source #

<main>

nav_ :: [Attribute action] -> [View model action] -> View model action Source #

<nav>

section_ :: [Attribute action] -> [View model action] -> View model action Source #

search_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

Text content

blockquote_ :: [Attribute action] -> [View model action] -> View model action Source #

dd_ :: [Attribute action] -> [View model action] -> View model action Source #

<dd>

div_ :: [Attribute action] -> [View model action] -> View model action Source #

<div>

dl_ :: [Attribute action] -> [View model action] -> View model action Source #

<dl>

dt_ :: [Attribute action] -> [View model action] -> View model action Source #

<dt>

figcaption_ :: [Attribute action] -> [View model action] -> View model action Source #

figure_ :: [Attribute action] -> [View model action] -> View model action Source #

hr_ :: [Attribute action] -> View model action Source #

<hr>

li_ :: [Attribute action] -> [View model action] -> View model action Source #

<li>

menu_ :: [Attribute action] -> [View model action] -> View model action Source #

<menu>

ol_ :: [Attribute action] -> [View model action] -> View model action Source #

<ol>

p_ :: [Attribute action] -> [View model action] -> View model action Source #

<p>

pre_ :: [Attribute action] -> [View model action] -> View model action Source #

<pre>

ul_ :: [Attribute action] -> [View model action] -> View model action Source #

<ul>

Inline text semantics

a_ :: [Attribute action] -> [View model action] -> View model action Source #

<a>

abbr_ :: [Attribute action] -> [View model action] -> View model action Source #

<abbr>

b_ :: [Attribute action] -> [View model action] -> View model action Source #

<b>

bdi_ :: [Attribute action] -> [View model action] -> View model action Source #

<bdi>

bdo_ :: [Attribute action] -> [View model action] -> View model action Source #

<bdo>

br_ :: [Attribute action] -> View model action Source #

<br>

cite_ :: [Attribute action] -> [View model action] -> View model action Source #

<cite>

code_ :: [Attribute action] -> [View model action] -> View model action Source #

<code>

data_ :: [Attribute action] -> [View model action] -> View model action Source #

<data>

Since: 1.9.0.0

dfn_ :: [Attribute action] -> [View model action] -> View model action Source #

<dfn>

em_ :: [Attribute action] -> [View model action] -> View model action Source #

<em>

i_ :: [Attribute action] -> [View model action] -> View model action Source #

<i>

kbd_ :: [Attribute action] -> [View model action] -> View model action Source #

<kbd>

mark_ :: [Attribute action] -> [View model action] -> View model action Source #

<mark>

q_ :: [Attribute action] -> [View model action] -> View model action Source #

<q>

rp_ :: [Attribute action] -> [View model action] -> View model action Source #

<rp>

rt_ :: [Attribute action] -> [View model action] -> View model action Source #

<rt>

ruby_ :: [Attribute action] -> [View model action] -> View model action Source #

<ruby>

s_ :: [Attribute action] -> [View model action] -> View model action Source #

<s>

samp_ :: [Attribute action] -> [View model action] -> View model action Source #

<samp>

small_ :: [Attribute action] -> [View model action] -> View model action Source #

<small>

span_ :: [Attribute action] -> [View model action] -> View model action Source #

<span>

strong_ :: [Attribute action] -> [View model action] -> View model action Source #

sub_ :: [Attribute action] -> [View model action] -> View model action Source #

<sub>

sup_ :: [Attribute action] -> [View model action] -> View model action Source #

<sup>

time_ :: [Attribute action] -> [View model action] -> View model action Source #

<time>

u_ :: [Attribute action] -> [View model action] -> View model action Source #

<u>

var_ :: [Attribute action] -> [View model action] -> View model action Source #

<var>

wbr_ :: [Attribute action] -> View model action Source #

<wbr>

Image and multimedia

area_ :: [Attribute action] -> View model action Source #

<area>

Since: 1.9.0.0

audio_ :: [Attribute action] -> [View model action] -> View model action Source #

<audio>

img_ :: [Attribute action] -> View model action Source #

<img>

map_ :: [Attribute action] -> [View model action] -> View model action Source #

<map>

Since: 1.9.0.0

track_ :: [Attribute action] -> View model action Source #

<track>

video_ :: [Attribute action] -> [View model action] -> View model action Source #

<video>

Embedded content

embed_ :: [Attribute action] -> View model action Source #

<embed>

fencedframe_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

iframe_ :: [Attribute action] -> [View model action] -> View model action Source #

object_ :: [Attribute action] -> [View model action] -> View model action Source #

picture_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

source_ :: [Attribute action] -> View model action Source #

Scripting

canvas_ :: [Attribute action] -> [View model action] -> View model action Source #

Note this just renders a canvas element. See also canvas_ which supports canvas drawing DSL.

noscript_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

script_ :: [Attribute action] -> MisoString -> View model action Source #

This takes the raw text to be put in the script tag.

That means that if any part of the text is not trusted there's a potential JavaScript injection. Read more at https://owasp.org/www-community/attacks/xss/

You can also easily shoot yourself in the foot with something like:

script_ [] "</script>"

Demarcating edits

del_ :: [Attribute action] -> [View model action] -> View model action Source #

<del>

ins_ :: [Attribute action] -> [View model action] -> View model action Source #

<ins>

Table content

caption_ :: [Attribute action] -> [View model action] -> View model action Source #

col_ :: [Attribute action] -> View model action Source #

<col>

colgroup_ :: [Attribute action] -> [View model action] -> View model action Source #

table_ :: [Attribute action] -> [View model action] -> View model action Source #

<table>

tbody_ :: [Attribute action] -> [View model action] -> View model action Source #

<tbody>

td_ :: [Attribute action] -> [View model action] -> View model action Source #

<td>

tfoot_ :: [Attribute action] -> [View model action] -> View model action Source #

<tfoot>

th_ :: [Attribute action] -> [View model action] -> View model action Source #

<th>

thead_ :: [Attribute action] -> [View model action] -> View model action Source #

<thead>

tr_ :: [Attribute action] -> [View model action] -> View model action Source #

<tr>

Forms

button_ :: [Attribute action] -> [View model action] -> View model action Source #

datalist_ :: [Attribute action] -> [View model action] -> View model action Source #

fieldset_ :: [Attribute action] -> [View model action] -> View model action Source #

form_ :: [Attribute action] -> [View model action] -> View model action Source #

<form>

For usage in a real-world application with the onSubmit event.

view :: Model -> View model action
view model = form_ [ onSubmit NoOp ] [ input [ type_ "submit" ] ]

Note: onSubmit will use preventDefault = True. This will keep the form from submitting to the server.

input_ :: [Attribute action] -> View model action Source #

<input>

label_ :: [Attribute action] -> [View model action] -> View model action Source #

<label>

legend_ :: [Attribute action] -> [View model action] -> View model action Source #

meter_ :: [Attribute action] -> [View model action] -> View model action Source #

<meter>

optgroup_ :: [Attribute action] -> [View model action] -> View model action Source #

option_ :: [Attribute action] -> [View model action] -> View model action Source #

output_ :: [Attribute action] -> [View model action] -> View model action Source #

progress_ :: [Attribute action] -> [View model action] -> View model action Source #

select_ :: [Attribute action] -> [View model action] -> View model action Source #

textarea_ :: [Attribute action] -> View model action Source #

textarea_ [ id_ "txt", P.value_ (model ^. txt) ]

When compiling on the server, this combinator will render HTML as <textarea>text</textarea>.

Since: 1.9.0.0

Interactive elements

details_ :: [Attribute action] -> [View model action] -> View model action Source #

dialog_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

summary_ :: [Attribute action] -> [View model action] -> View model action Source #

Web components

slot_ :: [Attribute action] -> [View model action] -> View model action Source #

<slot>

Since: 1.9.0.0

template_ :: [Attribute action] -> [View model action] -> View model action Source #

Since: 1.9.0.0

SVG

svg_ :: [Attribute action] -> [View model action] -> View model action Source #

<svg>